Mobile application

Nurture Foods

My role:
UX / UI Designer

Tool:
Figma, Marvel

Responsibilities:
UX research
Wireframing
UI Design
Usability testing

During COVID-19, Gorillas became huge due to its convenience factor. But I have one problem with this app: it’s unsustainable mission.

As a sustainable response to Gorillas, I designed a responsive mobile application, which allows users to truly reconnect with the roots and shop directly from the local farmers in their nearby area.

View Prototype

The challenge

  • Design a mission-based, sustainability-oriented groceries delivery app with a modern, intuitive UI.

  • The app should have a competitive edge with other similar food apps on the market.

The results

  • 23 high-fidelity screens with end-to-end order process.

  • Developed and implemented Design System components.

  • Overall 100% positive feedback on both the UX flow and the UI look from user testing.

Design process

Research

Competitor analysis

User interviews

Personas

UX Design

Stories & requirements

User flow

Rapid prototyping

Usability testing

UI Design

Creating a design system

A/B testing

Iterating

Wireframing

Responsive design

Feedback

High-fidelity wireframes

Learnings

Personal learnings from the project & thoughts on improvements

01.

Research

At the outset of this project, I felt it was important to identify as best as I could what aspects users truly dislike about the grocery shopping experience. To this end, I started with a competitor analysis. I picked up 9 sustainable food apps currently trending on the German App Store and then narrowed it down to 2. Then, I created a SWOT and UX analysis for those apps, looking at usability, features offered, interaction experience, and the overall product value. With these first insights, I mapped what my own app could have and also shouldn’t have.

After that, I went on to interview 4 target users face-to-face to find out what their user pain-point is and, if there was an ideal app that could deliver food and be sustainable, how would that app look.

What is the most frustrating thing about shopping for groceries?

  • 😡 Plastic and packaging waste.

  • 🤨 Sustainable options aren’t the go-to options in normal supermarkets.

  • 💰 Eco labels come with a price tag.

  • 🚗 Zero-waste shops are too far away.

  • ♻️ Lack of transparency between food sellers and consumers.

  • 😓 Lack of convenience.

  • 🤮 Feels they’re being greenwashed.

  • ⏰ Too much time is needed to research the most sustainable options.

The top frustrating pain-point for users is that they have to go out of the way to find sustainable choices.

As always, convenience is still king.

In order to help users make sustainable choices, the solution needs to be intuitive and offer the expected experience of convenience, so that users don’t have to choose between one or the other.

This was the perhaps most important takeaway from user interviewing. However, there were more things that people mentioned: time constraints, what they like and dislike in food delivery apps and groceries shopping. So I created two personas to keep in mind during my future stages of design process.

02.

UX design

Now knowing what users needs, I went on to create a list of product requirements, to be used to map out all the features for the app.

I started off by writing user stories which would encapsulate user needs, goals, and desired functionalities. 



Overall, I came up with 9 stories, but the scope of the project only allowed me to focus on 4. To choose, I did a prio session, listing stories as “must-have’s” or “nice-to-have’s”. Following the selection, I wrote a success criteria for every story and a task analysis. All of this was used to create a user flow.

At this stage, I felt I had what I needed to finally start sketching out design solutions and testing those designs through rapid prototyping. I first conducted some exploratory, very low-fidelity sketching with pen and paper and then prototyped them on Marvel.

The goal here was to assess learnability for users interacting with the app for the very first time. I wanted to observe if the users understood what the app was about and how they completed fundamental actions like selecting a product, creating an account, and checking out.

I recruited 5 participants for an in-person session and provided them with a test script.

All participants were asked to “think out loud” as they’re going through the prototype, while I was recording their every move and word. I then synthesized my observations into concrete issues, ranking the issues using Jakob Nielsen’s error severity rating system, and coming up with solutions for my design based on the test results.

03.

UI Design

Having iterated the screens based on the first usability test, I then proceeded to the next part of the project: the UI design.

Moodboarding

For this food app, I sought inspiration from food (naturally). I went on a deep dive through Pinterest for my palette inspiration, building several moodboards from such sources as veg baskets, food flatlays, and table settings that felt inspiring.

Exploring colours

For colours, I sought inspiration from vegetables: onions, broccoli, tomatoes, aubergines, lemons, carrots... The example to the left shows some of my explorations.

Font

I explored a variety of fonts that would feel both classic but also modern at the same time. My choice fell on Avenir: a font with harmonious, sensible appearance for both texts and headlines. It’s also a modern, not a classic, font, which seems to pair well with the contemporary feel that I wanted to achieve with my app.

Creating a design system

Next on, I designed a library of assets (buttons, icons, final colour palette) to develop a brand identity for the app.

The colour palette

I set on a primary colour palette to be used for CTA buttons, icons, tabs, and hyperlink buttons. I also consulted my own colour library for supportive colours that could be used as backgrounds for product imagery in order to make it pop.

Buttons

