Splink ✨

Social Network Mobile App For Grocery Group Buying

Prototype

Proposal

User Flow

Wireframes

Design System Doc

UI Kit Doc

Splink - is a mobile application that gives users the ability to participate in community-based grocery shopping events, strengthening relationships with neighbours while finding grocery deals. Users can connect to discover good community-focused shopping experiences, and take advantage of bulk item purchasing, as well discount opportunities. The receipt breakdown features allow users to easily split the shopping bill and access more grocery markets outside the digital space.

Overview

Project constraints

Develop a mobile native app that solves a real world problem with market and industry examples, and present a live demo

My role

Lead UI/UX Designer (Concept Ideas, Project Planning, User Research, User Flow, Wireframing, Prototyping, Usability Testing, Branding, Hi-fidelity Mockup, Design System, Marketing Assets)

Team size & Duration

• 1 Product Manager, 3 Designers, 4 Full-stack Developers

• 12-week project in Q4 2022 at Langara College

Project Management

Agile methodology - using Trello

Achievement

Third prize at Langara - WMDD student’s showcase event

Tools

Interactive Prototype

Prototype Video

Figma Working File

Background

“How might we help newcomers enjoy their lives in Canada?”

The project idea was inspired by the needs of our teammates as international students, newcomers to Canada. Struggling to address the challenges of saving on groceries and managing living expenses in Canada.

Obviously, The rising number of immigrants, international students, and newcomers to Canada have highlighted their struggles in managing living costs, daily expenses, money-saving efforts, and addressing issues like debts and bad credit history.

As international students and newcomers to Canada, we realized that most of us have encountered the same difficulties. Therefore, to address this issue, we came up with an idea to design a social network app that can helps neighbourhood members create and join community-based shopping experiences and enhance community connections. Saving a grocery budget and turning a weekly routine into an exciting experience!

@Phat

Hey guys, I wanted to buy grocery at some wholesale stores like Costco. Buying food from retail stores costs me a lot.

@Karen

Me too! But the membership is expensive for me. And they only sale bulk items, I’m afraid I can’t use all of them before the expiry date.

@Jie

You’re right Karen! I always face this issue. I usually go to Costco once a month to stock up on my fridge, but some of my food went bad. I think bulk purchases are cheap but we might increase food waste problems and affect the environment.

@Phat

Hmm... Jie! What do you think if we go with you to Costco, buy bulk items and share the portion together ? In this way, all of us can save budget and avoid the food waste problems.

@Jie

Brilliant! Why not?! Let’s setup a day and time, so we can go to Costco together by using my membership.

@Karen

Awesome! Count me in pleaseee!

Problems

To understand deeply the key problems we aimed to solve, we deep dive into comprehensive research. Our findings, primarily sourced from Statistics Canada, show the following realities:

Living budget

Newcomers and international students in Canada often struggle to manage living costs, daily expenses, money-saving strategies, debts and credits, which can significantly impact their financial stability and overall well-being.

Food & utilities challenges

The varying prices between retail and wholesale stores requires careful consideration to maximize savings, while avoiding the increase of food waste if buying in bulk exceeds consumption needs.

Community connection

Newcomers often encounter difficulty in lacking opportunities to stay connected with neighbours to facilitate social interactions and get help from others in the local community.

Approach

An effective user-centric approach from conceptualization to execution

User Research

Empathizing the thoughts, feelings and pain points from user aspects

To get into the problem and ensure that our design solutions address the identified issues effectively, we conducted a survey (quantitative data) and in-depth interviews (qualitative data) with 4 people from different backgrounds, including students, newcomers, young professionals and parents. The goals of our user research were:

Demographic information

Gather information: ages, occupation, location, preferences, etc

General perception

The varying prices between retail and wholesale stores requires careful consideration to maximize savings, while ensuring the increasing of food waste if buying in bulk exceeds consumption needs.

Identify pain points

To identify the challenges they might have encountered or could potentially face.

Identify needs/expectations

To understand their needs and find solutions, resources could help them to address their challenges.

Competitive research - Gain market insights, identify unique selling points

After conducting a thorough analysis of our direct competitors, we discovered a significant gap in the market: there are no budget and financial management platforms that integrate social event feature. While existing solutions primarily focus on bill splitting and expense tracking, they don’t offer comprehensive features to facilitate group shopping events. Therefore, we decided to develop a unique app that not only provides convenient shopping planning and financial calculations, but also create a community-driven platform that connects people within the same neighbourhood to establish friendly connections through group shopping events.

Define Problems

Synthesize and define the root of problems from research findings

To synthesize research findings, we used affinity diagram mapping to analyze and organize research data into meaningful categories, which helped us to identify common patterns, uncover user needs, pain points, shape design-making direction, design opportunities effectively.

General perceptions

Participants as international students, newcomers, young employees wanted to settle down their lives in Canada, but often faced financial challenges from utilities, transportation, housing and food that make their saving plans a struggle.

General behaviours

