Work
Duration
- 5 days
Role &Scope
- UI Design
- Branding
Team
- 2 people total, I worked with a product manager. She provided me with existing assets like target demographic, user stories, personas and wireframes.
Details
- Budget grocery start up app, Nosh. The app features functions like suggestions based
on a user's budget; what they have in their fridge; and their schedule, diet. This app will use their history of previous purchases to send them personalized shopping lists, recipes, seamless order integration, and pushes from the client's partners, Amazon and Fresh Direct. However, the scope for my specific role would be to re-design the past order flow and their branding.
• On the past order screen, users can find specific items they purchased by “most frequently bought items” or “most recently bought items”, or they could looks through past orders by date chronologically.
• Right before user checkout, user can switch between Amazon Fresh or FreshDirect.
User Story 2 - I want to “ Share my grocery list."• Users can share their grocery list via text messages or social media in case someone else is doing the grocery shopping.
User Story 3- I want to “ Remove any unnecessary items.”
• User can delete any item with an easy swipe motion.
User Story 4- I want to “ Have the ability to substitute items.”
• User can easily substitute any item that is algorithmically adjacent. In this instance, if you choose to substitute garlic, only other kind of garlic would show up.
• Gender: Female
• Age: 22-40 years old.
• Annual Income: $40,000-80,0000
• Location: Large urban areas, United States (initial marketing and focus is New York City).
• Interests: cooking, exercise, wellness and health.
• Attitudes: health conscious, intimidated by cooking, optimistic, ambitious, wants to eat out less, wants to be healthier.
• Challenges: lack of time and resources, lack of skill, experiences social isolation due to urban culture.
• The project manager provided the following personas. As I worked on the project, I constantly asked myself the following questions...
• " How can I make the content easily shareable so that Gabrielle can more easily connect with other foodies?"
• " Will April find this app easy to use so that she can incorporate cooking into her busy schedule?"
• As I mentioned, client already had a rough wireframe for past order flow, however they asked that I updated the UI to be more trendy and to improve the flow where it made sense.
• The Project manager provided me with competitor research on apps like Yummly, Bring ! and YoRipe. She also provided the list interaction below as an inspiration, she mentioned that she would like to see something similar to it.
• On the right is the mood board that I was given originally, the client chose Monserrat font and wanted a beet color as their primary color.
• The client asked the colors to be more engaging and UI needs to be more trendy.
• The original beet color doesn’t do well on the screen because it is a in between color and it becomes hard to read on a screen.
• I updated the color palette to be a brighter set of color to mimic the sensory experience when you walk into a grocery store and being surrounded by fresh produce.
• I kept the same Monserrat font and created new set of icons styles that would be consistent with the new logo.
• I used the new updated logo to create a short animated splash screen.
• Using the new updated icons, I also created checkout screen to indicate to users that their orders have been submitted.
Amount Adjustment Interaction
• Originally the quantity stepper were square outlines, however, that was easy to miss, so I had changed to black filled circles to draw visual emphasis.
Delete Interaction
• In keeping of reduce learning principle, I incorporated the same swipe delete motion that ios system users are familiar with. The delete button also went from red filled to just a simple, elegant icon. This change allows for a more fluid, open air interface.
Search List Interaction
• As I mentioned before, the client mentioned they provided a list interaction they liked, I redesigned it to be ios system appropriate.
I had asked each participant to perform 2 of the user stories and tell me about the possible roadblocks they ran into...
User Story 1 - I want to “ Reorder the grocery list."
• Both users reflected that the checkout page was confusing because of there was no visual focus, so I blacked out the grocery content when modal bottom is expanded, also giving user the option of changing between online stores before submitting their order.
User Story 4 - I want to “ Have the ability to substitute items.”
• One user initially had a hard time figuring out how to substitute item, so I moved the substitution button to be immediately visible on the screen, where as before you would only see it when you swipe on the item. User also said it would be helpful to see items categorized, so i sectioned off each item into their own respective groupings for easy navigation.
I conducted a preference test consisted of 4 people through zoom, I asked participant which screen they prefer and why? The screen I am testing is the checkout page.
Screen A- This one was the winner! Items are categorized into sections, and makes for finding items much easier.
Screen B- This screen only contain 5 items above the fold, and user would have to swipe to see the substitution button.
