Designing a platform to get medical test kits in the hands of patients
The Task: Mosaic needed to design a platform from the ground up to make it easy for medical practitioners to deploy kits to patients to measure blood, amino acids and other diagnostic tests to measure environmental health factors within a doctor’s practice.
Demographics: We focused on multiple audiences: existing practitioners with their patients that the company had relationships with and new practitioners and patients.
Role: Senior Product Designer & Product Management
Skills Leveraged: Early Product Scoping, UX/UI Design, Interaction Design, Motion Design, Features Documentation, Developer Handoffs, eLearning, Stakeholder Presentations
Deliverables: Practitioner portal, patient portal, web app software design, public website UX/UI design, usability training.
RESEARCH
Our primary research method is conducting user interviews to gain insights from patients and practitioners during the discovery process to measure our value risk if users would choose to use our MVP platform.
Later research in the iteration process involved interviewing our call center professionals to assess trends from user pain points who were not able to complete the onboarding process or kit orders.
THE PRACTITIONER PORTAL
Pain Point: In the previous web app, test kits were disjointed and hard to find. Interactivity with the cart and changing quantities was difficult. Practitioners were confusing kits and tests.
The Challenge: Our team was solving user experience pain points for a new web based software platform. While iterating on wireframes in order to meet our development deadline we needed to begin UI design and build a corporate design system for the platform while designing assets for the UI while the new brand was simultaneously being created by the marketing team.
VIDEO REVIEW:
HIGH-FIDELITY PROTOTYPE
I maintained and iterated Practitioner Portal, Patient Portal, and Marketing Website. These pixel perfect prototypes we used to test with Reference Customers to detail further UX insights. Additionally stakeholders from across verticals used these prototypes to align on.
Patient Portal User Flow
Test Catalog Wireframes
My Role: Wireframes to Mockups
Wireframes are used to quickly iterate on features from discovery research gathering. Post MVP wireframes, I focused on creating a robust and dynamic design system and interaction designs to bring the user interface to life.
From MVP to iterative sprints
After launch, upon further consulting with active users we discovered we needed to create value added messaging to help guide pracititioners through the kit ordering process. We added microcopy messaging to aid in this process.
THE DESIGN SYSTEM
Typographic style guide
Color Treatments
Buttons (Static / Hover / Press)
Practictioner Portal / Patient Portal Components
Public Website Components
Public Website Components Continued
PUBLIC MARKETING SITE
EDUCATION
Due to the stakes and sensitive nature of this transition with live and active customers it was important for Mosaic on ensure a smooth transition and onboarding.
The Challenge: We created a series of 12 training videos for staff, practitioners, and patients to learn how to order a test kit to sign up for an account. This was all happening while iterating on the second sprint after the MVP. I created animated Figma mockups to simulate experiences on the website.
VALIDATION
We implement a progressive onboarding approach with our core reference customers, where users are introduced to features gradually. Measure user engagement and and quantitatively assessed time on task to determining improvements for tasks such as adding multiple products to the cart at once. This process ensured a smooth progression of new features for our core audience.
On the marketing website we iterated the placement of buttons to commonly accessed items based on analysing patterns in heatmap engagement.
TAKEAWAYS
Why working on this project was fulfilling:
I was able to work with a great team building this software to serve the vital health communications of practitioners patients. l was able, iterate and improve to serve the needs of our users. I honed my Figma technical skills in creating a design system, and master the ability to make swappable, the interaction components to allow the system to be iterated over the next few years.
Additionally, I was able to work with a talented team of product designers and brand designers for the purpose of making health practitioners jobs easier and ultimately helping ill patients who are already having a difficult time, have a more effective experience with our software.
User Experience Design Portfolio
A healthcare software platform getting test kits to patients better
A review of a product design process for an engagement with Mosaic to streamline the portal experience for patients and practitioners.
Role: Senior Product Designer & Product Management
Skills Leveraged: Early Product Scoping, UX/UI Design, Interaction Design, Motion Design, Features Documentation, Developer Handoffs, eLearning, Stakeholder Presentations
Deliverables: Practitioner portal, patient portal, web app software design, public website UX/UI design, usability training.
Auditing a real estate data Saas product to improve ecommerce
A real estate data reseller had poor performance on mobile ecommerce experience. I performed an analytics audit, discovered user usability issues, performed redesign recommendations.
Role: Contract Product Designer
Skills Leveraged: UX Research, Product Design, High Fidelity Mockups, Stakeholder Presentations
Deliverables: Presentation, redesign proposal for mobile product, engineer handoff
A tool to help customers choose the right Airstream model to best suit their camping preferences
A case study from my journey through camper research, customer interviews, and leading the product design for a tool designed to make buying an Airstream easier.
Role: Independent Product Designer
Skills Leveraged: Research, Product Design, Project Lead
A gesture controlled experience where you fly like a pelican for a chance to win a trip to Florida
A case study carrying you through the creative journey of designing a game capturing human motion to propel the user like a bird through a third person journey from Chicago to Florida.
Role: Creative Director
Client: Monster Media
Skills Leveraged: Creative Direction, UI Design, Art Direction
A pop up shop bringing to life energy saving products
A case study that walks you through the planning, design and execution for the traveling mobile exhibit that packs in four rooms of a household into a carefully designed, 5x5 foot space.
Role: Visual Designer
Client: National Grid
Skills Leveraged: Creative Direction, UI Design, Illustration
Turning a stadium concessions contract proposal into an immersive interactive experience
I brought to life a business pitch and proposal with interactive elements, sounds, videos and immersive experience that helped my client tell their story in a memorable way.
Role: Digital Interface Designer
Client: Delaware North / Houston Astros
Skills Leveraged: Interaction Designer, Creative Direction, Front End Developer, Animation
A dynamic website design to showcase an experiential agency's digital capabilities
Working with Monster Media to reposition their digital, experiential and social media offerings to a diverse lineup of clients.
Role: Website Designer
Client: Monster Media
Skills Leveraged: Information Architecture, Persona and Audiences, Website Design, Interaction Design
Designing a web3 platform to enable user to access environmental conservation initiatives
Conserve Wildly is a mobile app platform designed to make it easy for allow citizens to vote on local conservation protection measures and proposals.
Role: Product Designer (startup spec)
Client: Startup
Skills Leveraged: Concept design, Product Design, Research, User Testing
Matching volunteer's talents with dog rescues that need their help
The Rescue Dogz app is the matchmaking platform connecting skilled volunteers with nearby dog rescues.
Role: Product Designer (startup spec)
Client: Self Launched Brand
Skills Leveraged: Founder, Concept design, Product Design, Research, User Testing
Optimizing the product experience to help drivers find and install the right wiper blades
I was leading a rebrand of the 90 year old automotive brand and undertaking the direction of the desktop and mobile website redesign to achieve business and partnership goals.
Role: Team Lead, Creative Director
Client: TRICO Wiper Blades (automotive parts)
Skills Leveraged: Website design, wireframing, information architecture, client presentations
Creating experiential buzz for a rebranded grocery chain in Florida
I interviewed customers in preparation for learning how to create an appropriate and immersive experience that celebrates Hispanic culture to promote the rebranding of Winn Dixie grocery stores to Fresco y Mas.
Role: Creative Director
Client: Fresco y Mas / Winn Dixie
Skills Leveraged: Environmental Design, Creative Direction, Social Media Design, Experience Design