Cleaning Service App — UI Case Study
--
1 week | Solo Concept Project
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
The Brief
To explore and design UI elements building on my previous UX design project. Link to case study below:
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
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.
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.
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.
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.
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.
Emotion — finally, the images below convey to me the emotions the users feel when using Tidy. Feelings of relief, relaxation, freedom and being supported.
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
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
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
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
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.
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 ←
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
