Josie Artale
UX & UI Designer

Luv Bug

UI Design

Responsive landing page

Responsive landing page

About 

Luv Bug is a dating app designed specifically for Android and iOS

This case study was an exercise in adopting an existing design system to create new UI. 

Work Process
Rough sketches on paper

Rough sketches on paper

Sketches & Wireframes

I usually start the design process with low fidelity wireframes. This is the way I iterate through many design options quickly.

When Sketching, I am putting together the flow, thinking about what elements are best to use, and how to organize content in a logical way.

After sketching, I digitize the designs and create low fidelity wireframes. I use these wireframes to confirm layout and user flows

Styles & components generated from Crane Material Design

Styles & components generated from Crane Material Design

Design System

The product was designed using components from Google's Crane Design System. With this approach, I was able to transition from sketches and wireframes to hi-fidelity designs quickly and efficiently.

UI Design

Once I have established wireframes and user flows, I begin to digitize my wireframes and apply components from the design system into my UI design. I apply colours, illustrations, and follow brand guidelines.

Retrospective

This exercise allowed me to leverage a design system to create new UI designs. I learned how to use existing assets to expand a product line while maintaining brand identity. It was a practical lesson and example of being brought into a project that has already a design system.