Categories
Case Studies

Strengthen your Landing Pages –LUMI Website Redesign (UI/UX Case Study)

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.

Mockup of websites

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.
An iPad showcasing the LUMI App and LUMI Keys kept in front of it.
Picture Credits: LUMI

Goal

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. 🎉

Process

Preparation

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.

Moving to the second step, I looked around for inspiration and references. You can use LandBook, Awwwards or OnePageLove for this. This helps in getting some ideas.

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.

Screenshots from various websites.
Here’s a screenshot from my Figma file

Redesign

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.

Font styles, button styles and navigation bar iterations
Here are some iterations I tried for the navigation bar

Landing Page

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.

2 landing pages kept adjacent to each other for comparison

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.

2 landing pages kept adjacent to each other for comparison

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.

2 landing pages kept adjacent to each other for comparison

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.

2 landing pages kept adjacent to each other for comparison

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 🎉

LUMI Keys

2 landing pages kept adjacent to each other for comparison

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.

2 landing pages kept adjacent to each other for comparison

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).

2 pages kept adjacent to each other for comparison

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.

LUMI App

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.

A product page
Hero section for LUMI App

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.

A product page
Features section in LUMI App

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.

A product page
Pricing and Footer for LUMI App

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 🏔

Wrap Up

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.
A lot of frames from Figma file
My iterations archive in Figma

Before taking up this project, I prepared myself by redesigning an AR app, Acute Art.

Making art accessible to everyone via AR

Recently (but not so recently), Apple announced Widgets for iOS. To help you get started, I made a guide for it.

Designing widgets for iOS, macOS and iPadOS — the ultimate guide

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.