Jason Crabtree


← Go Back

iOS App Design Concept: OpenMed Personal Medical Care Management

OpenMed iOS App Concept Home, Calendar and Treatment Screen

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

  1. Design and problem exploration
  2. User research
  3. Brand exploration
  4. Component design and layout
  5. Visual polish and composition

Project Lessons and Reflections

  1. 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!
  2. I didn't do enough user research for such a complicated product area. I did background and competitor research but further research is essential.
  3. 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

The messy handwritten design process I started with, spanning 7-pages of design process templates. 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, hear's the Process PDF.)

Brand Exploration

Brand research focusing on 70-80's colour palettes, with earthy blues, oranges, yellows and greens. 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

Massive background image of 16+ frames with the different base HIG components I used, adapted and employed. I started with components from the Apple Human Interface Guideline, then adapted based on brand colours, typography and spacing.

Halfway Work-in-Progress Shot

A work in progress shot containing the seven final screens. This progress shot shows a mix of bold colour blocks.

The Final Eight Screens

The final designed screens, highlighting the consistentcy from screen to screen. 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

Landing splash screen: Main call-to-action of Get Started. The splash screen represents a very basic entry to the app, with a CTA of 'Get Started'.

Home View

Home screen view; key elements show scheduled appointments, information centre search-bar and prescription refil centre. The main user navigation screen.

Ongoing Treatment Plans

Treatments view; key elements of search field and current and past prescriptions and treatments. Request and view new, past and present treatments.

Calendar, Upcoming and Past Appointments

Calendar view: Showing the month of June and a form to request new appointments, plus past appointments Appointments: View future, book new, and view past.

Search Centre

Search Centre view: Highlighting trending questions, Search Bar and recent searches An area to highlight trending medical questions and search vetted medical information sources.

Personal Records

Records view: Patient personal information, preferred medical practioners and different practices of GP, Physiotherapist and Dentist as some examples 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

Contact Screen showing emergency contact details for local 111 services, and contact info for registered medical practioners Emergency contact methods for the local area, and contact methods for the users medical practioners.

Notifications

Notification view highlighting recent messages, emails and calendar reminders, with each notification alongside a related icon 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 of all eight frames with the prototyping lines from Figma connecting each image 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.