Case Study Summary
Designing an approachable, patient-first ongoing medical care management app concept. The app focuses on ongoing treatments, managing appointments, tests and medical information management. After completing the design challenge, I submitted my design to prompts.io to receive feedback.
Challenge
Starting with the design prompt of “How might we reduce in-person visits to the doctor?”, design a mobile experience. Following the design challenge constraints, I designed an iOS app based on currently available technologies.
Outcome
This project was a great success. Highlights included getting more comfortable with the Apple Human Interface Guidelines, applying an end-end design process, and developing a unique visual language.
Design Process
- Design and problem exploration
- User research
- Brand exploration
- Component design and layout
- Visual polish and composition
Project Lessons and Reflections
- My initial design process helped uncover useful product insights. But, once I started designing in Figma I didn't refer back to those insights nearly enough!
- I didn't do enough user research for such a complicated product area. I did background and competitor research but further research is essential.
- The visual design and branding can be refined. Starting from the Apple HIG gave the app a solid foundation. More refinement is needed on the information-heavy screens, such as search-centre and records.
Final Prototype
Experiment with the final Figma prototype and click, tap and scroll to the different screens throughout the app.
Tip: the fullscreen button for the Figma prototype is in the top right!
Design Exploration and Initial Discovery
Design Process and Problem Exploration
I won't subject you to reading my messy handwriting, circular thought process and broad exploration. Suffice to say, the circled elements on the bottom right represent the key functions that need to be fulfiled. (If you really want the details, here's the Process PDF.)
Brand Exploration
I chose to focus brand exploration on colour palettes from the 70's and 80's due to the warm, cheerful tone.
Exploring Human Interface Guideline Components
I started with components from the Apple Human Interface Guideline, then adapted based on brand colours, typography and spacing.
Halfway Work-in-Progress Shot
This progress shot shows a mix of bold colour blocks.
The Final Eight Screens
The final screens have more consistentcy and a focused blue button finish. The app has five main screens, a splash screen, and two support screens.
Breaking down the Eight Screens
- Splash Screen
- Home
- Treatments
- Calendar
- Search Centre
- Records
- Contact
- Notifications
High Definition iPhone Mockups
Landing Splash Screen
The splash screen represents a very basic entry to the app, with a CTA of 'Get Started'.
Home View
The main user navigation screen.
Ongoing Treatment Plans
Request and view new, past and present treatments.
Calendar, Upcoming and Past Appointments
Appointments: View future, book new, and view past.
Search Centre
An area to highlight trending medical questions and search vetted medical information sources.
Personal Records
A single source for the user to store their personal information to share with medical practioners, and to store details of ongoing medical practioners.
Contact View
Emergency contact methods for the local area, and contact methods for the users medical practioners.
Notifications
A screen to display notifications for upcoming appointments, emails, prescription reminders and general medical care messages.
The Final Frames with Prototyping Connections
A final shot showing the prototype connections between each screen, tab bar and button.
Wrapping Up
Read next case study about designing a simple web app to help improve typography Character Counter Typography Web App Case Study.