UI Toolkit for
E-Commerce
A toolkit that will facilitate sales for businesses and individuals by providing the necessary components required and by being mindful of the necessary standards for the visually impaired, people with colorblindness, and people with learning disabilities relating to processing written words.
Daniel Ruiz
Sheryl Soenarijo
Danielle Peterson
Marc Antonio
Stephany Cabrera
UI Designer
Wireframe
Research
Photography
Adobe Illustrator
Adobe Photoshop
Sony A6000
Adobe XD
The Goal
Create a E-Commerce UI toolkit that values consistency and equality across all potential users. It will be designed with user-accessibility as the top priority.
This means it will be designed with consideration for all users, more specifically those who are colorblind (with a visual color deficiency), someone who has a visual impairment (example 20/70 vision), or dyslexics.
Color & Type Study
We have provided these colors as approved swatches to work within this UI toolkit. After doing the colorblindness test, all the contrasts of the following color pairings have a Y-tristimulus value greater than 40 against white type or a luminance color contrast ratio that is equal or greater than 4.5. BKGD LC stands for Background Luminance Color while LCCR stands for Luminance Color Contrast Ratio.
The text has been measured to calculate the distance at which a user, including the visually impaired, is able to read the information clearly. The type styles and point sizes listed below can be read at 18”-24” in distance by those with 20/70 vision.
Photo Manipulation
We recommend those who use our E-Commerce UI toolkit to color correct all images they use in consideration for the visually impaired.
The images below have been altered and tested in order to have a Y-tristimulus contrast that is greater than 40. These images are provided with the toolkit as examples on how to simplify the background, minimize the signifiers, and ensure the product is clearly visible for all potential users.
Try it for yourself!
The toolkit will cover the necessary components for posting products with a written and numbered description, contact sellers with specific questions, write reviews for products as well as other profiles of sellers. Users will be able to browse all products, or sort by category and filter by size; users will be able to see “trending” products, or search by proximity to a certain location.
Download our E-Commerce UI Kit
Click here to begin download.