Hi, I’m Oliver.
UX DESIGNER BASED IN LONDON
From 2011 to 2022 I worked as a freelance musician. I was lucky enough to design scores, conduct orchestras, programme keyboards, create music videos and play piano for top theatre productions. Being a musician has always been a huge passion! So why focus on UX/UI design?
Behind the scenes, I’ve been passionately designing pixel-perfect websites and editing videos for numerous clients in the music industry. I’ve also designed a vast portfolio of innovative scores to help clients establish their brand. Music and product design share many things in common: testing, ideating, researching, empathising, iterating… but the most critical (and what I’m really interested in) is the user’s experience.
DOWNLOAD CV
Patient Update
MOBILE APP + RESPONSIVE WEBSITE • 3 WEEK DESIGN SPRINT • CONCEPTUAL PROJECT
MY ROLE
Product Designer — covering all aspects of the design process.
PROJECT GOAL
Design a mobile app that allows users to receive health updates about their friends and family, direct from the hospital.
Understanding The User
The project was inspired by personal experiences when my Dad underwent an emergency operation in 2022. Living 4 hours from the hospital, I felt very disconnected and relied on my Mum for any health updates. This put an added strain on Mum, who was already overwhelmed by Dad’s condition.
After doing some initial research, I noticed that most NHS nurses use a computer (on wheels) to record medical updates. So that got me thinking; what if I could harness that data and create an app which updated users directly. Additional researched revealed several pain points, which ignited the ideate process.
METHODS OF RESEARCH
★ Personas
★ User Stories
★ Story Boards
★ Journey Maps
★ Interviews
PAIN POINTS
★ Stress of updating family members
★ Not understanding medical terminology
★ Users being in different time zones
★ Doctors or nurses forgetting to update family members
PROBLEM STATEMENT
“Bill is a retired, older man, who needs an easier way to keep his family up-to-date on his wife’s health because he forgets important medical information and finds it stressful having to call each family member everyday.”
Competitive Audit
At the time of research, there were no direct competitors. I therefore studied various educational apps (which primarily focused towards nursery-age children), which gave parents instant updates about their child whilst at school (activities, behaviour, food, bowel movements, etc). None of these indirect competitors allowed users to connect with additional family members and also lacked “filter” and/or “sort” features.
GAPS IN THE MARKET
★ An app which gives users instant health updates
★ A feature which allows users to connect/add more family members
★ A filter/sort feature, to help users find information quickly
VIEW COMPETITIVE AUDIT
GOAL STATEMENT
“Create an app which allows users to receive instant health updates about family members, whilst in hospital. It will allow users to 1) add family members, and 2) include a sort/filter feature to help users pinpoint specific health updates. Effectiveness will be measured by users adding a new patient to the app, then filtering to find specific health updates.”
The Happy Path
MOBILE APP — USER FLOW
The user flow integrated several key aspects of the app. The challenge was getting the user to complete a number of important objectives, in the least amount of screens possible. My goal was to create a simple and effortless experience for the user. Accessibility was a high priority, ensuring that the app would benefit all users.
OBJECTIVES
★ Log in (optionally through social media)
★ Add a new patient
★ Filter the update feed
★ View/expand each health update
WEBSITE — INITIAL SITEMAP
Initial Wireframes
I created rough sketches for each screen of the app, prioritising the elements that would best address the user pain points. I used stars to highlight the best elements, ensuring that they made it to digital wireframes. Understanding the user’s needs was my highest priority.
PAPER WIREFRAMES
Low Fidelity Prototype
Whilst creating the first prototype, I realised that some additional changes were needed before any user testing. These included adding “back” buttons and icons to allow the user to navigate backwards through the user flow. I also made some minor tweaks to the font sizes and put more emphasis on the buttons (scale and hierarchy). I then added some motion between screens to create a sense of moving forward.
MOBILE APP
VIEW PROTOTYPE IN FIGMA
Usability Study
After designing the low fidelity prototype, I asked 5 participants to go through the main user flow: logging in, adding a patient to their account, filtering the feed and viewing a specific health update. Throughout these tasks, I assessed their experience which followed by a questionnaire. The feedback was then organised into patterns and insights, which gave direction for the next design iteration.
PATTERNS
★ 3/5 participants didn’t see the button to add a new patient
★ 3/5 participants didn’t see the filter function
★ 2/5 participants couldn’t navigate back to the home screen
★ 4/5 participants successfully located the update feed
★ 1/5 participants had trouble locating the social login options
INSIGHTS
★ Users need better cues to quickly identify the difference between a new and existing patient
★ Users need better cues about where the filter is located
★ Users need better cues to help locate the home button
★ Users need better cues about where the filter is located
★ Users need better cues to help locate the home button
MAXIMISING USER REACH
Because the app would be used by a huge variety of users, including those who may be undergoing stress and anxiety, one of the biggest challenges was creating a design which was calming, approachable and easy to navigate. To address these considerations I applied many of the Gestalt Principles when creating the mockups. These included: continuation, closure, proximity and similarity.
Mockups
Sticker Sheet
High Fidelity Prototypes
Once the app mockups were created and screens connected, I used interactions and animations to help drive the user’s attention in a forwards motion. Reflecting on the target user, simple and unobtrusive animations were implemented.
MOBILE APP
MOBILE APP — VIEW PROTOTYPE IN FIGMA
RESPONSIVE WEBSITE
DESKTOP — VIEW PROTOTYPE IN FIGMA
TABLET — VIEW PROTOTYPE IN FIGMA
MOBILE — VIEW PROTOTYPE IN FIGMA
Conclusion
It was a great experience working on this project, with various design challenges along the way. I was interested to see how my own personal experiences might influence the final result. Although there are advantages of being emotionally attached to the project, I was also aware that my biases had the potential to cloud my judgement. After putting the app in front of many users, the general response was very positive, not only about the concept, but also about the journey and user experience.
NEXT STEPS
Moving forward, I would like to include more accessibility features. This may include sound cues, which would help those who are visually impaired. There is also scope to create a dark theme and include a feature which allows the user to scale text. Additional suggestions include, 1) linking the app with social media accounts so that users can add quickly family and friends, 2) creating an app experience through desktop web browsers, 3) incorporating the app into the already existing NHS app.