top of page
Project overview

The inspiration for this project arose from the challenging circumstances that many small businesses encountered in 2020 due to the stringent COVID measures. Customer behaviours changed as a result of physical distancing, and local businesses had to establish remote connections with their customers in order to survive.


My Local is a community-driven and location-based platform that facilitates digital engagement with nearby local businesses remotely, all at the touch of a screen. With its built-in live chat and online booking system, My Local offers personalised online engagement that enables the community to reconnect.

Role

UXR, UX, UI

Empathise
Research

It is important to communicate with our users and stakeholders to understand the scope of this project before we dive into the redesign process. We conducted google surveys, 1:1 interviews and usability testing of the current website to identify key limitations and pain points. See research plan

Research goals

  • Understand how users engage with their local small businesses

  • Explore the benefits of digital engagement for small businesses

  • Examine direct and indirect competitors in the market

  • Identify customer goals, needs and pain points

Research methodologies

  • Primary Research (Survey & User Interview)

  • Secondary Research (Market Research & Competitive Analysis)

User interview

We collected a wide variety of responses from 28 survey participants, 5 interviewees and 1 business owner. Many of them expressed similar feedback and pain points, which aligned with our assumptions and goes to show how this project is solving real problems in our everyday lives.

Empathy map

An empathy map helps to synthesise and group the data into great patterns, this allows us to dive deeper into what users are saying, feeling, thinking and doing. By sorting the information into patterns, we were able to explore the key insights and needs.

Empathy map.png

Insights

Users prefer direct and personalised communication

Users like to explore and engage with their local businesses

Users would love to see higher digital adoption in small businesses

Needs

Users need to have real human interaction

Users need to feel a sense of connection in the community

Users need businesses to have better online presence

Market research

Small businesses play a significant role in the Australia, in order to learn more about the industry, we conducted a deep research that focuses on understanding the market at large.

Key statistics

  • Small business with 0-19 employees accounts for over 97% of all Australian businesses.

  • Small businesses have lower digital adoption, this includes web presence, social media presence and online order placement.

  • In 2020-21 there was a 3.8% increase in the number of small businesses, 15.8% entry rate and 12.0% exit rate.

Why local businesses?

  • Provide essential goods and services that contribute directly to the community, whether metropolitan or regional.

  • T​he ability to be flexible and adapt to customers' needs. Personalised experience driven by a level of care.

  • Brings activity, vibrancy and distinctive character to local commerce.  

Benefits of digital engagement

  • Saves time on manual tasks

  • Improved customer experience and service

  • Allows for easier and more effective communication

Competitive analysis

We looked into direct and indirect competitors in the Australian market who are trying to solve the same problem. This enabled us to see how other mobile app currently support small businesses to deliver digital adoption and uncover hidden opportunities.

competive analysis.png
Define
User personas

More often than not, successful UX projects entail multiple personas that can represent the needs of a larger group and make sure the product is covering for a wide spectrum of users. Therefore, we have curated two archetype users based on solid research findings to explore both the customer and business aspects of the product.

Persona 1.png
Persona 2.png
How might we

Point of view statements and How might we questions helped us to capture the right problems to solve and ideate appropriate solutions. These statements and questions are based on user insights and needs that we gathered from the empathy map.

HMW.png
Brainstorming

After defining the How Might We questions, we spent 10 minutes on each problems to quickly sketch out some design solutions. This activity helped our group to gather open and interesting ideas generated from different perspectives.

Brain storming.png
Product goals

We identified key product goals from evaluating business and user goals against each other and to come to a common ground where both can be fulfilled. This is an important step in the project as definition brings clarity and drive goal-oriented solutions.

Product goals.png
Feature prioritisation

A list of potential features were created and sorted into four categories with different priorities. We assessed each feature to find out where it would sit in the product goals and the amount of effort required to deliver the feature.

Ideate
Application map

Using a combination of hierarchical navigation and flat navigation, we developed the foundational layout of the app that encapsulated all the interfaces to be designed. We have also considered what a business account would look like from studying other competitor apps.

Application map2.png
Task flow

In this step, we referred to our user persona Laura to identify the key steps that it would take for users to achieve their goals. We created 3 task flows focusing on the key features of Your Local and expanded each in details.