Based on the colour palette, a set of buttons was created for primary or secondary CTAs, as well as the adding or deleting the item from cart.

Icons & Components

I also designed icons for the bottom iOS navigation (stroke 1.7px): bare or selected. Also, when an item is added to cart, a numerical value is displayed (12x12px ellipse).

Additional icons were also created for supportive navigation throughout the future web/desktop app.

Typography

I created a typography system in Figma, to establish a legible, consistent use of typography within the design system and to make it easier to scale types across the future devices.

Good design = validated design.

While I was building a design system, I wanted to conduct a preference test to see which kind of UI would appeal to users more. To do that, I designed two Home screens —one with a white background, and one with supportive pastel colours for background images.

I then created an A/B test on UsabilityHub and recruited 20 participants online.

Statistically, the colour version performed 99.0% better, so my design idea was validated.

Iterating screens based on feedback

When designing the User Interface, I put emphasis on minimalism and usability. Based on the previous user feedback, I significantly iterated the Home Screen, compared to the screens from the A/B test above which were based on my pen and paper prototype. These were the changes made:

  • The Veg/Fruit Box space was optimised in-line and a selection picker was added. There's an ability to scroll to see the rest of the staple box selection.

  • Info slides were added so that users can learn more about the farmer's community.

  • More products were added so that users can customise their order and add more produce.

  • An address line is added, fetched through GPS/phone settings automatically. If inaccurate, users have a possibility to click "Change" and adjust their address.

From Home screen, I also focused on delivering a smooth checkout experience. Clicking on the small + icon would allow to add an item straight to the shopping cart while preserving an ability to scroll. To give visual feedback that the addition was successful, an item number would appear in the cart.

Yet of course, it’s also possible to click inside the product item (Product Screen) in order to: 

  • Familiarize with sustainability certificates and labels

  • Get to know the individual farmers who grew that particular product

  • Get important information about pick-up or delivery, packaging, etc.

Wireframes

Onboarding screens are communicating product value and pickup/delivery options

Home & Product screens allow users to learn more about products, farmers, and add items to cart.

Simple Registration screen for returning users

Location fetching functionality easily gets users' location and allows them to adjust the address, see the nearest pick-up spots and select & save the one they prefer.

Checkout screen lets users review their cart, add tip and continue with the order. If the address is desired to be changed, it's possible too (the users would return to location-fetching screens).

Order confirmation to let users keep track of their order and access customer support in case of any problems with that particular order.

Responsive design

Having finalized high-fidelity wireframes, I head out to create a browser-based version of the app so that ‘Nurture Foods’ could be available on mobile, tablet, and desktop.

First, I defined the grid that would work for a mobile breakpoint and then for a tablet breakpoint and the desktop breakpoint. I found that the same grid as 12 columns gave me equally great flexibility for all devices.

I also adjusted the design accordingly: as possible to notice, there are slight differences to achieve the most optimal look for every device.

04.

Getting user feedback

As a new designer, I want to be involved in critiques and proactively seek feedback. So I asked 3 of my fellow UI peers to review all the responsive screens and then summarised their feedback and structured it in two categories: one for constructive, one for positive.

Overall, people left positive feedback on the designs, which was great because it provided an opportunity to focus on small details to achieve a next level of polish to the app.

From constructive feedback, there were small comments made regarding the padding of the categories, an opportunity to signup via Google/Amazon, line spacing for headers that participants said could be bigger, etc.

What people liked:

🥦 Use of colours

🍋 Simple navigation

🥬 Spacing & layouting

🍑 Overall user flow

🍅 Use of imagery

05.

Learnings from the project

Overall, the design goals that I set for myself in the beginning of the project were achieved, as the feedback I received from users confirmed they found the app a) aesthetically pleasing, and b) competitive with others apps out there.

For my very first UI project, it was an exciting challenge. I learned a great deal overall about building solid UX foundations — e.g. conducting user research to flesh out user needs, product requirements & user flows — to achieve an optimal UI — e.g. clean layouting, attractive use of colours, building a scalable design system, etc.

Perhaps my biggest learning from this project is something I already knew but is worth remembering: Good design comes from collaboration. So getting feedback from users from the onset of the project, throughout the middle and later stages can be a true game changer!


Things I would have done differently

Because of the limited scope of this project, I wasn't given an opportunity to do a final usability testing on all devices I designed for. I did create an interactive prototype just out of curiosity, even though it was not required. If I were to continue working on the project, I would definitely do a real-life testing to identify where UI could be adjusted or where potential UX problems could still potentially arise.

Finally, because I was only allowed to focus on 4 user flows, I was unable to design and implement the features from the rest of the user stories I had. I could, for instance, develop a "repeat previous purchase" functionality which could be useful for returning users, or design a weekly delivery subscription in the likes of HelloFresh, which could make the app more competitive and also fit the need of the busy persona that is dealing with time constraints.

More case studies:

Finance budgeting app