๐Ÿ“ฑ

Anyone

Intro

Anyone is a mobile app where you can give or seek advise from anyone in the world through five-minute calls. The app is named as one of the top 20 products to look out for in 2021 in the United Kingdom.

โ€ฃ
Navigation
โ€ฃ

Role

User Research

Product Strategy

UX Design

UI Design

Prototyping

Usability Testing

Tools

Miro

Typeform

Figma

Maze

Timeline

5 weeks

๐Ÿ’ญ The Problem

The main problem that my partner, Parina and I identified from the Anyone app was that there was an overload of information making the user experience not personalized. Users may not feel comfortable reaching out to someone they do not know for advice which would deter them from using the app.

๐Ÿ‘ฉ๐Ÿผโ€๐Ÿ”ฌ Hypothesis

We believe showcasing filters based on different criterias would build a more personalized experience for advise seekers. Hence our business goal is to enable advise seekers to be able to filter and search for advisors based on what is relevant to them.

๐Ÿงช The Solution

The solution that we came up with is to create a filtration system where users are able to search for an advisor based on different criteria (country, industry, language, price). We believe that this would help to cater to the user's requirements better and would make users feel more comfortable in approaching advisors.

image
image

The Outcome

The outcome of the study is that most testers found the filter tool as it helps them narrow down their requirements. 86.6% of the testers were able to find an advisor specialised in product design. which met our goal of 80%. Whereas for the filtering process, 92.5% of the testers found the experience seamless which surpassed our initial goal of 60%.

๐Ÿ‘€ Questions & Observations

To help me better frame any problems with the product, I began by forming some questions and observations I have about the product. To easily document these I followed the structure [situation], [response], [problem to business or experience] to ensure I'm aware of users and business needs.

When selecting a specific topic, users are only able to view one advisor, which causes the user to feel that their options of advisors are limited
When viewing the dashboard, users are only able to search by popular topics, category & in the search bar, which causes the user to feel their experience is not personalized
When making a call, users are redirected to select a payment method before making a call, which causes the user to question on whether they want to continue with the call
image

๐Ÿ” UX Research

To confirm my observations and begin forming a hypothesis backed by data, I created a user survey to uncover the core problems with the product that I could prioritise for user and business needs.

โ€ฃ
Survey Questions
โ€ฃ
Survey on Typeform

๐Ÿ“Š Synthesis

Having shared my survey with users of the product, the next stage of my case study was focused on synthesizing the data to recognise trends and form a hypothesis. During the synthesis I segmented user responses and used and affinity map to prioritise the problems of users inline with business needs.

โ€ฃ
Survey Results
๐Ÿ”ถSurvey Responses
โ€ฃ
Affinity Map

Validated observation

Primary Frustration

When the user picks a specific topic, users are only able to see one advisor, which results in users feelings limited when choosing a topic.

Secondary Frustrations

When the user picks an advisor, users only have a brief background of the advisor, which results in the user being skeptical on whether they should approach the advisor as they are not familiar with them

๏ผŸHow Might We

With a picture of the problem at hand starting to come into place, we jumped into the ideation phase and worked through the solution design model, identifying users actual behaviour, and optimal behaviour. This allowed me to form a how might we statement to begin forming a solution.

How might we make users feel comfortable in approaching qualified/experienced advisors that they do not know?

๐Ÿ’ก Ideation

To avoid following the first idea I conducted a series of ideation techniques. This allowed me to consider an array of solutions. Following ideation I mapped what could be improved, added, and crazy ideas and prioritized them based on user value, business value, effort and time.

image
โ€ฃ
What can I improve?
โ€ฃ
What can I add?
โ€ฃ
Crazy Ideas!
image

โœ๏ธ Hypothesis

Having prioritized ideas based on what can be improved, added, or crazy ideas, I wrote a hypothesis that helps me frame the problem for user and business goals.

Hypothesis 1:

We believe showcasing the accreditation of each advisor will build more trust in advice seekers wanting to call them. Hence our business goal is to vet & filter through advisors that come onboard in order to provide more highly accredited advisors.

Hypothesis 2:

We believe showcasing filters based on different criterias would build a personalized experience for advise seekers. Hence our business goal is to enable advise seekers to be able to filter and search for advisors based on what is relevant to them.
image

โœ๏ธ Rapid Sketching

Following the creation of my hypothesis I rapidly sketched solutions in lo fidelity. This helped me quickly map and understand the current product and consider options for how I could iterate directly in the product.

image

โœ๐Ÿป Wireframes

I used a neutral color palette to avoid any decision bias and would use this prototype to get feedback internally. I used Autoflow in Figma to help me easily map the user flow between each page ahead of converting the pages into a prototype.

Wireframes v 1.0

๐Ÿ’ญ
In this first version of wireframes, I did mock-ups of drop down filters where users are able to scroll through a list of options.
image

Wireframes v 2.0

๐Ÿ’ก
There were some changes made to the filters in the second version. Instead of a drop down listing the options, the filter brings me to a new page where I can search/scroll through the list of available options.
image

๐Ÿ‘ฉ๐Ÿผโ€๐Ÿ’ป Lo Fidelity Prototype

Using Autoflow allowed me to quickly and easily convert the static pages into a clickable prototype with transitions and interactions. '

Lo Fidelity Prototype v1.0

Lo Fidelity Prototype v2.0

๐Ÿ’ก
In this prototype, I improved the filters where it can be swiped horizontally. Instead of the drop down options when I click on the filter, I am redirected to a new page instead where I can search/select an option

๐Ÿ‘ฉ๐Ÿผโ€๐ŸŽจ Styles & Components

The lo fi prototype helped me recognize frustrations with the experience that I improved at the hi fi stage. To create the high fidelity prototype I inspected the products style and followed the 8pt rule to effectively and easily create a prototype that was consistent with the product styling. Before creating the prototype I defined styles and components to easily and quickly help me design consistently.

๐ŸŽจ Styles

image
image
image
image

๐Ÿ†Ž Typography

image
image
image
image

๐Ÿงฑ Components

image

High Fidelity Prototype

Below is the final version of the prototype that I created. I included interactions and transitions from Figma to match the products flow.

High Fidelity Prototype v1.0

High Fidelity Prototype v2.0

๐Ÿ’ญ
In the second version of the hi-fidelity prototoype, I refined the following fixes: 1. Added in 'Search' button at the keyboard as it was missing previously 2. Changed colour of the 'Search' box to Anyone's accent colour as it would highlight to users on the next steps

Testing

With the hi fi prototype created I formed a testing script with scenario and tasks for the user to complete to validate the prototype with real users. To test the prototype I used Maze and gathered feedback following every task.

image
๐ŸงชUser Testing Script
โ€ฃ
Hypothesis ย 
โ€ฃ
Goals & Metrics
โ€ฃ
Tasks

Outcome

The outcome of the study is that most testers found the filter tool useful as it helps them narrow down their requirements. 86.6% of the testers were able to find an advisor specialised in product design which met our goal of 80%. Whereas for the filtering process, 92.5% of the testers found the experience seamless which surpassed our initial goal of 60%.

โ€ฃ
Results ๐Ÿ’ฏ
โ€ฃ
Improvements๐Ÿ“
โ€ฃ
Concluding Thoughts ๐Ÿ’ญ