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
I begin by understanding the following
A UI Library, also known as visual styles, or theme, is a custom graphical interface elements package that is applied to a particular app or website to create an elegant experience for the users.
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.
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.
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.
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