Ideation
Ideation
Using my discovery resources, and feedback from testing lower fidelity designs, I begin to imagine the new search experience and apply UI styles.
Using my discovery resources, and feedback from testing lower fidelity designs, I begin to imagine the new search experience and apply UI styles.
QA Testing
QA Testing
In our testing environments, I inspect the builds code to ensure we are matching figma annotations 1to1. This is also where we ensure functionality is correct.
In our testing environments, I inspect the builds code to ensure we are matching figma annotations 1to1. This is also where we ensure functionality is correct.
Discovery
Discovery
This stage encompassed compiling existing research, launching new studies, and connecting with Data Science Teams.
This stage encompassed compiling existing research, launching new studies, and connecting with Data Science Teams.
Hand off
Hand off
Once the feedback validated my designs, I began to double check design system variables and other style guidelines. At this stage I also began to create detailed annotations for UI and A11y details and behaviors.
Once the feedback validated my designs, I began to double check design system variables and other style guidelines. At this stage I also began to create detailed annotations for UI and A11y details and behaviors.
TOTAL USERS YOY
+31%
Yoy Search Utilization increase
+645%
Boost to Health Services Traffic over 3 months
Role
UI/UX Designer
Responsibilities:
Agile:
Feature writing
Story writing
Story sizing
Slotting
Advocacy:
Representing users in strategy conversations
Pushing for human friendly solutions
Bridging the gap between business needs and user needs
Design:
Annotated mock ups
Reflow behavior, accessible Labels, tab order, variables etc.
Stakeholder presentations
Alignment to roadmap and other in flight work
Building prototypes for User Testing
Area of focus
Search Experience
Platform
Responsive Web
Client
CVS Health
Role
UI/UX Designer
Responsibilities:
Agile:
Feature writing
Story writing
Story sizing
Slotting
Advocacy:
Representing users in strategy conversations
Pushing for human friendly solutions
Bridging the gap between business needs and user needs
Design:
Annotated mock ups
Reflow behavior, accessible Labels, tab order, variables etc.
Stakeholder presentations
Alignment to roadmap and other in flight work
Building prototypes for User Testing
Role
UI/UX Designer
Responsibilities:
Agile:
Feature writing
Story writing
Story sizing
Slotting
Advocacy:
Representing users in strategy conversations
Pushing for human friendly solutions
Bridging the gap between business needs and user needs
Design:
Annotated mock ups
Reflow behavior, accessible Labels, tab order, variables etc.
Stakeholder presentations
Alignment to roadmap and other in flight work
Building prototypes for User Testing
Role
UI/UX Designer
Responsibilities:
Agile:
Feature writing
Story writing
Story sizing
Slotting
Advocacy:
Representing users in strategy conversations
Pushing for human friendly solutions
Bridging the gap between business needs and user needs
Design:
Annotated mock ups
Reflow behavior, accessible Labels, tab order, variables etc.
Stakeholder presentations
Alignment to roadmap and other in flight work
Building prototypes for User Testing
Client
CVS Health
Responsibilities:
Embedded teams:
On site search
Super app (responsive web)
Teams collaborated with:
Retail, Pharmacy, MinuteClinic, Drug Info and Photo Product Teams
Brand and Marketing Team
Digital Enterprise User Research Team
Other Team Members:
A11y Design Representative
Product Manager
Front End Developer
Content Strategist
Client
CVS Health
Responsibilities:
Embedded teams:
On site search
Super app (responsive web)
Teams collaborated with:
Retail, Pharmacy, MinuteClinic, Drug Info and Photo Product Teams
Brand and Marketing Team
Digital Enterprise User Research Team
Other Team Members:
A11y Design Representative
Product Manager
Front End Developer
Content Strategist
Client
CVS Health
Responsibilities:
Embedded teams:
On site search
Super app (responsive web)
Teams collaborated with:
Retail, Pharmacy, MinuteClinic, Drug Info and Photo Product Teams
Brand and Marketing Team
Digital Enterprise User Research Team
Other Team Members:
A11y Design Representative
Product Manager
Front End Developer
Content Strategist
Area of focus
Search Experience
Details:
Search Typeahead Phase:
The “Typing”Phase
Previously, only retail items existed in this phase
Search suggestion and results previously used 3rd party platform
Larger search problems:
3rd party platform is expensive, limited in ability, and scoped currently to retail products
Most users not aware of site offerings outside of retail products
Each Line of Business (LOB) I wanted to include had its own data sources different providers in some cases
Other supported areas:
Initial Search State
Search Results
Search Widgets on iOS and Android
iOS Voice Search
Area of focus
Search Experience
Details:
Search Typeahead Phase:
The “Typing”Phase
Previously, only retail items existed in this phase
Search suggestion and results previously used 3rd party platform
Larger search problems:
3rd party platform is expensive, limited in ability, and scoped currently to retail products
Most users not aware of site offerings outside of retail products
Each Line of Business (LOB) I wanted to include had its own data sources different providers in some cases
Other supported areas:
Initial Search State
Search Results
Search Widgets on iOS and Android
iOS Voice Search
Area of focus
Search Experience
Details:
Search Typeahead Phase:
The “Typing”Phase
Previously, only retail items existed in this phase
Search suggestion and results previously used 3rd party platform
Larger search problems:
3rd party platform is expensive, limited in ability, and scoped currently to retail products
Most users not aware of site offerings outside of retail products
Each Line of Business (LOB) I wanted to include had its own data sources different providers in some cases
Other supported areas:
Initial Search State
Search Results
Search Widgets on iOS and Android
iOS Voice Search
Platform
Responsive Web
Details:
Breakpoints:
Aligned the pages breakpoints to enterprise breakpoints, fixing tech debt
Added landscape orientation specs for tablet experiences
In-house search platform:
Collaborated with back end partners to ensure the data structure aligned with my envisioned search experience
Most users not aware of site offerings outside of retail products
Had to do some concept testing and site mapping on other 3rd party platforms, like the CVS Photo search
Parity with Android & iOS
We needed to balance parity with native and web platform best practices
We mapped the native and web experiences against each other
Created aligned experiences that used native components to map similar experiences that would feel familiar to native users
Platform
Responsive Web
Details:
Breakpoints:
Aligned the pages breakpoints to enterprise breakpoints, fixing tech debt
Added landscape orientation specs for tablet experiences
In-house search platform:
Collaborated with back end partners to ensure the data structure aligned with my envisioned search experience
Most users not aware of site offerings outside of retail products
Had to do some concept testing and site mapping on other 3rd party platforms, like the CVS Photo search
Parity with Android & iOS
We needed to balance parity with native and web platform best practices
We mapped the native and web experiences against each other
Created aligned experiences that used native components to map similar experiences that would feel familiar to native users
Platform
Responsive Web
Details:
Breakpoints:
Aligned the pages breakpoints to enterprise breakpoints, fixing tech debt
Added landscape orientation specs for tablet experiences
In-house search platform:
Collaborated with back end partners to ensure the data structure aligned with my envisioned search experience
Most users not aware of site offerings outside of retail products
Had to do some concept testing and site mapping on other 3rd party platforms, like the CVS Photo search
Parity with Android & iOS
We needed to balance parity with native and web platform best practices
We mapped the native and web experiences against each other
Created aligned experiences that used native components to map similar experiences that would feel familiar to native users
CVS customers can only search for retail products. The site currently offers far more than that. How do we connect users to more services and resources via search?
Goals
Validate that grouped lists distinguish search suggestions by business line
Test content strategy to ensure users understand interactions with non-product suggestions
Observe cognitive load
Risks
Users have been conditioned to expect products in search by default
Competitors and similar sites focus almost exclusively on product search
Search is task-focused, so changes must be iterative and intuitive
RESULTS
Users aware of other offerings appreciated their inclusion
Boosted awareness of health services and resources
Majority (>75%) of users were able to complete search with no errors
Iterations based on feedback
Iterations based on feedback
Iterations based on feedback
Review changes with stakeholders
Review changes with stakeholders
Review changes with stakeholders
Finalize style and interaction behavior
Finalize style and interaction behavior
Finalize style and interaction behavior
Iterations based on feedback
Review Changes with Stakeholders
Finalize style and interaction behavior
Detailed annotations
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
But theres a better way...
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Quick and dirty
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
Work in progress
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Show me!
Quick and dirty
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
Work in progress
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Show me!
Detailed annotations
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
But theres a better way...
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Quick and dirty
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
Work in progress
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Show me!
Quick and dirty
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
Work in progress
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Show me!
Detailed annotations
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
But theres a better way...
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Quick and dirty
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
Work in progress
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Show me!
Quick and dirty
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
Work in progress
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Show me!
Detailed annotations
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
But theres a better way...
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Show me!
Quick and dirty
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
Work in progress
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
Show me!
Quick and dirty
Eliminate developer guess work
Ensure first build is as close to 1:1 with Figma Designs as possible
Opportunity for Design to double check styles, variables and patterns
Work in progress
Figma dev mode enables us to do deeper and clearer annotations- faster
Dev mode also allows quick and easy media exporting- including svg code
Our developers needed to be brought up to speed quickly- so I created a quick demo
