Spotify Redesign
Mobile application
This is a solo project by Dianna Dimambro created in 10 hours over a span of two weeks.
Spotify is a leading digital music service that gives you access to millions of songs. It gives you instant access to its vast online library of music and podcasts, allowing you to listen to any content of your choice at any time
The Final Mockups
The Challenge
By redesigning the mobile experience, the challenge would be providing add functionalities that would elevate the users experience and lead a more intuitive process when navigating the application
Ideation
Pain Points
After interviewing 4 participants I identified 3 pain points that they expressed:
1
It can be intimidating to try new items, especially if the menu is unfamiliar to them.
2
Lack of personalization.
Which can limit their ability to tailor orders according to their individual preferences
3
Limited amount of menu information. Which may exclude users that may have dietary restriction
Secondary Research
My research object is to understand better the competition and what makes their app successful, or evaluate how they can be better. Click on each arrow to see the key points based on reviews on the app store an data insights.
Starbucks
I chose this company because of their high success in mobile ordering application usage and better understand how they are able to design features to build more digital engagement.
Chiptole
I chose this company because of their personalization features for ordering food. My goal is to gather insight on their strengths and weaknesses to improve the customization functionalities.
The Personas
From here on out, we will be referring to these two personas which represents our target users.
Meet Alice
She's in her early 20's and a college student. She currently lives with 2 other roommates and has a job as a babysitter.
She often cooks her meals at home because she has a strict diet and budget.
Meet Alex
He is in his early 30's and works at a executive level at his company. Around lunchtime he normally orders out because he is always on the go.
His goal is to balance the number of responsibilities he has while maintaining his core values in health and fitness.
Brainstorming Solutions
To address lack of transparency
Alice/Alex will be able to see each ingredient in their order.
Why? This allows easy customizations for users that have dietary restrictions.
To address lack of customization
For users like Alex, they can make create customized notes.
Why? Users like Alex might want to make a request that is not in the default form. They can communicate any requests the same way they would if they were talking to a direct person.
To address lack of transparency
Alice/Alex will be able to see each ingredient in their order.
Brainstorming
1
To address dietary restrictions and allow for more transparency.
2. For users like Alex, they are able to make create customized notes for the food preparer to see. One of his pain points addresses how he prefers ordering in person since ordering online might not allow for special requests. (having
​
3. For users like Alice, they can filter through menu items using “tags”(gluten free, vegan, kosher, ), to see a variety of options they can choose from without needing to customize their order each time.
​
2
To address lack of personalization
1. Both Alice and Alex are able to view past purchases, and reorder. This helps them save time, if they created any dishes themselves and do not want to repeat the same process each time they order on the app.
​
2. Both Alice and Alex, he can go to the community page to be inspired by any dishes he finds appealing. Based on secondary research, if a user is looking for a new dish to try, or will eat at a new place they will look through photos of dishes from a particular establishment. This could be yelp, on the restaurant's website or instagram.
Version 1: Wireframes
1
For transparency in ingredients, I thought imagery and check marks would denote the ingredients inside.
2
Based on this article by UserPilot
having a "success" banner design or animation is a small but effective way to make the experience positive for the user after successfully completing a task
Version 1: Usability Studies
This was the first working prototype, which I tested with my participants. This is where i found that my design had several issues.
3
Most found the expanded menu items on the menu page to be confusing. They thought the full length menu items represented specific food categories. (Salads, Sandwiches, Smoothies)
1
They liked being able to select/deselect ingredients. However when they wanted to revert their changes they were not able to do so.
2
All of them had issues with the payment method.
Once they are ready to check out and put their order information. All of them did not understand that they needed to swipe up to
Version 2: New High-Fidelity Mockups
Impact
After showing the designs again to several new users among my previous ones. All of them were impressed with the the mobile ordering app.
They were able to navigate through the design with ease, and can see themselves using a application like this in the future.
Key Learnings
I learned a lot about designing with Figma, and experiencing the 5 stages design thinking.
What I would do if I had more time:
For users like Alex, I would want to build more functionalities that would make it easier for him. One example of this, is a feature to order ahead of time. To contribute to the users who are not familiar with using mobile ordering applications, I would also like to provide more animations and popups that help guide them through the mobile ordering process.
Some of the Tech I used
- TypeForm for surveys
- Google Docs for documentation of progress
- Figma for UX design and prototyping
- UnSplash for royalty free images.