01 Overview
Role: I am the sole designer & creator of this app.
Tools: Figma, diagrams.net
Introduction: Grumble & Crumble is an app designed in a “build-your-own” style to help a customer customize a cookie from scratch. Users start by choosing a base from several options then add any additional toppings. Once the customizations are complete, users may continue to work on orders or checkout to purchase their dream cookie!
02 Process
Competitor Analysis
In order to create an IA (information architecture) diagram for the app, I visited several websites that highlighted their “build-your-own” products such as Vans, Build-a-Bear, and Uplift Desks.
I looked for similarities among these customization processes and a couple of things stood out to me. I noticed that the products started from a certain “base”, which would be a call-to-action of some sort, then are followed by several options. This process is repeated so that the customizations begins with the foundation of the product and finishes with smaller details such as lace colors in Vans’ case . Once the customizations were completed, order summary and checkout were the only steps left, which were fairly customary for any e-commerce website. Requesting login info was also present either at the beginning of the customization process or before checkout.
2. Early Iterations
Cookies generally have three components, the base, add-ins, and toppings, all of which can be changed depending on the type of cookie being baked.
The first decision to be made was which features had the option to be customized. To add a more whimsical feeling to the process, I envisioned a world in which the bases and add-ins could have every option imaginable, not just the popular ones you often think of when you imagine a cookie. My lo-fi wireframes started with all possible customizations to be on one screen on the app and included drop down sections for each category.
3. Hi-Fi Wireframes
I received feedback that helped me transition my lo-fidelity wireframes to hi-fidelity ones.
The feedback I received from my lo-fi wireframes was that (1) the drop down arrows were too confusing because the direction they point in is ambiguous, (2) drop down menus prevent the user from seeing all of their options at once, and (3) having all sections open would make the screen messy. Basically, drop down menus are just bad UX. To eliminate any confusion and present the user with all potential choices, I got rid of the drop down sections all together and added multiple screens so that each step (base, add-ins, etc.) would be its own screen. Each screen displays all the options for that specific section. I also included a dotted progress bar to increase the visibility of where the user is in the customization process.
03 Continued Design Iterations
I created this app in 2020 and my wireframing skills have improved since then. I wanted to challenge myself by updating some of the wireframes because design is never finished! There are always things improve. I chose to redo the starting screen, a selection screen, and the final product before adding to the cart. My overall goals in redesigning these screens were to:
Update the colors to better reflect the products: I went with light muted colors that inspire sweetness and creativity.
Create a welcoming atmosphere where creativity is welcomed: The app welcomes the user on the homepage to mimic a human interaction.
Include an accessible navigation section: Users can return to the homepage, access their favorited creations, chat with customer service, and view their profile.
04 Final Thoughts
Designing a build-your-own app provided an opportunity to see what it’s like for users to buy products online, especially ones that can be customized. Revisiting my project was exciting because I was able to apply what I had learned thus far as a UX Designer and see how much I have grown. This app is a testament that learning is never finished and that designs can be improved. This was also the first functional prototype I had created and I’m excited to create more in the future!
other works!
connect with me!