Role
Product Designer
User Interface Designer
Client
Tools
Figma - high fidelity mockups, component based design tool that meshes well with React Native.
Whimsical - low to mid fidelity wireframes, Team oriented tool that makes getting feedback easy.
Overview
SeamlessMD is a health technology company that provides digital recovery care plans for patients. They provide patient engagement platforms for hospitals to keep track of how well their patients are recovering after surgery.
In the beginning of 2019, SeamlessMD is pushing towards it new mantra: Simplicity, Customer-centric and Accessible. A new look and feel is needed to update existing graphical assets.
Working with the engineering and marketing team, we have re-designed the current iOS platform to reflect the new direction the company is moving forward with.
Step 1: Design Audit
Existing assets were evaluated based on the following criteria:
Accessibility:
contrast ratio adheres to WCAG AAA standards
multilingual support
Consistency:
consistency across all design elements
Usability:
clear navigation and hierarchy of information
instructions are easy to follow
Scaleability:
design styles should be transferable to Android and Desktop platforms
design should have variations for edge case scenarios
Step 2: Design System
To accomplish the above criteria. We use a design system to specify the look and feel of user interface components across multiple platforms.
Lato is a sans serif typeface with many weights to choose from.
“The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness.”
We employ illustrations to add a human touch to our interfaces.
Illustrations also provide context to the copy
Next Steps
Work with engineering to build iOS prototype
Translate iOS design system to Android system
Web app re-design using same design components
Fully screen reader compatible
Resources
Illustrations: https://undraw.co/ Open source illustrations in .svg format
Icons: https://feathericons.com Open source icons for some common functions