top of page
Project Goal
Create a design system that streamlines the design process, ensures consistency across platforms and facilitates efficient collaboration.
Project Objectives
Develop new, comprehensive design guidelines for typography, color, icons and UI components, and create scalable and responsive design components
My Role
Design System
Responsive Design
UI/UX Design
Guidelines
Design Process
Define the Problem
Viu lacks a design system, so pages lack consistency and major inconsistencies are obvious
Define the User
We are making this for current and future designers as well as to foster understanding between developers, product managers and designers
Rapid Sketching and Iterations
Collaborate with the team, pass ideas around, sketch low fidelity wireframes for components, discuss more and iterate
High Fidelity Wireframes
Based off of our collaborating, create higher fidelity frames and prototypes using design principles
Present Deliverables
Present the product/project in its semi final form. Get feedback and opinions
More Iterations
Make more tweaks to improve the product, work with the team and involved parties
Research and Analysis
Research industry standards and how great design systems function to help define the structure
Key Components & Deliverables
Defined Design Guidelines
Clearly stated guidelines for foundations, including typography, color usage, spacing/margins, elevation, sizing and high two left usage
Universal Icon System
Consolidated icons, consistent and defined styles, and creation of custom icons to be used across all three platforms
Scalable & Responsive Components
Extensive library of scalable and responsive components that work on two of the three platforms, app and web, as well as templates for easy designs and rapid iterations
Challenges
This was a very challenging project as I really wanted to make sure the structure and guidelines were clear for current and future designers. The organization of such a large amount of information was difficult to comprehend, but looking at industry leaders, such as Material Design, Uber's Design system, ANT design and Atomic design, helped guide me.
Additionally, Viu is an established app and website, so creating the design system was working backwards, taking pages already created and investigating the colors, styles, fonts and current components to consolidate it and create a system. This was a great learning opportunity to understand Viu intimately. I took on this project as a junior designer and it rapidly helped me grow and expand my knowledge and skills.
Impact
By creating the first functional design system, Viu designers can now create iterations and new designs quicker than before. It creates consistency across all pages of the product where there weren't before. It allows others, such as product managers, engineers and stakeholders to understand and therefore collaborate better.
This creation followed the typical design process, conducting research to find the best structure and industry standard, brainstorming the structure, creating the design system, taking feedback and constantly adding, maintaining and improving the system.
bottom of page