Task 1: Laura is looking for a hair salon near her

Task 2: Laura needs to find out if the business is reliable

Task 3: Laura wants communicate with Kyle about her desired hairstyle

Task 4: Laura would like to make a booking for next week

Task flow 2.png
User flow

We established 3 scenarios that are in alignment with the task flow above. It is important to map out Laura's movement and the different paths she might take to complete the key tasks. We wanted to walk through the scenarios in the shoes of our persona.

User flow final.png
Design
Low fidelity sketches

We sketched out key frames and ideas into visual solutions, which focused on the representation of information and the choice of UI components. These sketches kicked off the prototyping process, gave us resolution and confidence to move on to the next step.

Low fi.png
Mid fidelity sketches

After figuring out the logical layout of each screen, we transferred our sketches into digital screens using Figma. We incorporated common design patterns for better visual consistency and hierarchy, the goal here is to create a clean and straight-forward experience for our users.

Mid-fi prototype4.png
Usability testing

In person testing was conducted amongst 5 participants to evaluate the usability of our mid-fidelity prototype. Each user was asked to communicated their thoughts aloud while interacting with the prototype and completing the tasks given to them. We tested around the key tasks outlined in the user flow.

Overview

Method: Face to face testing

Participants: 5

Age range: Millennials and Gen Z

Average time: 2.8 minutes

Affinity mapping

We colour-coded the observations from each participants in stick notes format to sight common patterns and pain points. This helped us to better analyse the data and thus improve the usability of the design to better accommodate user needs.

Affinity map.jpg
Affinity map-analysed.jpg

Patterns

5/5 user would like to see a filter option on the homepage

5/5 users think a star rating system is more effective and trustworthy

4/5 users say the booking screen needs to show business name

3/5 users want to make bookings from the chat screen

Insights

Users want to spend less time on identifying their ideal results

Users are used to the universal ranking system, it helps to guide decision-making

Users can get confused or become unsure of what they are booking for

Users experience slight frustration when going back to previous screen

Recommendations

Add filtering option to allow users search by preference

Introduce the star ranking system for user reviews

Utilise different font-weights to add layers to hero text

Display business name on all booking screens

Add a 'Book now' button to existing chat screen

Priority revisions

Based on the recommendations identified, we began to make revisions to our existing prototype. We focused on resolving key pain points discovered from our affinity map whilst also improving the overall UI of the design.

1. Add filtering option to allow users search by preference

homepage -mid fi.png

2. Introduce the star ranking system for user reviews

review - midfi.png

3. Display business name on all booking screens

booking mid fi.png
booking 2.png

4. Add a 'Book now' button to existing chat screen

chat- midfi.png
Branding

After making adjustments to some key screens in our design to improve usability, we shifted our focus to Your Local's brand identity and how we could visually communicate that to our audience. Given that Your Local is community-oriented app that targets at a wide range of users, we have defined brand attributes as follow.

  • Light-hearted

  • Friendly

  • Community

Logo design

We worked on creating a simple logo that would reflect the brand attributes highlighted above, we sketched out a bunch of quick and rough ideas that we had in mind then refined some of the successful ones. The shortlisted options were recreated and digitalised using illustrators.

Style tile

For Your Local's branding, we focused on creating a happy, approachable and reliable atmosphere. Therefore, we have picked bright yellow as the base colour, red as the highlight and neutral colours to tone down the overall design and maintain a level of simplicity.

Style tile.png
UI kit

Using the style tile as a guideline, we embedded Your Local's brand attributes into these UI elements. The following UI kit ensures that the design remains coherent across future developments and handovers.

UI Kit.png
Prototype
High fidelity prototype

Our high-fi prototype was finally produced after many iterations and group discussion. We worked on incorporating brand identity into the visual design and making sure every feature created play a part in meeting project objectives.

header image.png
Reflection

In this project, my group member and I challenged ourselves to think both critically and creatively to solve a real world problem. Throughout the design process, we were able to reflect upon our own personal experience and utilise this to our advantage to drive solutions. The biggest takeaway from this project is that successful designs deliver delightful UI without compromising the UX.

More projects
gradschool cover wix.png
Storydogs without shadow.png
bottom of page