Vorya

UX Research & Information Architecture

of an e-commerce website – VORYA

optimising information architecture of  VORYA 

Project Brief 

About Client

 

 

The Project Aim

  The aim of this project was 

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

one of the basic foundation of the design system is to defining how to arrange contents and elements into  flow in space and providing a structure propositions for it. For spacing and grid, multiples of 8 used to defines dimension.

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.