UX Research & Information Architecture
of an e-commerce website – VORYA
optimising information architecture of VORYA
Project Brief
About Client
The Project Aim
Heuristic Evaluation & Competitive Analysis
User Research
Card sorting
Tree testing
The colour pallete divided by primary, secondary, gray, and notification colours. Choosing the right shade of colour is fundamental to the final product accessibility. All the chosen colours met WCAG 2.0 colour contrast of 3.0 (for large, heavier type) or 4.5 (for standard type). This guideline helps users with who have colour blindness (1 in 12 men, 1 in 200 women), or have low vision (1 in 30 people) to distinguish one colour from another. Some great tools such as Coloursafe and WebAIM’s Color Contrast Checker helped to test colour pallets accessibility.
Wire-framing & Prototyping
User Testing & Qualitative Insight
In Figma, styles for colours, grids, text, and effects like shadows and blurs were defined. For the other UI elements, a component was created which help to keep interfaces consistent and make collaboration between designers and developers much easier.
Defining and sorting colour palettes, typography, effect styles and components took some time at the beginning of the design system creation project. However, it assists developers to have access to code panel which providing helpful information about the designs they’re inspecting. Figma code panel has a feature that allow developers to switch viewing codes between CSS, iOS, and Android to have access to any added descriptions.
Outcome & future considerations
As the relationship between users and products evolves over time, design systems need to be constantly reassessed and improved accordingly. Building a design system is an ongoing project and it is a journey that never ends. As Kyle Peatt said “The effort required to build a design system is tiny compared to the effort required to maintain it.” This case study is just a fraction of the design system project as Pollen Design system development is not over yet.
This project gave me the opportunity to study and compare lots of other great examples of design systems to understand which layout works for this project.It also helped me to try different design system development platforms and find limitations and advantages of them.