#designsystem
#web
#Webflow
#AdobeXd
PIH Health Website
PIH Health Website
PIH Health Website
PIH Health Website
PIH Health Website
PIH Health Website
Crafting an experience that is intuitive, beautiful, and engaging to help people succeed in their health journey.
Crafting an experience that is intuitive, beautiful, and engaging to help people succeed in their health journey.
Crafting an experience that is intuitive, beautiful, and engaging to help people succeed in their health journey.
Crafting an experience that is intuitive, beautiful, and engaging to help people succeed in their health journey.
Crafting an experience that is intuitive, beautiful, and engaging to help people succeed in their health journey.
Crafting an experience that is intuitive, beautiful, and engaging to help people succeed in their health journey.
2021
Timeline
Co-creator
Role
2021
Timeline
Co-creator
Role
Background
Background
Working on the main website for PIH Health was one of the most rewarding experiences as I was able to see this project from early iterations, sketches and designs to development and launch. I collaborated closely with the development team to define, develop, and deliver visual designs in a consumer-facing environment.
Working on the main website for PIH Health was one of the most rewarding experiences as I was able to see this project from early iterations, sketches and designs to development and launch. I collaborated closely with the development team to define, develop, and deliver visual designs in a consumer-facing environment.
Goals
Goals
1
Bringing a new dimension to the user experience.
By creating a smooth experience for the user when in need of quick health information and in case they need to find the closest Urgent Care location.
1
Bringing a new dimension to the user experience.
By creating a smooth experience for the user when in need of quick health information and in case they need to find the closest Urgent Care location.
1
Bringing a new dimension to the user experience.
By creating a smooth experience for the user when in need of quick health information and in case they need to find the closest Urgent Care location.
1
Bringing a new dimension to the user experience.
By creating a smooth experience for the user when in need of quick health information and in case they need to find the closest Urgent Care location.
1
Bringing a new dimension to the user experience.
By creating a smooth experience for the user when in need of quick health information and in case they need to find the closest Urgent Care location.
1
Bringing a new dimension to the user experience.
By creating a smooth experience for the user when in need of quick health information and in case they need to find the closest Urgent Care location.
2
Integrate better workflows.
Needed simpler workflows to encourage patients to effectively schedule appointments. Adding wait times, better location search engine and integration with Patient Portal.
2
Integrate better workflows.
Needed simpler workflows to encourage patients to effectively schedule appointments. Adding wait times, better location search engine and integration with Patient Portal.
2
Integrate better workflows.
Needed simpler workflows to encourage patients to effectively schedule appointments. Adding wait times, better location search engine and integration with Patient Portal.
2
Integrate better workflows.
Needed simpler workflows to encourage patients to effectively schedule appointments. Adding wait times, better location search engine and integration with Patient Portal.
2
Integrate better workflows.
Needed simpler workflows to encourage patients to effectively schedule appointments. Adding wait times, better location search engine and integration with Patient Portal.
2
Integrate better workflows.
Needed simpler workflows to encourage patients to effectively schedule appointments. Adding wait times, better location search engine and integration with Patient Portal.
3
Responsive design
Create organizational clarity with a clear visual hierarchy, familiar icons, and concise descriptions for easy identification of items when viewed in aportable device.
3
Responsive design
Create organizational clarity with a clear visual hierarchy, familiar icons, and concise descriptions for easy identification of items when viewed in aportable device.
3
Responsive design
Create organizational clarity with a clear visual hierarchy, familiar icons, and concise descriptions for easy identification of items when viewed in aportable device.
3
Responsive design
Create organizational clarity with a clear visual hierarchy, familiar icons, and concise descriptions for easy identification of items when viewed in aportable device.
3
Responsive design
Create organizational clarity with a clear visual hierarchy, familiar icons, and concise descriptions for easy identification of items when viewed in aportable device.
3
Responsive design
Create organizational clarity with a clear visual hierarchy, familiar icons, and concise descriptions for easy identification of items when viewed in aportable device.
Color and Typography
Color and Typography
The color palette is more calm and with less contrast than the previous website update that featured shades of blue. I decided to add a green and a darker blue to create more options for contrast along with a soft beige.
The font selection was Nunito Sans. The cleanliness and natural kerning gives a better experience for the reader.
The color palette is more calm and with less contrast than the previous website update that featured shades of blue. I decided to add a green and a darker blue to create more options for contrast along with a soft beige.
The font selection was Nunito Sans. The cleanliness and natural kerning gives a better experience for the reader.
Solutions
Solutions
1
Mobile first
The "mobile-first" approach was used in order to create a better sense of how the user experience the site on a mobile device.
1
Mobile first
The "mobile-first" approach was used in order to create a better sense of how the user experience the site on a mobile device.
1
Mobile first
The "mobile-first" approach was used in order to create a better sense of how the user experience the site on a mobile device.
1
Mobile first
The "mobile-first" approach was used in order to create a better sense of how the user experience the site on a mobile device.
1
Mobile first
The "mobile-first" approach was used in order to create a better sense of how the user experience the site on a mobile device.
1
Mobile first
The "mobile-first" approach was used in order to create a better sense of how the user experience the site on a mobile device.
2
Iconography
The use of icons, in the right places, helped tremendously with the visual communication, especifically when showcasing services offered.
2
Iconography
The use of icons, in the right places, helped tremendously with the visual communication, especifically when showcasing services offered.
2
Iconography
The use of icons, in the right places, helped tremendously with the visual communication, especifically when showcasing services offered.
2
Iconography
The use of icons, in the right places, helped tremendously with the visual communication, especifically when showcasing services offered.
2
Iconography
The use of icons, in the right places, helped tremendously with the visual communication, especifically when showcasing services offered.
2
Iconography
The use of icons, in the right places, helped tremendously with the visual communication, especifically when showcasing services offered.
Tools
Tools
Webflow
Adobe Photoshop
Adobe Illustrator
Adobe InDesign
Adobe Xd
Reflections
It was the second time for me working as the only visual designer in collaboration with an outsourced development team. I was able to have more space and flexibilities to explore design options and user interactions, but I also needed to mock up every single screen for development. Although it was a lot of work, I practiced designing user flows that are usually ignored when an external application is embedded, such as the Patient Portal. I've gained a holistic view of a mobile website in terms of end-to-end experience.
This was also a good experience when directly communicating with Engineers and PM. With PM, I spent quite amount of time discussing and reviewing both visual and interaction designs. I learned how to effectively convey my rationale and justify the design during the discussions back-and-forth, and I also realized that efficient and open internal communications would motivate the teammates and drive the entire project towards a better direction.
