Cleaning Service App — UI Case Study

1 week | Solo Concept Project

Tidy — Cleaning Service iOS Application

Visual design work on Tidy — a concept cleaning service app I’ve designed as part of the UX Design Immersive course at General Assembly LON.

UX/UI tools used: Ideation | Iterative design | Brand Affinity | Moodboard | Wireframes | Style guide | Clickable prototype

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

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.

PositioningSimple 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

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

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; purpose, style, concept 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: clean, organise, style.

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 minimalism, simplicity, keeping it modern, whilst professional and inviting.

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 seamless, convenient, easy 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

Emotion — finally, the images below convey to me the emotions the users feel when using Tidy. Feelings of relief, relaxation, freedom and being supported.

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

The colours here are inspired by the colour psychology of blue expressing emotions of calm, serenity 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

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

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

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

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

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.

Thanks for getting this far! Any questions feel free to get in touch or check out my website. ✨Kiki

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store