View the original post
In this case study, I will explain how I redesigned a product website, LUMI from scratch. I will talk about my process, the decisions I took, my approach to this project and what I learned while working on it.
Intro to LUMI
Simply put, LUMI wants to help you make music. ROLI, the parent company of LUMI, already is involved with professional music creation. I’ve explained their products below.
- 🎹 LUMI Keys is a portable piano keyboard. It is ROLI’s attempt to make music learning universally accessible and of course, fun.
- 📱 LUMI App is the companion app to help you with your learning. It lets you access the LUMI Library.
- 📚 LUMI Library is the content library you can access through the app. It is divided into two tiers: Essential and Complete.
I felt the website already had all the content but a little too much of it. It seemed like information was put on the website just because it was there. It needed some restructuring and a visual boost to take it to the next level. That is exactly what I have tried to do in this project.
Let’s get into it. 🎉
I started by analysing the LUMI website. This helps in mapping out the site and finding every last detail about the products. A couple of times, the FAQ section had information which I shifted to one of the product pages.
Once I had a good idea about how I wanted the website, I decided how I wanted the information to be structured. Moved onto some rough layouts. The important things to decide here is the content width. Will the navigation bar stretch? Will your content stretch edge to edge? Try to answer these questions at this stage to avoid confusion.
I recommend using Whimsical for this. Regardless of the tool you use, the goal is to have a clear idea for the website.
After analysing the website, I felt there was no particular need to have two separate pages for LUMI Library and LUMI App. Since they are so interconnected, it was best to combine them into a single page, LUMI App.
Before starting any page, start with the colours and text styles. This will keep the website consistent and make our work easier. Next, we need to work on the common elements of the website, such as the navigation bar and buttons.
Let us start with the landing page. It serves as an intro to all the products by LUMI. A good landing page should be able to answer any initial questions the person might have. It’s important because it drastically improves customer conversion.
The idea behind having a dark background is to help the colours on LUMI Keys pop and add contrast to the website. It directs attention straight to the hero of the website, the product itself. A gradient is a nod to the colourful design of LUMI Keys.
The first thing I did was add some social proofing to the top end of the page. This is a matter of choice. It adds some assurance right at the start when the person is getting to know about the product.
The next step is to introduce the products. There’s a one-line description already but I wanted to give some more details. Generally, viewers just scan the website. They don’t want to sit and read every single line on a website.
Breaking down content into points accompanied by some icons helps grab their attention to the important parts.
That’s what I did for both the products, too. Notice that in this section, I am also introducing a different gradient for LUMI Keys. I will refer to it later.
After describing the products, I’m (and LUMI is) trying to sell it by describing its advantages and features. Here, you will notice that I have restructured the list of features.
LUMI’s goal is to make music learning accessible. Being able to learn from home is the single most important part of LUMI products, therefore, deserves to be the highlight. I also took this opportunity to showcase LUMI’s achievement. Pictures are also a form of social proof.
When people see other people using a product, they feel more secure about it. It can be the difference-maker in a conversion.
As I mentioned earlier, I decided to move things around while analysing the website. I decided to move this content in the product pages from the landing page. Notice the “featured in” section which I used in the beginning.
So, that wraps up our Landing Page 🎉
Applying the same approach as the landing page, I want the design to compliment the products and make them the centre of attention. The elements on either side give an effect of audio coming out of the keyboard and direct attention to it. Remember I said I’d refer to the gradient from the landing page? It’ll be in action throughout this page.
There’s a lot going on here. There’s a lot of content, I felt it was a bit much. This is where the website analysis comes in handy. I already know the important info. I decided to make this section shorter and little more crispier.
UI tip: Use overlay on text to get that nice gradient effect (see above picture).
Ending this page with some more social proof and the footer. I think the social proof section showcases my approach to UI in this project very well. Always add depth.
A combination of shadows, background elements and materials adds depth, hence adding character to the page.
To keep things consistent, both product pages have a similar layout. So instead of discussing the layout and the decisions I made, I am going to discuss the UI.
Let’s start with the hero section. I’m using the iPad and iPhone mockups to indicate support for these kinds of devices (tablets and phones). The blurred out LUMI Keys in the background will be cut-off when viewed, which indicates that the page is scrollable.
Subtle cues to indicate behaviour are useful tricks to help in guiding the user.
Custom App Store and Play Store buttons serve as quick links for people who already have LUMI Keys and want to get the app.
I am also using random shapes along with LUMI Keys to add depth to the page. You might have noticed this in other redesigned pages as well.
Moving onto the Features section. The standout part of this design is the use of depth. Initially, I use materials to create some.
Materials create a translucent effect which gives a sense of depth and adds more context to the design.
Of course, when text is present over the material, a thicker material (heavier blur) should be used to maintain legibility. Thicker materials are still more contextual than solid backgrounds.
In the next part of this section, social proofing, I am using a lot of different elements, shadows and blur on top of them to create a sense of depth.
I know what you’re thinking. “Wow, this guy just can’t get enough of b-l-u-r.” You’re absolutely right. But setting aside UI for a second, let’s talk about why I designed the pricing section the way I did.
On the left, you see a monotonous LUMI Essential with a lot of empty space left. On the right, you see a colourful LUMI Complete with some fullness to it. This is a tactic to push the viewer towards LUMI Complete. The emptiness on the left indicates that LUMI Essential is incomplete. The monotonous appearance makes it look dull compared to LUMI Complete.
Back to UI, let’s talk about that subtle gradient above the links for Overview and LUMI Keys. It’s a simple gradient that fades away quickly but manages to indicate where a section ends and another one begins. This is another one of the tricks you can use to guide the viewer. I used it again in the footer to create two sections in it.
With that, we completed the redesign 🏔
This project was an awesome experience for me. I haven’t worked on a lot of website design projects and this really helped me get going. Here’s what I learned:
- Preparation is 80% of the work. Analyse competitors/similar websites, come up with the IA and lay out your plans before designing a single pixel.
- Iterate, iterate, iterate. Make 10 iterations for each section. You’ll be amazed by how many smashing designs you can make. I added a glimpse from my archive as an example.
Before taking up this project, I prepared myself by redesigning an AR app, Acute Art.
Recently (but not so recently), Apple announced Widgets for iOS. To help you get started, I made a guide for it.
If you enjoyed this case study, let me know with 50 claps 👏
😷 Stay safe, wear a mask and have a nice day.
🏳 I do not own any of the product photos used in the redesign and in this article. Most of them are from LUMI’s Facebook or Instagram. Credit to Sennep for the LUMI App pictures.
Strengthen your Landing Pages –LUMI Website Redesign (UI/UX Case Study) was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.