Embedded Files
Project Overview
The Product:
OreoiD is an online service offered by Mondelēz for their Oreo cookie brand. Customers are encouraged to create custom cookie orders by uploading images to the OreoiD website. OreoiD's primary target is adult users looking to order a unique gift. On the manufacturing side, The images are collected on an AWS server and the order data is delivered each day to the cookie manufacturer in the form of an Excel file. Each cookie image needs to be printed in the qtys ordered, and shipped by the date the customer specified.
Project Duration: October 2020 - May 2021
The Problem: The manufacturer needs a way to organize and print hundreds of daily custom image orders so they can be easily printed and applied to the cookies by the production staff.
The Goal: Design an app that will allow the production staff to import the Excel data from AWS and export prepped PDFS of images ready to print.
My Role: UX designer conceiving of and actualizing the manufacturing app and designing the apps functionality from concept to delivery.
My Responsibilities: Designing with empathy and without bias. Planning & conducting user research, interviews, & surveys. Synthesizing & diagramming interview & usability study data to form insights. Composing wireframes, building design systems, & creating prototypes via Figma & Adobe Xd. Iterating on designs & progressing user research.
Understanding the User
• User Research
• Pain Points
• Persona
• Ideation
User Research
Summary:
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research was: Production supervisors that need to be able to train their workers to all use the same process. This user group confirmed initial assumptions about what would be needed to manufacture the OreoiD orders, but research also revealed that supervisors were not the only users looking for an easy way to organize custom images. Other users included the production printers that were seeking out a way to have their orders prepped automatically so they did not have to spend so much time creating print layouts.
Pain Points
Time: Hundreds of custom images currently needed to be manually prepped to go through the edible printer and it was taking up alot of time.
Accessibility: The production staff are not all tech savvy or fluent in English
IA: The orders that are delivered from AWS are a simple excel document with no particular structure or additional functionality.
Persona
Persona: Tina
Persona: Tina
Problem Statement:
The user, Tina, is a Production Supervisor for a manufacturing company, who needs a quick and easy way to print hundreds of edible images, because she needs to pack enough custom cookie orders and meet a shipping schedule each day.
Ideation
Initial Ideas:
I did a quick exercise using filemaker to come up with a way to automate image layout creation and that incorporated my findings from the user research. My focus was specifically on creating a quick and easy way to process all of the images at once at the start of each day.
First Test
Initial Goal:
The first test was successful, but I then needed to scale the app to be able to handle hundreds of images at once. I wrote several sequential scripts in order to multiply the single successful process.
Starting the Design
• Sitemap
• Digital Wireframes
• Low-fi Prototype
• Usability Studies
Sitemap
Organizing the Design:
With the initial design started, I began work on the information architecture. I used the App’s sitemap to guide the organizational structure of each screen’s design to ensure a cohesive and consistent experience. I made sure to consider the users journey when constructing the sitemap. My research suggested that most users would prefer to use a linear step-by-step process, so I structured the site around that option.
Digital Wireframes
Planning the Design:
After ideating and drafting some paper wireframes, I created the initial designs for the Image generator app. These designs focused on guiding users through the 3 main steps.
Low-fi Prototype
Connecting the Design:
Using the completed set of digital wireframes, I created a low-fidelity prototype. The primary user flow I connected was generating the image pdfs, so the prototype could be used in a usability study.
Usability Study: Parameters
Study Type:
Moderated
Location:
USA, remote
Participants:
5 participants
Length:
15-30 minutes
Usability Study: Findings & Insights
Testing the App:
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Useful
Users thought the app was very useful and looked forward to its implementation.
Step Numbers
Users wanted numbers to guide them through all of the steps.
Customization
Users want a way to go back and review past orders and images.
Refining the Design
• Mockups
• Accessibility
• Development
• Launch
Mockups
Refining the Design:
Based on the insights from the usability studies, I applied design changes like providing clearer calls to action on the homepage, and showing the date for each entered order.
Mockups
Optimizing the Design:
Early designs only allowed users to move forward from the main screen. Usability studies revealed that users wanted to go backwards and forwards through the app, so I included options to view past orders as well.
Accessibility Considerations
Included text and instructions in both English and Mandarin.
Used icons to help make navigation easier, and a chronological numbering system for step by step guidance through the app's steps.
Used large images to help all users better understand the flow.
Development
I developed the final functioning app using Filemaker Pro Database software, and hosted the app on the cookie manufacturing company's internal server.
The first production test was in October of 2020 and the manufacturing company continues to use the image generator software a year later.
The app successfully improved a multitude of production issues, including order processing.
Final Product
Using the App
Improving Production
After training the production staff to use the image generator app, they began to process all of the custom image orders in record time. The custom order process had been expedited 100x over and it allowed for better planning and execution across all departments.
Going Forward
• Takeaways
• Next Steps
Takeaways
Impact:
The app shaved hours off of the custom image printing process and made order processing much more efficient :
“The app made it very easy to complete the printing much earlier than we had been, I don't think we will ever go back to making manual print layouts.”
What I learned:
While designing the image generator app, I learned that the first ideas really are only the beginning of the process. Usability studies and peer feedback influenced each iteration of the app's designs. I plan to continue testing the app and adding features. I hope to eventually make it possible to run the entire order process through the app.
Next Steps
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more user research to determine how the site will function on the side of AWS- can there be a separate process that they can use to prep images better on their end?
Conduct more user research to determine if users would like to be able to run the entire order process through the app.
Let's Connect!
I really appreciate your time reviewing my work on the OreoiD image generator app!
If you’d like to see more or get in touch, my contact information is below.
Thank You!
Page updated
Google Sites
Report abuse