About Product Y:
Product Y is a Shopify app that helps to educate consumers about the hair products on a merchant’s website. Shoppers can interact with Product Y directly on the merchant’s product page. After a quick conversation, they receive a match score which informs them of how well the merchant’s product(s) is predicted to perform on their hair. Also within the app, is an admin panel that Shopify merchants use to view app activity and manage Product Y on their site.
Essentially, Product Y provides the experience of the Product X mobile app on e-commerce platforms.
Background:
After designing the high-fidelity mockups for the Product Y consumer experience, I learned of accessibility guidelines, interaction design (IxD) best practices, and the California Consumer Protection Act (CCPA) that was going into effect January 2020.
Since our product would be available and used via the web and the company was based in Southern California (and would have users from California), we thought it’d be best to update all screens to meet accessibility and CCPA guidelines in addition to following IxD best practices. Not only would IxD best practices help our users to use our product more successfully; it’d also help create a system for developers to adhere to, resulting in more consistency throughout the app.
The Project Details
Timeline: ~6.5 months; (accessibility & CCPA update specifically: ~3 weeks)
Team: The Company X team consisted of a remote team of 4 people: myself, 1 in San Diego, CA, and 2 contracted developers (1 in Canada and 1 in Peru). I worked closest with the Founder/CEO
My Role: Director of UX (User Research, User Testing, UX, UI, IxD, Product Designer, Product Manager)
Tools Used: Sketch
Objective:
My goals:
Increase accessibility (via design)
Enforce consistent design through IxD principles
Adhere to CCPA guidelines
To achieve these goals, I took the following approach:
Accessibility
Check contrast of adjacent colors
Adjust line spacing
Increase body text size
Include form labels
Add color and other visual indicators
Use directional language in copy
Interaction design principles
Designate interaction color
Designate selected state design
CCPA guidelines
Provide access to privacy policy
Give users a choice before they provide their information
Design Updates:
Examples of the accessibility, IxD principles, and CCPA guideline updates that I implemented.
In addition to updating the designs, I also put together a document detailing updates that needed to be made to the company website and the privacy policy itself in order to be in compliance with the CCPA. Although the company would not be required to be compliant until meeting the criteria described in the CCPA, we thought it’d be better to prepare beforehand in order to be ready once that time came.
Lessons Learned:
It’s incredibly important to understand the concepts of accessibility and design in order to empower your users and to make your products as inclusive as possible for your audience.
Not knowing some of these concepts in the beginning required me to take up more time and spend more energy on the mockups after screens had already been designed, unexpectedly delaying our project and putting more strain on myself as the only designer.
Moving Forward:
While I do not see myself pursuing a UI or IxD role in the future, I am continuing to take steps (like subscribing to and reading UI/IxD articles) to learn and keep up with design trends outside of just purely UX design/research.