Regarding grocery shopping preference, participants commonly shared concerns about price, quantity, taxes, and brands. The primary concern revolves around the pricing of single versus bulk purchases, leading many to prefer buying in bulk, but worry about wholesale memberships and potential issues with overbuying.

Encountered difficulties

Participants faced common challenges with living expenses, including housing, utilities, transportation and groceries, which impact their financial saving plans. Especially, they express concern about the pricing of single and bulk items when shopping for groceries in Canada.

Identified needs/expectations

Balancing the pricing of single, bulk items and avoiding food waste are key expectations from participants. Additionally, they express a strong desire for more local community events, such as language and cultural exchanges, job fairs, and networking programs.

User Persona & User Journey Maps - A clear picture of target users/customers

Based on results from synthesizing research data, we continually created user personas to humanize our target users, empathize with their pain points, and expectations. Additionally, the user journey maps support us to gain a deep understanding of their thoughts, actions, feelings, obstacles throughout the setup scenarios. All of them assisted us in shaping user-center design to the forefront of design process, leading to more effective and successful products and business strategies.

Solutions

Creating a user-centric design direction and enjoyable mobile app with essential features

With a clear understanding of user pain points and expectations, we reassessed our initial assumptions, findings and ideas to inform the design direction and features of Splink. We defined our project scope with key features to help users create or join shopping groups, splitting the bill with receipt scanning, and tracking group balance afterward. It’s not only convenient and economical but also enhances community connections and turns a weekly routine into an exciting event.

Shopping Groups

Offer a unique shopping experience to your community by creating a shopping event, discussing details, managing groups and keeping track of your contacts and group activity history.

Receipt Scanner

Process and convert receipt details into payments and map them with a pre-planned shopping list for accurate outcomes and time savings.

Splitting the Bill

Split the bill easily and precisely in equal portions or based on the cost of items purchased by each group member
NOTE: All money trades would be done outside the platform.

Tracking Group Balance

View group balance at your convenience, keep track of payments made by each member and receive notifications so you would never miss a payment.

User Flow

View detailed flow in FigJam

A valuable UX deliverable that helps visualize user interactions and an easy-to-understand format, facilitating better team communication and collaboration

Keeping the user-centric approach during our design process, we began ideation section by creating a user flow based on our research findings and features. Our objective was to visualize the flow of a user’s journey, from creating/joining a shopping event to splitting the group bill and managing the group’s outstanding balance through the mobile app, showcasing the steps users will take to achieve a specific goal, and fostering a shared understanding between designers, project manager and developers to understand the overall structure and organization of the proposed design solutions.

Low-fidelity Wireframes

View 62 wireframes in Figma

An effective UX approach to conceptualize visual representation, focus on functionality and usability, gather feedback and iteration to save time and effort.

Moving on with creating low-fidelity wireframes, we took time to explore different layout options, precise information hierarchy, and content placement without getting caught up in visual details. We focused on essential components, enabling designers to concentrate on the functional aspects of the design, gathering feedback and suggestions on the core functionality and content structure. This approach helped us determine the most intuitive and efficient user interactions and user flow, subsequent design iterations, saving time and effort in the design process.

Design Iteration

Validating assumptions, achieving user-centred solutions, continuous improvements that meet the needs and expectations of the target audience.

Before moving on to UI creation, we created rapid prototyping and tested with actual participants, who are our classmates and relatives. During the testing sessions, we received many great feedback, thoughts and questions when participants interacted by joining events, creating events, splitting shopping bills and managing outstanding balance payments. From this, we could validate our design assumptions and hypotheses about user behaviour, preferences, find improvements to address usability issues, and optimize user flows, information hierarchy and user interactions.

Opportunity findings

Use API from superstores

To enhance the process of creating shopping list, we decided to use API from stores to show available items at the store, including item name, unit price, taxes.

Set a rule allowing users to leave the event

To leave the event, members have to confirm they paid their outstanding balance to the host/payer. Then host/payer will confirm their payment to allow them leave the event.

Enhance trust relationships with local community

The app concept is to enable users to participate in grocery shopping events within a specific distance radius (500m). Users must input their home addresses or enable location access on their devices to search for available events nearby. From this, the host event can able to know member's location before accepting joining requests.

In-app money transfer (Future feature)

To ensure payments from host/payer and members, an in-app money transfer feature will allow users attach their debit/credit cards to the app, allow host/payer send payment request to members.

High-fidelity UI Mockups

View all mockups in Figma

Authentication

There are 2 sign-up methods in the authentication section, which include manual sign-up or Google. The app used email verification to verify user accounts and passwords. After sign-up or log-in in successfully, the app would prompt the location and notification permission from the user’s mobile if they haven’t been given access. The location permission must be allowed to create events or search for nearby events within the user’s radius from 0m to 500m.

Group Shopping

The user can create a shopping event, providing details and a preliminary shopping list. Or check ongoing events in the neighbourhood and ask to join a group that meets users’ needs.

Event Management

On the group events screen, users can manage their created or joined events and check the outstanding group balance. The event owner: publish the event by setting up a date and time, store address and name, number of participants, shopping list, etc., control the composition of the groups, bill splitting, payment process, and send reminders to payers. The event members: send a request to the host, input the number of items to the shopping list, discuss event details, share photos in the group chat, and see the group balance (the total and by the member).

