UI Design Case Study Lumo
Branding | Logo Design | Style Guide | Mockups | Prototype
Overview
What is Lumo?
Lumo is an ecommerce app for lamps and lightning systems. I created this app as a personal project for my portfolio. In my portfolio, wanted to show different styles. This app is hold in dark mode, many infographics explain product details and benefits. The goal of this app is to make it easier to find an appropriate lamp or lightning system.
My Role:
- UI Designer
Duration:
- 4 Weeks
Tools:
- Figma
- Photoshop
- Rotato
Case Summary
Background
Finding the right lamp or lightning system for an apartment or a new home property can be difficult. It's not always easy to compare different styles of lamps and to see its different product characteristics in a succinct and easy way.
Problem Statement
Our users need an easy and quick way to compare different lamps and lightning systems. The app should offer comprehensive information about the different products and present them in a visually appealing and clearly laid out way.
Potential Solution
A native web app with comprehensive filters to find the product according to users needs. To give users a quick overview, the app shows important product characteristics with explanatory graphics and tables.
UX Design & Research
The Lumo app was a free project to show different styles and designs in my portfolio. I created the Problem Statement that are based on the problems I was confronted with when searching for lamps and lightning systems for my new apartment. The User Persona is a bit based on me. The user stories and the rest of this project were authored by me based on my own research. This allowed me to deepen my knowledge for the users and define their needs and goals to design a solution.
User Stories
User Flows
Based on the user persona and his story, I created the user flow to ensure users had an efficient and simple way to reach their goals in the app. User's needs were: to set up relevant information for lamps and lightning systems while registering, to filter products in the category page and to get visual appealing and succinct product information on the product page. Next, I built the first sketches and prototypes to test the solutions with users.
User Flow 1
User Flow 2
User Flow 3
Wireframes
I sketched the most important screens of the app with pen and paper, representing the User Flow Diagram. I discussed these wireframes with some of my friends that match most criteria (needs, age, job, education) from the User Persona. In the next steps, I considered the changes suggested by the mentor and created digital hi-fi wireframes.
Mood Board
When focussing on app style, I created a mood board for the Lumo app aimed at people that want a more visual and succinct way to present a product. It features dark mode (because it's modern), infographics, a clean and modern color scheme to create an overall modern look and feel. The general style of the app is clean, more visual and modern. The app uses lots of icons, charts and infographics.
Color Palette
The main goal was to find a color palette, that let the app appear modern and distinguish it from competitor apps that use mainly white and orange or yellow. Therefore, I decided for a friendly turquoise and dark, light blue and black as main colors, accompanied by various lighter shades of gray and white. A light rosy and green match very well to the dark mode and are used as accent colors.
Typography
I choose the Inter typeface for this app, because it is clean, modern and discreet style matched the general style of the app. Besides, this typeface has a high readability, which is important too.
UI Elements
When focussing on app style, I created a mood board for the lamp and lightning system ecommerce app, aimed at busy people that like more visual product presentations. It features a modern color scheme to create an overall stylish and high-class look and feel and.
Interactive Prototype
I created a digital prototype and shared it with 3 friends to gather feedback and uncover potential issues. After the feedback, I changed spacing, button sizes and font sizes to improve usability.
All Layouts
Here you can see all layouts of the Lumo App.
Key Learnings
- Every UI element, colors, spacing, typeface, and visual hierarchy plays an important role in creating a cohesive user experience
- I learned how to use dark mode and how this influences the choosing of colors for the app
- I learned how colors influence the general look and feel of an app
Next Steps
- I'll test different versions of these layouts with AB testing
- With the final layouts, I'll create a prototype as if it were the real app
- I'll test this prototype with various potential users, do interviews with them and optimize the layouts of the app
😀 Thank you for scolling
More Works
Discover case studies for apps and websites with different styles.
