Staying informed and up to date together!
PRODUCT
Responsive Website
ROLE
UX/UI • Logo
SCOPE
2 weeks
OVERVIEW
Bringing Good Health to Communities
I’m tasked with creating an app with a responsive website that allows users to quickly inform themselves, book and locate nearby facilities that administer the type of vaccine they need.
GOAL
Create a straight forward platform that allows all levels of digital literacy to navigate.
Engage users with info-heavy content.
Get users locations and vaccine bookings easily.
CHALLENGES
Ensuring that users don't get bored with info-heavy formats in order to get them the knowledge they need.
Recognizing digital literacy greatly differed between audiences.
MY ROLE
UX/UI Research and Visual Designer
Developed wireframes and
usable prototypes.
Facilitated usability testing and synthesized data for recommendations on iterations toward the final product.
EMPATHIZE
Who might need this?
To ensure this is an equitable product, I created personas that would potentially have issues with mobile app use without additional features that assist them. These users have hobbies and jobs surrounding group-settings and need accessible vaccine administering regularly.
Avril (she/her)
Age: 16
Occupation: Student
Visual impairment in her right eye.
Headstrong digital artist who loves to create and share illustrations off her tablet.
Partakes in Hawaiian club where she dances in a group for hours after school.
Jay (They/Them)
Age: 45
Occupation: Assisted Living Nurse
Has lupus (immune compromised)
Lives in low-income housing.
Exercises out in the open to avoid confined spaces.
Enjoys a healthy lifestyle.
DEFINE
Goal Statement
The vaccine app will let users to find information regarding the vaccine they want as well as locate and book appointments through the app. This will affect both non and immune compromised persons by helping the community be regularly vaccinated and informed. Communities as a whole will be healthier for longer and prevent mass spreading of viruses in group large group settings.
Key User Goals
Digital Literacy
The app will focus on making the process of retrieving information and booking simple for users despite their level of digital literacy.
Easy to use
Users won't have to guess what an icon does as they will be labeled in order for a straightforward user process and flow.
Quick and Informative
Vaccine information will be able to feel engaged with the information on their vaccine of choice without feeling overwhelmed.
IDEATE
Competitive Audit
In order to develop a design that works well for users, I did an audit on numerous companies that would be considered direct and indirect competitors of this product.
Takeaways
Equitable Design
Not just one service
COVID Only
Straight-forward websites that
focus on information or vaccine appointments.
Focuses on users that might have difficulty seeing (large fonts
and buttons.
Can be a bit cluttered with links or the spacing is off. Websites like CVS and Walgreens have many other services so their websites are cluttered with links that make the experience very overwhelming.
Not much info on other vaccines besides COVID-19 is offered. Since it is the most commonly needed vaccine now, a lot of other vaccine info isn't provided for users browsing the site.
PROTOTYPING
Creating the experience
After determining the successes and failures of competitors, I developed a userflow and wireframes that aligned with both my competitor takeaways and my
ultimate user goals.
Userflow
Paper Wireframes
Low-Fidelity (Mobile)
Low-Fidelity (Desktop)
Low-Fidelity Prototype
TESTING
Usability Testing
In order to get better insight on my current design, I interviewed 5 participants all varying in age and digital literacy. I focused on the takeaways from the competitive audit to see if I made similar mistakes or find potential pain points.
I conducted a moderated usability tests on the participants via Google Meets. They were each watched and asked to verbally react to their interactions.
Testing Insight
Clarity in hierarchy
Every page should have a purpose and reason while buttons should clearly stand out when an action is to be taken.
User Equity
More types of users need to be accounted for when choosing sizing and fonts of the design.
Boring
When presenting long forms of information, users want clear sections as to what they’re reading in order to remain engaged.
MATERIALIZE
Mockups, Stylesheet,
and Final Product
High-fidelity mobile mockup
High-fidelity desktop mockup
Stylesheet
Highfidelity Mobile Prototype
Highfidelity Desktop Prototype
Final Product
WRAPPING UP
Takeaways
Figma experimentation was the main point of doing this project. Not only do I feel passionate about creating solutions for healthier communities, I love learning new skills and this was an opportunity to create and learn new Figma skills throughout my process. Here are a few notable things I learned throughout this project:
Earlier testing phases before going straight into desgining mockups allows for easier pain-point discovery.
Sticky vs. Fixed components in Figma.
Importance of contrast when designing for equitable experiences.
Thank you for reading!
Staying informed and up to date together!
PRODUCT
Responsive Website
ROLE
UX/UI • Logo
SCOPE
2 weeks
OVERVIEW
Bringing Good Health to Communities
I’m tasked with creating an app with a responsive website that allows users to quickly inform themselves, book and locate nearby facilities that administer the type of vaccine they need.
MY ROLE
UX/UI Research and Visual Designer
Developed wireframes and
usable prototypes.
Facilitated usability testing and synthesized data for recommendations on iterations toward the final product.
GOAL
Create a straight forward platform that allows all levels of digital literacy to navigate.
Engage users with info-heavy content.
Get users locations and vaccine bookings easily.
CHALLENGES
Ensuring that users don't get bored with info-heavy formats in order to get them the knowledge they need.
Recognizing digital literacy greatly differed between audiences.
DEFINE
Problem Statement
The vaccine app will let users to find information regarding the vaccine they want as well as locate and book appointments through the app. This will affect both non and immune compromised persons by helping the community be regularly vaccinated and informed. Communities as a whole will be healthier for longer and prevent mass spreading of viruses in group large group settings.
Key User Goals
Digital Literacy
The app will focus on making the process of retrieving information and booking simple for users despite their level of digital literacy.
Easy to use
Users won't have to guess what an icon does as they will be labeled in order for a straightforward user process and flow.
Quick and Informative
Vaccine information will be able to feel engaged with the information on their vaccine of choice without feeling overwhelmed.
EMPATHIZE
Who might need this?
To ensure this is an equitable product, I created personas that would potentially have issues with mobile app use without additional features that assist them. These users have hobbies and jobs surrounding group-settings and need accessible vaccine administering regularly.
Avril (she/her)
Age: 16
Occupation: Student
Visual impairment in her right eye.
Headstrong digital artist who loves to create and share illustrations off her tablet.
Partakes in Hawaiian club where she dances in a group for hours after school.
Jay (They/Them)
Age: 45
Occupation: Assisted Living Nurse
Has lupus (immune compromised)
Lives in low-income housing.
Exercises out in the open to avoid confined spaces.
Enjoys a healthy lifestyle.
IDEATE
Competitive Audit
In order to develop a design that works well for users, I did an audit on numerous companies that would be considered direct and indirect competitors of this product.
Takeaways
Equitable Design
Straight-forward websites that
focus on information or vaccine appointments.
Focuses on users that might have difficulty seeing (large fonts
and buttons.
Not just one service
Can be a bit cluttered with links or the spacing is off. Websites like CVS and Walgreens have many other services so their websites are cluttered with links that make the experience very overwhelming.
COVID Only
Not much info on other vaccines besides COVID-19 is offered. Since it is the most commonly needed vaccine now, a lot of other vaccine info isn't provided for users browsing the site.
PROTOTYPING
Userflows & Wireframes
After determining the successes and failures of competitors, I developed a userflow and wireframes that aligned with both my competitor takeaways and my ultimate user goals.
Paper Wireframes
Low-Fidelity Mobile Wireframes
Low-Fidelity Desktop Wireframe
User Flows
Low-Fidelity Prototype
Mobile Prototype
TESTING
Usability Testing
In order to get better insight on my current design, I interviewed 5 participants all varying in age and digital literacy. I focused on the takeaways from the competitive audit to see if I made similar mistakes or find potential pain points.
I conducted a moderated usability tests on the participants via Google Meets. They were each watched and asked to verbally react to their interactions.
Testing Insight
Clarity in hierarchy
Every page should have a purpose and reason while buttons should clearly stand out when an action is to be taken.
User Equity
More types of users need to be accounted for when choosing sizing and fonts of the design.
Boring
When presenting long forms of information, users want clear sections as to what they’re reading in order to remain engaged.
MATERIALIZE
Mockups, Stylesheet,
and Final Product
High-fidelity mobile mockup
High-fidelity desktop mockup
Stylesheet
Final Product
WRAPPING UP
Takeaways
Each project is a learning experience whether its a new skill within Figma or a new element of user testing that could be incorporated into future projects. I found that this particular passion project helped me learn a bunch:
Earlier testing phases before going straight into desgining mockups allows for easier pain-point discovery.
Sticky vs. Fixed components in Figma.
Importance of contrast when designing for equitable experiences.
Thank you for reading!
MORE WORK
PRODUCT
Responsive Website
ROLE
UX/UI • Logo
SCOPE
2 weeks
OVERVIEW
GOAL
Create a straight forward platform that allows all levels of digital literacy to navigate.
Engage users with info-heavy content.
Get users locations and vaccine bookings easily.
CHALLENGES
Ensuring that users don't get bored with info-heavy formats in order to get them the knowledge they need.
Recognizing digital literacy greatly differed between audiences.
MY ROLE
UX/UI Research and Visual Designer
Developed wireframes and
usable prototypes.
Facilitated usability testing and synthesized data for recommendations on iterations toward the final product.
Bringing Good Health
to Communities
I’m tasked with creating an app with a responsive website that allows users to quickly inform themselves, book and locate nearby facilities that administer the type of vaccine they need.
EMPATHIZE
Who might need this?
To ensure this is an equitable product, I created personas that would potentially have issues with mobile app use without additional features that need to assist them.
Avril (she/her)
Age: 16
Occupation: Student
Visual impairment in her right eye.
Headstrong digital artist who loves to create and share illustrations off her tablet.
Partakes in Hawaiian club where she dances in a group for hours after school.
Jay (They/Them)
Age: 45
Occupation:
Assisted Living Nurse
Has lupus (immune compromised)
Lives in low-income housing.
Exercises out in the open to avoid confined spaces.
Enjoys a healthy lifestyle.
DEFINE
Problem Statement
The vaccine app will let users to find information regarding the vaccine they want as well as locate and book appointments through the app. This will affect both non and immune compromised persons by helping the community be regularly vaccinated and informed. Communities as a whole will be healthier for longer and prevent mass spreading of viruses in group large group settings.
Key User Goals
Digital Literacy
The app will focus on making the process of retrieving information and booking simple for users despite their level of digital literacy.
Easy to use
Users won't have to guess what an icon does as they will be labeled in order for a straightforward user process and flow.
Quick and Informative
Vaccine information will be able to feel engaged with the information on their vaccine of choice without feeling overwhelmed.
IDEATE
Competitive Audit
In order to develop a design that works well for users, I did an audit on numerous companies that would be considered direct and indirect competitors of this product.
Takeaways
Equitable Design
Straight-forward websites that
focus on information or vaccine appointments.
Focuses on users that might have difficulty seeing (large fonts and buttons.
Not just one service
Can be a bit cluttered with links or the spacing is off. Websites like CVS and Walgreens have many other services so their websites are cluttered with links that make the experience very overwhelming.
COVID Only
Not much info on other vaccines besides COVID-19 is offered. Since it is the most commonly needed vaccine now, a lot of other vaccine info isn't provided for users browsing the site.
PROTOTYPING
Userflows & Wireframes
After determining the successes and failures of competitors, I developed a userflow and wireframes that aligned with both my competitor takeaways and user goals.
Paper Wireframes
Low-Fidelity Wireframes
Low-Fidelity Web Wireframe
User Flows
Low-Fidelity Prototype
Figma Prototype
TESTING
Usability Testing
In order to get better insight on my current design, I interviewed 5 participants all varying in age and digital literacy. I focused on the takeaways from the competitive audit to see if I made similar mistakes or find potential pain points.
I conducted a moderated usability tests on the participants via Google Meets. They were each watched and asked to verbally react to their interactions.
Usability Analysis
Testing Insight
Clarity in hierarchy
Every page should have a purpose and reason while buttons should clearly stand out when an action is to be taken.
User Equity
More types of users need to be accounted for when choosing sizing and fonts of the design.
Boring
When presenting long forms of information, users want clear sections as to what they’re reading in order to remain engaged.
MATERIALIZE
Mockups, Stylesheet,
and Final Product
High-fidelity mobile mockup
High-fidelity Desktop mockup
Stylesheet
Final Product
WRAPPING UP
Takeaways
Each project is a learning experience whether its a new skill within Figma or a new element of user testing that could be incorporated into future projects. I found that this particular passion project helped me learn a bunch:
Earlier testing phases before going straight into desgining mockups allows for easier pain-point discovery.
Sticky vs. Fixed components in Figma.
Importance of contrast when designing for equitable experiences.
Thank you for reading!