Inspiration

Reading this magazine made me aware of people who wanted to have a more sustainable food culture. It explains how people in ancient times maintained a deep connection with the soil by passing heirloom seeds from generation to generation. I decided to take this as a starting point for this project.

Designing the Logo

I began by designing the logo with the idea of simplicity in mind. Initially, I drew some realistic grains and then researched different styles that would be appropriate for the logo.

Brand Guidelines

Guiding Principles

A set of values were chosen based on my original hypothesis and readings.

Logo Usage

I reflected on how the logo should be used appropriately, created a secondary logo, and found a solution for a darker background.

Colour Palette

A selection of colours was picked to express a sense of freshness, naturalness, and traditionalism.

Typography

Two font types were selected: Glass Antica for its traditional feel and Poppins for its modernity and readability. Glass Antica would be used for titles and the logo. In contrast, Poppins would be used for the copy.

Imagery

An emphasis was made on showing beautiful images based on the assumption that city dwellers tend to appreciate aesthetics more. These images should match the brand values and represent a diverse range of individuals.

Voice

The brand's voice was chosen to align with the hypothetical preferences of the target audience.

User Stories

Four user stories were selected from the provided brief for this project. These stories were chosen to allow me to show my skills for different screens.

User Flow

Then, I create a user flow for each story to view the user's journey to achieve each goal.

Low-Fidelity Wireframes

Three user stories were chosen from the given brief for this project. I opted to utilize Balsamiq to familiarize myself with the tool. View all screens.

Competitor Analysis

I choose to analyse 2 competitors: Rare Seeds and Magic Garden Seeds. Inspiration pieces were taken, such as:

Rare Seeds

• Imagery

• Comment section

• Description voice

Magic Garden Seeds

• Font used for logo

• Categories (changed since their last update)

Mid-Fidelity Wireframes

Low-fidelity wireframes were imported from Balsamiq to Figma and mid-fidelity wireframes were created with the inspirational elements gathered during my analysis. This stage helped me define the functionality of the interface before testing the flows.

User Testing

I conducted usability testing with fellow UI designers to assess the seamlessness of the flow on mobile. A scenario and 4 tasks were given:

Task 1: You are a new user and would like to see the reviews of an article.

Task 2: You are a returning user who wants to see your previous orders.

Task 3: You are a returning user who wants to see your previous orders.

Task 4: You are a returning user who wants to see your previous orders.

Results

Final Design

"I want to access the inventory without having to register"

I decided to nest the different categories in the hamburger menu to deepen my knowledge of components in Figma and because it is a pattern commonly found in e-commerce websites. I've also included icons next to each category to add some personality.

"I want to have access to advanced filtering options"

I designed the filters with clear visual cues on a bottom sheet for quick user selection.

"I want to see what other customers have said about products and how they have rated them"

A detailed review section can be accessed by tapping the rating star below the item's title or by scrolling to the bottom of the page.

"I want to see an overview of my previous activity"

I chose to nest the previous activity in the account icon, where it is commonly found. I opted not to create the log-in screens due to time constraints for this project.

Desktop Version

Final Colour Palette

After some reflection, I decided to adjust my colour palette to avoid competing with the colours in the images. I kept a dark green for branding and primary buttons, used accent colours to highlight important elements, and incorporated greys for filters, some titles, and divisions.