top of page
homepage(2).png

companion

Project Overview

The Product

COMPANION is a new website that is created to help people of different background to find friendships locally and globally. COMPANION is aimed to cater to different social classification such as introverts, extroverts and ambiverts. Besides, assistive technology has been incorporated to be more inclusive.

Project Duration

12 December 2022  to 15 February 2023

My Role

UX designer leading the COMPANION website design.

Responsibilities

Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, iterating on designs and responsive design.

The Problem

Creating and maintaining friendships is a large problem amongst many individuals. Factors can be due to complexity in personalities, ages or duration of friendship looked upon.

The Goal

Design a companion website that caters to all the issues faced, including accessibility for the disabled communities as well.

To find ways to mitigate the  problem, I have undertaken the steps below to first understand my user base.

User Research

I conducted user interviews, which I then turned into empathy map to better understand the target user and their needs. I discovered that many target users have had difficulties in creating and maintaining friendships.  This user group had indicated that social anxiety and ghosting experiences are key factors. Duration of friendships played a big part in maintaining a connection, some ghosted after a few meetups which directed me towards the pain point on duration. Besides, some individuals may have had social anxiety that acted as a barrier to have a social connection; and this information brought me that anxiety plays a part in user's pain point. Individuals often found it hard to mingle with people of different interests, which made familiarity of interests important; and that led me to the next pain point of users which was similar interests. This paint point had informed me that people can come with different personalities; introvert, extrovert or ambiverts which led me to the last pain point of personality. In addition, accessibility was a main concern as many websites had excluded the disabled community. This experiences had made COMPANION website to come to a conclusion to better aid friendship creation and also finding a solution to maintain them while factoring all the issues faced by these individuals.

Google UX Design Certificate - Empathy Map [Website for finding companions].png

Personas & Problem Statement

Persona - ALIYA

Next, using the empathy map created in previous session; I developed a set of persona to help me understand further the user group I would like focus on. Personas card gave identity and problem statement which provided me a clear description of the users' needs that should be addressed.

Problem Statement

 

Aliya was a lonely introvert who needed access to finding long-lasting social companions because she has social anxiety and has had difficulty in maintaining friendships.

Google UX Design Certificate - Persona [Website for finding companions].png

Aliya's journey map in her routine daily life is presented below which helped me reduce impact of implicit bias when ideating for the new product .

Google UX Design Certificate - User Journey Map [Website for finding companions].png

Competitive Audit

Then, I researched and identified several direct and indirect competitors present on the market. Competitive audit exercise helped me to solve usability problems and reveal gaps and opportunities present which were applied when ideating the COMPANION website.

COMPANION 2.PNG
COMPANION 3.PNG
COMPANION 1.PNG

Ideation

Later, I did a quick ideation exercise using crazy eight method to come up with ideas on how to address gaps identified in the competitive audit.

companion crazy 8_1(1).jpg

To start the design process, I made the decision to use the sequential structure for the website design which led users through step-by-step process. As the platform was designed for compatibility across devices, a graceful degradation design was used. Gestalt Principles were applied from conception to final stages of design.

Image by Ricardo Gomez Angel

1

Sitemap

_edited.jpg

2

Paper Wireframes

Graphic Designer

3

Digital Wireframes

Prototype Designer

4

Low-Fidelity Prototype

Study Group

5

Usability Studies

Sitemap

Need of similar interests and personality were major pain points for users, hence I used that knowledge to create a sitemap. 

My goal here was to offer various activity that catered to different personality groups which would improve overall website browsing experience regardless of age or disability. The structure I chose was designed to attract individuals from a wide demographic

 

Google UX Design Certificate - Sitemap - Website for finding companion.png

Paper Wireframes

Stars were used to mark the elements of each sketch that would be used in the initial digital wireframes.

companion ppr wireframe_1.jpg

As COMPANION users accessed the site on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive. 

Next, I sketched out paper wireframes for each screen in my websites, keeping the user pain points about similar interests, personality, duration as well as anxiety.

 

The home screen paper wireframe variations below focused on optimizing the browsing experience for users. 

companion ppr wireframe final.jpg

Refined paper wireframes

companion tablet and app ppr wireframe_1.jpg

Paper Wireframe screen size variations

Digital Wireframes

Main page was optimized for

fun and enticing way to reach deck

of users which highlighted easy

access at the top of the page

Digitized Wireframe - Tablet Variation

iPad Pro 11_ - 2.png

Moving from paper to digital wireframes in Figma made it easy to understand how the redesign could help address user pain points and improve the user experience of COMPANION website.

Strong visuals combined with a fun way to reach the deck of users at the end  was a key part of my strategy.

Accessibility option

available

Digitized Wireframe - Mobile Variation

iPhone 14 - 2.png

