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
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
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.
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.
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 simpleshapes 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 simplisticdesign 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.
