FriendMapper
FriendMapper
Embedded Files
A social network app for friends to share & recommended places to visit.
A social network app for friends to share & recommended places to visit.
PROJECT TYPE
Mobile Application
TITLE
UX/UI Designer
DATE OF PROJECT
June 2023
TOOLS USED
Figma,
Adobe Creative Suite,
Miro
Overview
Overview
The objective of the project was to design a location-based app in which a user can highlight places where they have been. So that when someone else plans to be in the area they can get suggestions and reviews of different places.
Deliverables
Deliverables
At the end of the project I was tasked with creating a high fidelity prototype of the systems before creation of a case study for my personal records.
MY ROLE
MY ROLE
I undertook this project from conception to delivery. This was a project where I assumed the following roles:
User Experience (UX) Designer
User Interface (UI) Designer
Project Outputs
Project Outputs
Representative user interviews
Empathy mapping
Persona creations
Journey mapping
User flowcharts
Information architecture
Wire-frames
Low-fidelity prototypes
High-fidelity mock-ups and prototypes
Design system
Usability testing
Analysing test data
"Hi my name is Kate, I want to go some where new and different tonight"
"Hi my name is Kate, I want to go some where new and different tonight"
Insight 1
Insight 1
"I desire recommendations from all my friends on local places, allowing me to make informed choices about places to go"
Insight 2
Insight 2
"I want to be directed to where I have chosen to go out tonight"
Insight 3
Insight 3
"I would like to share with my friend Jo where I've been tonight and what I thought of it"
The app will empower Kate to discover and visit unfamiliar local destinations based on reviews from her friends. Additionally, she will have the capability to share her own discoveries within her circle of friends.
The app will empower Kate to discover and visit unfamiliar local destinations based on reviews from her friends. Additionally, she will have the capability to share her own discoveries within her circle of friends.
Kates User Flow
Kates User Flow
Wire Frames
Wire Frames
Low-Fidelity Prototype
Low-Fidelity Prototype
To help discover if I'm on the right track with Kates needs a low-fidelity prototype using Figma was constructed. Converting the digital wireframes into a quick working prototype, before taking it to usability testing stage. The low-fidelity model can be accessed through this link.
Usability Testing
Usability Testing
Insight 1
Insight 1
Kate found the lower navigation on the 'pins screen' confusing and cluttered, my insight is: The app needs a streamlined navigation system that consists of fewer buttons and minimizes the display of unnecessary information.
Insight 2
Insight 2
Kate raised that inputting the location of the venue might be difficult if she doesn't know its address, my insight is: There needs to be multiple ways to search for a venue to add a pin for it.
Insight 3
Insight 3
Kate wants her friends pins to be the main focus of the application, my insight is: The app needs to ensure that her friends pins are always front and center of the app, with an identifier on whos pins they are.
Insight 4
Insight 4
Kate found the the review screen hard to read due to everything looking the same size and shape, my insight is: The review pages need stronger page Hierarchy to help Kate read and understand the information on the screen.
High Fidelity Mock ups
High Fidelity Mock ups
Design System
Design System
High-Fidelity Prototype
High-Fidelity Prototype
High-fidelity prototype using Figma. Converting the digital Mockup designs and wireframes into a working prototype, to take forward to usability testing stage. The High-fidelity prototype can be accessed through this link.
Page updated
Google Sites
Report abuse