Design Process

A structured design process helps me to take up any sort of problem, make sense of it and come up with solutions. Following is an outline of my design process.

One thing to be noticed is that this project was focusing on UI/Visual design which didn’t include UX design; for example, user research, comparable review, user journey mapping, information architecture etc.


Case Study: Cityweekend App

Tools: Invision, Sketch, Adobe XD, Illustrator, Photoshop, After Effects

Time frame: 8 weeks

App Concept

Problem definition

The problem addressed through my new app is the difficulty in searching for Discover great restaurants, bars, spas and events . It is challenging for people like me who want to learn new things to find good courses that suit them.

Value proposition

Generally, a value proposition takes the form of a statement and is usually the first sentence out of the mouth. Its primary purpose is to communicate the benefits that the customer can expect from your offering.

User Persona

Wireframes

Visual Language

Languages are made up of different types of words that can be assembled together to create a message. Visual language is like any other language. The words of visual language can be grouped into colour, space, shape and movement.

I interviewed a few users to understand their needs and discovered the moods of the app to further define the visual language.

Mood Board

As designers, we aim to optimize and speed up our process. The idea from Atomic Design is to allow UX designers, UI designers and front-end developers to work in parallel instead of a waterfall process.

A mood board is one of the visual deliverables in the design process. It is a collage that generally consists of images, text, and objects that describes the feelings we obtain through the digital products aside from the actual layout of pages.

Style Tile

A style tile is a collage of tangible, visual design elements, like colour palette, font, or button style, which helps to communicate a concrete visual language with stakeholders. It bridges the gap between mood boards and wireframes. It is extremely useful to get design feedback during early phases.

UI & Prototype

After I decided on the visual style, I applied it to the mid-fidelity wireframes and did a few design iterations. Then, I created the interactive InVision Prototype with following high-fidelity user interfaces.

“If a picture is worth 1000 words, a prototype is worth 1000 meetings.” — credited at IDEO