Illumi | Emily Petsch

Design Brief

For this project, our two-person team was tasked with designing several screens for an app of our choice. We decided to create a music app and aimed to give it a nighttime aesthetic inspired by the look and feel of a lava lamp. We named the app Illumi, reflecting both the glowing nature of a lava lamp and the emotional illumination that music can bring to one’s life. As part of our process, we conducted competitor research and distributed surveys to gather insights into users’ favorite music apps. Based on our findings, we compiled the research and brainstormed a unique feature to incorporate into Illumi that would set it apart from existing apps.

Research

We researched various apps and concepts that reflected the feeling we wanted to capture in our app as well as our concept.

Phase 1:

Competitor Analysis

For my sketches, I chose to think of various elements of wine and different shapes associated with wine. Another way I created sketches was using word association and collecting words I could use to create various ideas for a wine logo. From my evolution of the logo and brand, I also sketched ways my brand could be cohesive in my guidebook, kiosks, and event environment.

Competitor Flow Chart

For this portion of the project we were to analyze our competitors UI and create a flow chart depicting the interaction Users would have when using the app.

Phase 3_ User Flow Map (Competitor) (1)_

Value Proposition

What were some of the frustrations that your interviewees experienced when using their music/shopping apps?

During our research, we noticed several common concerns and frustrations with our competitors. One common concern we noticed was related to downloading music on various platforms. Some who used Spotify felt that downloading music took up too much space on their phone, making the app run more slowly and draining their battery life. Others who used Apple Music were frustrated with having to redownload music if their phone was in airplane mode. Another common problem we discovered with our competitors was that their home page was confusing and it often changed. This can make an application more grueling to use and could potentially harm the business if customers are not able to navigate through the app.

What are some of the things you would specifically like to improve when designing your own app?

When creating our app, we would like to make our home screen more organized and user-friendly. Ideally, we would like to create a wide variety of options in our app while making it less complicated and confusing.

What type of audience would you like to focus on when designing your music/shopping app?

Ideally, we would like this application to be user-friendly for all age groups, but initially, we feel the app will be more geared towards users in their late teens and early 20s.

Phase 2:

Personas

For this portion of the project we were asked to create personas for some of the individuals we interviewed as well as inputting the information given during their surveys. This would allow us to better understand our target audience and chosen direction.

User Flow

For this portion of the project, we were tasked with creating our own user flow chart to ensure our app would be user friendly.

Wire Framing

Phase 3:

Prototyping

User Testing:

Updated User Flow:

Phase 4:

Design System

Livvic

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Modak

AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQqRrSsTtUuVvWwXxYyZz

Typography

For our typography, we chose to use a fun font called Modak to parallel the movement and feel of a lava lamp to keep consistency with our overall theme and design principles. We chose to pair this with the san-serif font Livvic to create contrast, maintain balance, and allow for easy legibility.

Color Palette

Our team chose colors we felt would reflect our goal of the app by maintaining moody hues of purple and following our theme of night time and lava lamps.

#B970FF

#B520FC

#8000FF

#75009E

Final Logo Iterations

For our final logo we decided to create a form that is organic and follows the shapes commonly seen in a lava lamps. We also created the logo to reflect a human form and how everyone has different taste in music. We felt this human like form represented the uniqueness of everyone and their love for music.

High-Fidelity UI

Phase 5:

Interactive Prototype & User Testing

Feedback Analysis:

What were the main challenges users had?

There didn’t seem to be a main challenge users experienced. Some were unfamiliar with how Figma worked and were unsure where to click, but overall I think all enjoyed the experience.

What surprised you during the interview regarding user feedback?

We were surprised by some of the feedback regarding more personalization, as well as adding recently played playlists.

What did you learn from the overall experience and what would you like to improve if you were to continue working on this app?

We learned a lot about how to create a successful app and all of the work and research that goes into creating an app. To improve our app, we will be trying to think of ways to make the home screen more personalized as well as giving viewers more scrolling options.

Final Interactive Prototype

UI of the Week

While creating our app, we were also asked weekly to create various screens using different tools commonly seen in UI/UX app design. Some of the elements seen in the various screens include the use of button, sliders, progress indicators, mapping, etc. We were asked to complete one UI every week over the course of the semester.