
High-Fidelity — redesigning a mobile music app
Do you remember the 80's? or perhaps the 90's? I certainly do. It was a time of youth and rebellion — for me anyway. If you haven’t guessed it yet, I’m an 80’s baby. Yes folks, I used to flex those neon tights and crop tops. I used to skip class so that I can hit the record shop to listen to the lastest LPs — at the time it was Billy Idol’s Rebel Yell. My SONY Walkman cassette tape player was on PLAY all the time. These were the days when I’d take a pencil/pen to manually rewind the cassette tape without using up the batteries. Sounds archaic, right? The 90’s weren’t all that different, only some really bad fashion choices, but…the music was epic. IMO, alternative rock , R&B/hip hop really made a huge impact — with groups like RunDMC, Public Enemy, Nirvana, Red Hot Chilli Peppers, Stone Temple Pilots (to name a few).

As part of a UI learning exercise, I was paired up with another UI student. We were tasked with ‘skinning’ existing mid-fidelity wireframes in Sketch. This was for a mobile music application — think Spotify or Google Play.
Client: Collaborative school project
Role: UI, UX
Tools Used: Sketch, Photoshop, Illustrator
Objective
To reimagine and redesign a music mobile application called REWIND. The app’ target user are those that listen to 80’s/90’s music. It also offers the option to create and purchase a mixtape.
Though this was a collaborative effort, we still had our own work to complete. Here’s what it looked like.

Part I — UX
Since I just finished studying UX in the first cohort of the program, I naturally used some of my learnings and applied it to this exercise. I found it useful in understanding the user — ultimately enabling me to determine the users wants/needs as well features they wanted in a music mobile app.

Survey Deployment
For the first part of the exercise, my partner and I worked on a survey questionnaire together. This was to understand the user and what they’re motivations and frustrations were — to also determine if the purchase of a mixtape was something users actually wanted. We deployed the survey and received 20+ responses. From there, we did some card sorting and pulled out some data to help us with building our personas and feature prioritization.
The goal may have been very specific, however, I felt that the survey helped validate assumptions — we can then build an app that spoke to the research.
Findings

Based on our research findings, we each created our own persona. My persona embodied the insights we found in the survey research we deployed.
Persona : Meet Madison King. Aspiring DJ, 26.

From there we began discussing the features which our users voiced throughout the survey. There a number of them, however, we chose to prioritize five (5) main features. These were the most mentioned — both in the quantitative and qualitative data.

Part II — UI Design
Now we begin with the elements of physical design — the first few steps before implementing the design itself.
Here’s what we did:
- Inception Sheet
- Sketching/Low Fi
- Mid- Fi (existing wireframes)
- Hi-Fidelity (redesign)
Inception Sheet

We worked on this together and agreed that we should make this easy enough that it can be interpreted in any way — design wise. It would leave room for either of us to create however we wanted without any ‘real’ restrictions.
Mood Board

I found most of my inspiration from interior design — colour combinations and placements of shapes within the design.
- I looked at 90’s and 80’s fashion magazines, colour palettes inspired from this time period
- 80/90s abstract art, and how that was influenced throughout this time period
- Specifically 80’s — I was inspired from the Memphis art movement which is…
The Memphis Group was an Italian design and architecture group founded by Ettore Sottsass in 1980 that designed Postmodern furniture, fabrics, ceramics, glass, and metal objects.
The Memphis group’s work often incorporated design featuring colorful and abstract decoration as well as asymmetrical shapes.
I married a number of design ideas together since both the 90’s and 80’s were predominant music tastes in the survey.
Sketching/Low Fidelity
Here’s a sneak peak into my sketching before high fidelity design. My thought was to ‘break’ the existing wireframes. What does this mean? It means, I wanted to go beyond what was given and redesign as a I wanted — without any limitations. Essentially, colouring outside the box — sorta speak.

Mid-Fidelitiy — what we were given to redesign
We were give 4 screens to hi-fi. I ended up ‘breaking’ it and turned it into 5 different mobile screens. Here’s a few of the wireframes that we were given to redesign.



High-Fidelity Design
In the end, I ended up with about 5 screens that I changed entirely.

Design Choices — the ‘why’
I’d like to share the reasons behind why I designed the way I did, and what each screen would do. Since Sketch is limited in animation, I would transfer this to Figma and add animation — but I didn’t have any time.
Login/Onboarding
- The intention is to have the REWIND logo animated.
- It would turn back and forth while the user has the app opened.
Background
- Geometric shapes in the background are inspired by the Memphis art movement.
- The intention here is to have the shapes move very slowly up/down or across the screen.
Sign Up
- If the users are interested to continue, they have the option to sign up through FB, email, etc.
Discover
- My intent for this screen was to help the persona ‘discover’ more artists.
- This would help her learn more about up and coming artists within the industry or locally.
- It also showcases artists that she might be interested in learning about.
Browse
- I designed for a carousel effect, which would allow users to explore through different genres/moods.
- The search function is also available and would open into another screen to allow for searches outside of the main browse screen.
My Library
- Users were explicit about their need for an AD-Free experience.
- In this case, I added a CTA (call to action) banner that advertises about the ‘sharing of a playlist/mixtape’ with others.
- The CTA would give the user the option to ‘learn more’ . It would not interrupt their experience unless they chose to.
I also adjusted the copy in the mobile screens to speak to the user persona, as well as trying to keep it current.
Take Aways
Work smarter, not harder. I keep hearing this in my head — repeating itself at verbatim (thanks Uncle Leo). But it is true, I should approach design like painting a house. You’ve got to get all the prep work ready before you can start painting. It is all in the preparation.
I had no idea how useful a mood board and style tile was! It gave me a good foundation to start from — kept me grounded and away from getting drunk on design inspiration.
I had fun doing this UI redesign. I can see myself getting better each day, learning about things I never knew before.
Thanks for reading!
