UI/UX Designer | Design Systems | Visual Design | Accessibility
April 2022 - January 2024
Scope
My responsibilities ranged from design system creation and maintenance, to creating inclusive, accessible and responsive designs. From simple sketches to high-fi wireframes and prototypes, I created designs ready for handoff to developers. Additionally, I conducted user research & user interviews, facilitate workshops and ensure all solutions were thought with accessibility and inclusivity standards in mind.
Design System
Viu's mobile application did not have an established design system. Each page lacked consistency throughout the application, and brand consistency with the other platforms. I created Viu's first, cohesive mobile design system. Creating easy to understand, usable guideline and components for current and future designers. In addition to the mobile design system, I helped to maintain the web design system.
Projects
Search Experience
General Focus: User research, flows, mapping, wireframes, prototypes
During Viu's big revamp, the design team saw an opportunity to improve the search experience. I led the redesign for the app, while assisting with the redesign for the website. An all around focus, I conducted primary and secondary research, user empathy and journey mapping, wireframes, prototypes and updated components in the design system.
Subtitle Accessibility
WCAG Accessibility focus
Viu had a set of subtitles, and top and bottom captions that, in extreme cases, block the video from being seen. Additionally, there was only one set of sizes that some users complained of being too small. To help our users and make Viu more accessible, I led the research and created a set of 3 subtitle sizes based on industry and WCAG standards to allow users to customise their watching experience.
Herobanner Enhancement
Visual Design Focus, Visual style guide
The herobanners on Viu's website and app were not created in a responsive nor intuitive way. By comparing several solutions, I redesigned herobanner components and their placement to allow the banners' goals to shine. By doing this, components no longer clashed with the images since I had increased the safe zones of the banner from 43 to 62%. In addition to this, I created visual guidelines and testing frames to allow the content team to create images that comply with the new herobanner component.