Farmers Club App

UX & UI Design

Farmers Club App

UX & UI Design

Farmers Club App

UX & UI Design

Introduction

Introduction

Farmers is a renowned retailer that offers quality goods in New Zealand. The farmers Club is an exclusive membership program designed for its customers. The client seeks a digital solution that can elevate the Farmers Club experience, enabling them to achieve their business goals.

Objectives: The client expects a digital solution to drive sales through Farmers Club, and make the customers feel valued by being a Club member.

Farmers is a renowned retailer that offers quality goods in New Zealand. The farmers Club is an exclusive membership program designed for its customers. The client seeks a digital solution that can elevate the Farmers Club experience, enabling them to achieve their business goals.

Objectives: The client expects a digital solution to drive sales through Farmers Club, and make the customers feel valued by being a Club member.

Farmers is a renowned retailer that offers quality goods in New Zealand. The farmers Club is an exclusive membership program designed for its customers. The client seeks a digital solution that can elevate the Farmers Club experience, enabling them to achieve their business goals.

Objectives: The client expects a digital solution to drive sales through Farmers Club, and make the customers feel valued by being a Club member.

My Role

My Role

  1. Learned and analysed user and business data.

  2. Collaborated with the team to create UX deliverables and made problem statement to ideate and prioritise the possible solutions.

  3. Developed information architecture and wireframes to implement the design strategy and guide the visual design at next phase.

  4. Executed the visual design phase with creating a consistent and efficient design system to ensure consistency across all deliverables.

Design Process

Design Process

01 UNDERSTAND

During the understanding phase, our team conducted a workshop with the client to develop a deeper understanding of Farmers customers and their business objectives.

During the workshop, our team and the client together defined the top outcomes of a digital solution and challenges from Farmers stakeholders, discovered the target user group and made the problem statement, and at last we ideated the possible solutions with priority depending on their value and technical complexity.

Here is the user persona we built for the target user group:

01 UNDERSTAND

During the understanding phase, our team conducted a workshop with the client to develop a deeper understanding of Farmers customers and their business objectives.

During the workshop, our team and the client together defined the top outcomes of a digital solution and challenges from Farmers stakeholders, discovered the target user group and made the problem statement, and at last we ideated the possible solutions with priority depending on their value and technical complexity.

Here is the user persona we built for the target user group:

01 UNDERSTAND

During the understanding phase, our team conducted a workshop with the client to develop a deeper understanding of Farmers customers and their business objectives.

During the workshop, our team and the client together defined the top outcomes of a digital solution and challenges from Farmers stakeholders, discovered the target user group and made the problem statement, and at last we ideated the possible solutions with priority depending on their value and technical complexity.

Here is the user persona we built for the target user group:

IMG 01 - User Persona

IMG 01 - User Persona

IMG 01 - User Persona

We also created an empathy map for the Connected Families group to understand them deeply. Besides, it helped to share our insights with stakeholders and guide the next ideation phase.

IMG 02 - Empathy Map

IMG 02 - Empathy Map

IMG 02 - Empathy Map

Then we defined the problem statement for the target user group based on the results we got, to stimulate creative solutions for a better user experience. For example:

IMG 03 - Problem Statement Example

IMG 03 - Problem Statement Example

IMG 03 - Problem Statement Example

02 CONCEPTUALISE

Through problem statement phase, we selected the possible solutions and prioritised them to form a design strategy.

02 CONCEPTUALISE

Through problem statement phase, we selected the possible solutions and prioritised them to form a design strategy.

02 CONCEPTUALISE

Through problem statement phase, we selected the possible solutions and prioritised them to form a design strategy.

Digital Farmers Club card - scan at POS

View Farmers Club points balance

View Farmers Club points balance

View vouchers & expiry dates

View vouchers & expiry dates

Targeted promos & specials (based on purchase history)

Targeted promos & specials (based on purchase history)

Manage promotion targeting preferences

Manage promotion targeting preferences

Online ordering through the app

Online ordering through the app

Customer survey/feedback

Customer survey/feedback

In-app customer service

In-app customer service

Family sharing/loyalty pooling

Family sharing/loyalty pooling

Smart recommendations

Smart recommendations

Display store stock availability

Display store stock availability

Before going into design phase, we used journey maps to visualise our core user experience - noting various touch-points and potential emotional responses. These are the two user journeys for our persona persons:

IMG 04 - User Journey Map for Ngaire

IMG 04 - User Journey Map for Ngaire

IMG 04 - User Journey Map for Ngaire

IMG 05 - User Journey Map for Rob

IMG 05 - User Journey Map for Rob

IMG 05 - User Journey Map for Rob

03 DESIGN

Based on priority and how the solutions serve the user journey, I created an information architecture to confirm all the pages and features for the first version, to help me have a clear mind for the whole scale and still have ability to focus on the detail design in next step.

IMG 06 - Information Architecture

IMG 06 - Information Architecture

IMG 06 - Information Architecture

As Farmers has lots of physical stores, the Farmers Club app must adapt with the user experience in store. So, I created wireframes with flow for logging experience in app to make sure it could serve all kinds of scenarios.

IMG 07 - Wireframes 01 Log into Farmers Club App

IMG 07 - Wireframes 01 Log into Farmers Club App

IMG 07 - Wireframes 01 Log into Farmers Club App

And after logging into the app, the left screens with flow are:

IMG 08 - Wireframes 02 Club Information/Shop/Account

IMG 08 - Wireframes 02 Club Information/Shop/Account

IMG 08 - Wireframes 02 Club Information/Shop/Account

After all the details has been considered, I started to do the final interface design. To provide a seamless and consistent user experience across the existing Farmers website and the newly developed Club app, I ensured that the visual design of the app aligned with the Farmers branding, including the fonts, the colours and the graphic elements everywhere. Additionally, I built a clear and consistent design system to allow our font-end developers to build the UI more efficiently.

IMG 09 - Design System

IMG 09 - Design System

IMG 09 - Design System

During the final design, I asked myself several questions to help me focus on key aspects to see how interface could help user finish their tasks.

For "sign in and land to the club info" phase:

  1. What does the customers want, before and after landing into the app?

  2. What does the customers care most when they check their Club card?

  3. How to help user scan their Club card at store? What if phone wasn't online?

IMG 10 - Sign in, Land to Club Info, and No Connection

IMG 10 - Sign in, Land to Club Info, and No Connection

IMG 10 - Sign in, Land to Club Info, and No Connection

About shop, account and promotions preferences, the questions I asked myself:

  1. What are the proper entrance to take users to shop at the Famers website?

  2. How to deliver the basic promotions management in this version?

  3. What's the essential features for an e-commerce account?

IMG 11 - Shop, Account, and Promotions Preferences

IMG 11 - Shop, Account, and Promotions Preferences

IMG 11 - Shop, Account, and Promotions Preferences

After finishing all the primary screens, I crafted the left pages one by one.

IMG 12 - Other Screens

IMG 12 - Other Screens

IMG 12 - Other Screens

04 VALIDATE

After all the hard work, there were 2 highlights we got:

  1. The client expressed great satisfaction with the final delivery, and gave the final result a very good evaluation.

  2. Although this project wasn't launched immediately due to the projects coordination issue inside Farmers company, this is a good project to implement a solid UX design process and make a summary to learn and share.

05 NEXT

  1. Conduct user testing and update design work.

  2. Collect user data and feedback to guide the next version iteration.

  3. Finish the solutions with lower priority which were ideated in the previous conceptualisation phase.

Cheers! Let’s build something great together.

Cheers! Let’s build something great together.

Cheers! Let’s build something great together.