Digital
patient
experience
Visual Design | Design System | Healthcare
Creating comprehensive care models focused on patient engagement and improving care delivery through the expanding overall patient care.
Creating comprehensive care models focused on patient engagement and improving care delivery through the expanding overall patient care.
Team
Within Deloitte Digital Studio
Within Deloitte Digital Studio
Role
Visual Design Visual QA
Visual Design Visual QA
Impact
Working as a sole visual designer, working
closely with the client side design team, as an
extension of their team
Working as a sole visual designer, working
closely with the client side design team, as an
extension of their team
Tools
Sketch, Figma, Zeplin, Trello, Jira, Salesforce Lightning Design System (SLDS)
Sketch, Figma, Zeplin, Trello, Jira, Salesforce Lightning Design System (SLDS)
In the Atomic design approach small, separate components (like atoms) can be used to form larger components (molecules) To make smaller, more principal form of design like typography and color. These form the base for smaller components such as buttons, icons, etc. These smaller components were then used to make more elaborate component like cards, tables etc. Which were used to make templates for the website. These templates were ultimately used to make pages. It's simple and easy to understand. The content looks well defined, it's worth it.
A lot of work was done to design the content. Some say the more components you have, the cooler you are. 👀
A lot of work was done to design the content. Some say the more components you have, the cooler you are. 👀
Cards UI System
With Card-style interface, the content appears to be interesting and diversified.Yet texts are highly readable. Cards of different sizes allow prioritising of content. They make the composition more dynamic and rhythmical.
Navigation
One of the key steps in this project was to develop navigation structure anddefine sections in the eco system. After this we divided navigation chains into
two main categories.
Content
We paid great attention to the website content since the level of userengagement depends on the quality of its execution.
Sections
This makes use of the card. The key facts are bought to forefront. This alsoworks well for a large section with diversified and interesting materials.
20
Text stylesHeaders, Sub-headers, Body, Forms, Tables, Navigation, Links, Numbers
35
Color VariantsPrimary, Utility, Priority Badges, Pills, Toasts, Form Elements, Separators, Shadows
50+
IconsAvatars, button icons, initials, tooltips, and utility icons
450
ComponentsForm Fields & Text Inputs, Cards, Tables, Pills & Badges, Buttons, Icons, Navigation
To maintain the anonymity of client and users, I have omitted and modified confidential information and specifics in this case study. As a part of this project, I created the design pattern library for the white-label framework which includes reusable components, symbols, pattern and experience fragments to design the solution.
Reflection✨
As a part of this project, I created the design pattern library for the white-label framework which includes reusable components, symbols, patterns and experience fragments to design the solution.
📏 Designing scalable components: The design strategy for this project was "Mobile-first," which enabled me to build components with execution in mind. Beyond from making the design pixel perfect, it taught me how to make my designs user-friendly and scalable.
👑 Ownership: I was in charge of handling the designs of the many implementations on my own. This involved building screens based on our original journeys and templates, as well as incorporating revisions.
🤝🏽 Collaboration: The diverse team setup (India - USA) enabled me to understand how to plan work effectively (given the time difference), it was fascinating to learn how to design for such a huge project, create designs that can be tailored to a non-commerce solution, and how each individual was able to bring to the table a wider perception during the project and learn from one another.