Rocket (2023)

Interaction design • UI Design • Branding

Scope

The assignment was to develop a mobile application in Figma where users could shop for groceries and discover recipes using the same app. The app should also include a feature where users can easily purchase the ingredients of each recipe.

The project's goal was to create a comprehensive and user-friendly home cooking experience. The app would allow users to save time and energy by combining grocery shopping and exploring recipes.

01. Research & Planning

The project began by analyzing existing apps to gather inspiration and understand best practices. The analysis included apps in various industries to gain a broader understanding of customers' shopping preferences and behavioral patterns, not only when shopping for groceries.

02. Wireframes

After completing the research, a stakeholder handed me basic gray-scale wireframes for further design. These wireframes were the foundation for later developing high-fidelity prototypes.

03. Creating the design system

When choosing the colors I knew I wanted warmed toned colors to give the app a warm and playful feeling but at the same time a clean color palette. This led me to a beige background with a warm purple and green as buttons and accessory texts.

It was important to me when choosing the typefaces that they were easy to read while also further develop the warm and inviting feeling of the app.

These choices allowed me to establish a contemporary, accessible and user-friendly design.

Primary text

#000000

Colors
Modern, classic & clean

Secondary text

#7E7E7E

Primary background

#FAF3EB

Secondary background

#FFFFFF

Accent color

#7C6C77

Accent color

#ACAD94

Typography
Modern, readable & clean

04. Hi-fi prototypes

Based on the research, the wireframes and the branding, I created detailed and clickable prototypes in Figma. See some of the frames below.

User flow

Here, you can see how a user can easily browse recipes and groceries, add them to their cart and then proceed to checkout and purchase the items.

Some design highligts

Here I gathered some parts of the prototype to further describe some design choices.

Recipe page
This page is designed so you can view your chosen recipe, see the ingredients and instructions, and also easily add the recipes ingredients to the users cart.

Design choices:
• Visual hierarki to create structure
• Separate different parts by colors
• Fixed CTA-button together with price for clarity and

Card
This is a card to view a recipe on the start page

Design choices:
• Visual hierarki to create structure
• Use white space to separate information
• A big picture to show
• Integrated CTA-button

Lessons learned

This project has helped me grow as a UX/UI designer, here is three resons why.

  • Tools & technique
    Hands-on experience with design tools like Figma and the techniques needed to create professional looking UI designs.

  • Independent work
    Create and execute a whole ux process by myself while keeping a tight timeframe. This helped me further develop valuable skills as time management & planning, the importance of a good plan (& schedule) and how important it is to be flexible for unexpected obstacles. 

  • Design system
    How to create branding with typography, colors and spacing scales from scratch combining the needs of the users and the company.

In retrospect

Unfortunately, this project had a very tight timeframe so there was no time for user involvement in the research or to test the prototype. If users had been involved, I am certain the end product would have been better, as it would have been more closely aligned with the users needs. This experience has gained my understanding about the importance of user involvement in the process.