Splitting Bills, Group Balance Tracker

The easy and fast process of in-app receipt recognition as well as the flexibility to choose a payer and method of bill splitting: equally or by members improves the user shopping experience. When splitting the group bill, the event owner can use the camera to capture/upload shopping receipts in order to convert receipt details into payments by mapping them with a pre-planned shopping list. Tracking group balance allows tracking the shopping group balance presented transparently and accurately. Users will be notified about payment updates and send or receive reminders to avoid payment delays.

Group Discussion, Notification, Accounts

The chat function helps to clarify all the details before the event, exchanging messages and photos between group members. Notifications are used to convey information and updates, encourage users to engage with an app, and send reminders. An account allows to the management of users’ personal data, contacts, and settings.

Branding

View logo animation

Our logo is multi-symbolic and represents the following concepts: community, connection, location, and sharing. At first glance, it reminds us of a map location sign, but the bright circle inside can be interpreted not only as a meeting point but also as a close circle of people, unification, and rallying. Clear lines leading to the circle resemble a road, an intersection, which indicates movement and organized activity.

Typography

Fonts directly affect the user experience when navigating through an application. Therefore, readability, regardless of screen size, was a decisive factor in their selection. For the body text, we chose Work Sans, a sans-serif inspired by the early Grotesk with nine variants of weight. Cabinet Grotesque is a modern, uniquely crafted sans-serif font, that was used primarily for the header.

Colour Palette & Iconography

The medium slate blue colour represents creativity, playfulness, wealth and happiness. While the light sea green colour expresses freshness and young. The combination of these colours can easily attract human eyes on all digital platforms. The choice of iconography was dictated by the desire to create a light and unobtrusive design, in order to balance the complexity of the content. Outlined icons also work well with typography and content structure throughout the app

Design Systems & Components

View design system doc

Splink has a dynamic UI kit with all important states from normal to long-pressed or dangerous. It helps us adapt the design to all situations, maintain design consistency and enhance the workflow of designers and developers during development process.

Measuring Success Metric

Coming up with a solution doesn't help much if we don't know to measure its success. To do that, I ask myself: "How would we know the solution was successful?". As a product designer, the final step in our design process was defining and measuring KPIs that indicate the success of our solutions and the numbers which was considered a success.
‍
Due to the project timeline, we decided to measure task success rate, engagement rate, task completion time and issue report rate. were just able to test and measure success rate with 8 participants.

Task success rates

• Tested with 8 participants

• 68% of correctly completed tasks

User satisfaction

• 75% of participants were satisfied with the app

• 62,5% of participants liked the app's ideas

• 62,5% of participants said the app is easy to use

Task completion time

• Sign up/Log in and enable location access: 11s

• Use filter to find nearby event and join one: 14s

• Create a new event: 1 min 12s

• Create a group bill - split by member: 35s

• Check and update group balance: 18s

• Update password: 14s

Error rates

• 75% failed in adding items to shopping list and updating quantity number in creating event process

• 50% failed in splitting group bill by camera and updating item quantity of an item in the shopping bill

• 37.5% failed in finding and updating their outstanding balance

For further improvement once product is launched, I would suggest and discuss with the team, product managers and data analysts to measure more metrics that can indicate not only the success rate of design, but also in product and business aspects. They could be:

User retention

Measure the percentage of users who continue to use the product over time. This a strong indicator of a successful product and a satisfied user base.

Engagement rate

Measure user retention, time spent on the product, and the frequency of use. This indicates how well the product attracts and engages users.

Net Promoter Score (NPS)

Customer satisfaction and loyalty are measured through their willingness to recommend the product to others. This indicates a potential for organic growth, positive word-of-mouth, and brand advocacy.

Customer Satisfaction and Feedback

Continuously gather customer feedback through surveys, reviews, and support channels. Monitoring customer satisfaction metrics helps identify areas for improvement and guides iterative design enhancements.

What My Challenge

During the project development, we encountered main constraints, such as time, project scope, resources, technical and logic failures. However, team collaboration was amazing and was a factor that keep us to keep moving and completing the project successfully and timely.

Time contrainst

Despite having weekly deliverables and a tight timeline, we successfully managed the project while juggling other classes

Project scope and resources

Faced with a large initial scope and limited resources, we made the strategic decision to prioritize and cut 40% of our ideas to ensure a timely app development and launch.

Failures in user flow and wireframes

We encountered obstacles while creating user flows and wireframes, requiring us to work harder and more collaborative with our best to ensure timely delivery.

Technical constraint

Encountered technical challenges with the bill-splitting feature during the alpha and beta demo, we encouraged the team to keep moving on with project scope, timeline, and we were happy with the final outcomes.

What I Learned

This project was a great chance for me to learn more about teamwork, project goal, communication, leadership that enabled me to collaborate with diverse cultures and teammates and allowed me to align with Canadian working culture effectively and efficiently.