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.

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.

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.

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.

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.

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.

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 →