The Brief

To explore and design UI elements building on my previous UX design project. Link to case study here:

My process

I started UI week with all the material and deliverables created from the UX project I worked on previously, with the key user goals and pain points derived in mind. Throughout the week, I worked through the techniques and areas listed below which I will take you through one-by-one in more detail through this article:
  • Brand Personality — Values & Traits, Affinities, Positioning, Tone of Voice
  • Word Association — Objects, Qualities
  • Sketching
  • Mood board — Purpose, Style, Concept, Emotion
  • Style Guide — Colour Palette, Typography, Iconography
  • Wireframes and iterations
  • On boarding
  • Clickable Prototype
 

Brand Personality

Starting off the process thinking about brand personality allowed me to explore how Tidy would be perceived by the user.
Values & Traits — Under-promise, over-deliver, promotes efficiency, customer satisfaction, professional, reliable, sincere, honest, convenient, environmentally aware, responsible, transparent, ease of use
Tidy — Brand Affinity
Tidy — Brand Affinity
Affinities — Identifying existing brands in the market who convey similar values which Tidy represents. For example Lyft, Monzo, Innocent, Airbnb, Dyson, Reformation and G-Star.
Positioning — Simple not elaborate, modern not traditional, a necessity not a luxury, affordable not expensive, accessible not exclusive
Tone of Voice — Honest and approachable. Embracing efficiency, transparency and are environmentally aware. Never a job too difficult.

Word Association

Moving onto brainstorming words; the objects and qualities associated with the app’s cleaning service.
Objects — any object at all related to cleaning and service.
Qualities — the qualities I want to it to represent, informed by user research and UX strategy.
Tidy — Word Association
Tidy — Word Association

Sketching

Getting ideas out fast, sketching anything I could think of to do with Tidy’s cleaning service and how it would be provided. Some of these sketches, later on, informed the icons I decided to use in the mockup design.
Tidy — Sketch of ideas
Tidy — Sketch of ideas

Mood Board

The point of a mood board is to gather images that inform the visual design direction of the app. I’ve looked at four key areas; purposestyleconcept and emotion which will help inform my designs for Tidy.
Purpose — below I’ve gathered images that is to do with the main service of the app, cleaning. However, also thinking about how this service is carried out and the style in which it is done. Keywords include: cleanorganisestyle.
PURPOSE — mood board created on Milanote
PURPOSE — mood board created on Milanote
Style — below shows the mood and artistic style I’m going for in the app’s visual interface. Maintaining a balance between themes of minimalismsimplicity, keeping it modern, whilst professional and inviting.
STYLE — mood board created on Milanote
STYLE — mood board created on Milanote
Concept —this represents the app interface, looking at research into design patterns. What works well and the user is used to operating. I looked into designs that I thought were seamlessconvenienteasy to use and accessible. Looking at dating apps, scheduling apps and also the initial pages to attract user engagement.
CONCEPT — mood board created on Milanote
CONCEPT — mood board created on Milanote
Emotion — finally, the images below convey to me the emotions the users feel when using Tidy. Feelings of reliefrelaxationfreedom and being supported.
EMOTION — mood board created on Milanote
EMOTION — mood board created on Milanote

Style Guide

Working on the style guide prior to starting the wireframes allowed me to have important design decisions in place before I start moving things around. To me, this is a very important step where most decisions are made before the design mockup takes its shape.

Colour Palette

Tidy — Colour Palette
Tidy — Colour Palette
The colours here are inspired by the colour psychology of blue expressing emotions of calmserenity and peacefulness. In addition, cleanliness and trustworthiness. I kept the palette quite muted to bring through themes of minimalism whilst also incorporating bright colour accents to present a sense of energy and liveliness within the brand.

Typography

Tidy — Typography
Tidy — Typography
With typography, I wanted to use two san-serifs fonts as I wanted the design to appear modern. I picked Montserrat Bold for the headings and Overpass for the body, I feel the two go well with each other.

Iconography

Tidy — Iconography
Tidy — Iconography
With the goal to maintain a simplistic design, I wanted to keep the icons as straightforward and clean as possible, opting for simple shapes as shown above. With an exception for the icons displayed on the last line being slightly more complex, they were used for on the onboarding screens to help tell a clearer story of the product.

Buttons & Forms

Tidy — Buttons & Forms
Tidy — Buttons & Forms
Implementing the colour palette into the buttons and forms here. Again, focusing on a simplistic design with curved edge rectangular shapes. Also using emojis to express an element of fun too. 🤪

Wireframes

Starting off by creating wireframes on sketch based on my paper prototype with consideration to the changes made after a round of usability testing.
Tidy — Midfi Wireframes
Tidy — Midfi Wireframes

Onboarding

Tidy — Onboarding
Tidy — Onboarding
Thinking about the experience at first use, allowed me to come up with a few screens that aim to help the user better understand the app and services available, while also setting them up to book their first job.

Prototype

View my interactive prototype → here ←
Tidy — Hifi Wireframes
Tidy — Hifi Wireframes

 

Next Steps

  • If I had more time I’d like to test the clickable prototype with users to get some feedback on navigation if I am missing any screens and comments on the interface as a whole.
  • I’d like to learn to do simple motion graphics to help present my designs a bit better. For example, I’d like the white blocks on the splash screen to move around whilst the app is loading but I don’t have the ability to express that visually yet.

Learnings

  • It’s been a very enjoyable week for me to work on the UI part of Tidy. I’ve always loved visual design and found the branding exercises very interesting.
  • Taking the decision to build a style guide prior to wireframing was beneficial to me because when it came to putting everything together it was so much easier.
  • Wireframing my paper prototype into a greyscale mid-fi before going hifi and adding colour was also a good decision. Although I had to do more work as a result of adding a step, I was able to do an additional test in between which allowed to me fix teething problems before going hifi.
 
badge