Digitized Wireframes

homepage(4).png

Low-Fidelity Prototype

To create a low-fidelity prototype, I connected all of the screens involved in the primary user flow of filtering users based on age, activity, location and term and finally matching users and scheduling a meet-up

 

Usability Studies

Once I was satisfied with the prototype, I conducted an unmoderated usability study to assess how easy it was for participants to navigate through the website. To ensure a seamless output from the study, I have prepared research questions that reduced implicit bias.

At this point, I had received feedback on my designs regarding font sizes and user flows

I made sure to listen to their feedback, and I had implemented several suggestions in places that addressed user pain points. 

Study Type

Unmoderated usability study

Location

Malaysia, remote

Participants

5 participants

Length

5-10 minutes

Parameters Set

Findings

about us.png

Font

Users wanted a larger font size

search - ok.png

User Flow

Users wanted an intuitive user flow

With the basic prototype in place, I started refining the design process. Using the insights gathered from usability study, I created mockups that reflected the brand identity by incorporating various aspects of the design system.

Mobile Mockup

1

Mockups

Mobile Phone

2

High-fidelity Prototype

Wheelchair Icon

3

Accessibility

Mockups

Typography(4).png

Font sizes were changed to be larger and screen sizes for websites were also changed

Based on the insights from the usability study, I made changes to improve the site’s user flow. An intuitive user flow allowed users to navigate the website seamlessly and have a more satisfying browsing experience

Website Mockups

homepage(3).png
list of matching profiles.png

Tablet Variation Mockup

tablet.png

Heading towards the final stages of the design process, I had to ideate on the visual branding of my design. To start, I looked at various typography options available, and finally set my eyes on Inter  that was simple and neat.

 

Next, I wanted a color grading that was basic. With that, Hex Code 1E1E1E  was chosen whereas Hex Code FFFFFF accompanied it to allow visual balance. A 60-30-10 rule were applied in the overall  colour palette, where Hex Code 1E1E1E  was the neutral color and Hex Code FFFFFF  as the second complimentary color whilst Hex Code 645D5D  was the third accent to allow emphasis and contrast.

Last but not least, I decided to incorporate delicate but strong symbols and images associated with the main theme of COMPANION. Action buttons that were presented in imagery forms was a recurring iconography  that can be seen throughout the mockups.

All the typography, iconography and color schemes were compiled together and presented in the design systems.

Colors(4).png
Icons(3).png

After usability studies

After usability studies

search - ok(1).png
location and date picker.png

Mobile Variation Mockup

mobile.png
search - ok.png
search - ok(1).png

Before usability studies

Before usability studies

about us.png
about us(1).png

I included considerations for additional screen sizes in my mockups based on my earlier wireframes. Because users find from a variety of devices, I felt it was important to optimize the browsing experience for a range of device sizes, such as mobile and tablet so users have the smoothest experience possible. 

High-Fidelity Prototype

Subsequently, the final stage of the design process involved including navigation and  interaction features. Based on the usability study, an easy to follow navigation as well as readable font sizes were the ideal setup for COMPANION website. Keeping that in mind, I  chose a Z-shape layout that would be best for users who came with different abilities; enabling users to skim information from left to right, then move diagonally to the left; before being able to scan to the right again.

Regular gestures and motions were used to create a simplistic aesthetic throughout the website.

Accessibility

Lastly, the final touches involved emphasis on positive inclusion of the product design for people with cognitive and physical disabilities.

 

During the ideation phase this product, I knew  that I wanted to incorporate a design that also included the disabled community. Keeping that in mind, I shifted my focus on users of assistive technology and visual disabilities; where the best approach could be used to incorporate them in my designs.

about us(1).png
assessibility.png
WEBAIM COMPANION.PNG

01

Headings with different sized text for clear visual hierarchy were implemented

02

Light or dark mode option included for users with vision issues and a text-to-speech option to use on assistive technologies like a screen reader

03

Site was designed with contrast checker using WebAIM to ensure users with visual disability can access the website seamlessly

The entire designing process had allowed me to focus my attention to details that were both visible to the naked eye as well as minor details that were normally been overlooked upon.

Paper bag

1

Takeaways

Pink Stairway

2

Next Steps

Takeaways

Impact

Target users shared that the design was unique and fun way to navigate till the end to set a meet up with a potential friend. Besides, users also provided a positive feedback on access to assistive technology.

What I Learnt

I learned that having multiple options and addressing users pain points had changed users’ standard view on reaching friendship expectations. The most important takeaway for me was to always focus on the real needs of the user when coming up with design ideas and solutions.

Conduct follow-up usability testing on the new website

Identify any additional areas of need and ideate on new features

Conduct more user research to determine new activity to be considered

bottom of page