Streamline and creating UI for the purchasing process of wonky vegetables.
About the project
The product
The Nowastables is a service that delivers rescued visually imperfect fruits and vegetables to consumers' doorstep.
The goal
The goal was to design a user interface for The Nowastable app that allows users to buy a box of imperfect vegetables by streamlining its checkout process.
1st design iteration
Style
The objective was to convert the low-fidelity wireframes into a high-fidelity prototype. First I specified the primary, secondary, and neutral colors, and defined them in different shades. To choose Primary and Secondary colours, I used ChatGPT to suggest some colours that can be used for such mobile app. And I chose this specific Green and Purple. I chose the "Sen" font in regular because it is clear and represents the vegetables' wonkiness. I then defined a 4-column grid that adheres to the 4-pixel rule.
Components
Once styling is set, I created the various components and used them to create the high-fidelity prototype.
Crafting UI
As components are created, I started to craft use interfaces.
After I finished the design, I couldn't help but notice some issues. During the development process, I began to question certain functions and anticipated user behaviors. I found that certain parts would be quite confusing for the users.
Revising the wireframe
After discovering some structural issues, I decided to revisit the wireframe and make revisions. I included notes on areas where I could improve.
Multiple box or just one per order?
One major problem I noticed is that having a checkbox for each vegetable box card may give users the impression that they can choose and purchase multiple boxes. However, during the checkout process, users can customize their selected box. In this scenario, what's the point of choosing multiple boxes? Moreover, if users do choose to add multiple boxes, the user flow should allow them to customize each box. However, this flow can be complex and confusing for users.
Order summary
I came to another realization that this checkout flow requires an order summary page. When studying popular grocery delivery apps like Crisp, Picnic, and Gorillas, I noticed the importance of an order summary page. The original wireframe lacked this feature, which caused users to go all the way back to the previous page if they needed to verify or change any information. The order summary page is essential for e-commerce, as it not only provides convenience but also provide confidence to users when making purchases.
Wireframe 2.0
Based on the notes I made in the revision, I have crafted a new wireframe.
Design 2.0
Once I completed the new wireframe, I have proceed with deigning of the UI
UI
Next step
Build a prototype & test with users
My next step is to create a prototype and test it with potential users. I will evaluate its UI and usability. based on the feedback from the usability test.
Iterate on the design
Then, I would iterate on the proposed design based on the feedback from the test.
Learnings
Work on UX before starting the UI design
Before beginning the UI design, it's important to thoroughly examine and finalize the UX. If the user flow and actions aren't established beforehand, the time and effort put into the UI design could potentially be wasted.
Make sure that components are set to scale
If your components aren't set to scale as expected, it can be a hassle when using them in other files. Detaching them from components is necessary to make them scalable. Therefore, it's crucial to ensure that your components are scalable.