Overview
Summary
A mobile designed to share music with friends and family quickly and easily
My Role
User Experience (UX) Designer
Problem and Goal
Sharing music with others usually takes multiple steps to complete. Steps that some users do not understand or cannot finish due to time or ability constraints. This mobile app is meant for users who need a quick and reliable way to share music.
My Responsibilities
User bios, Personas, User Journey Maps, Storyboards, User Research, Competitive Audits, Site Map, Paper and Digital Wireframes, Mockups, Prototypes, Accessibility Practices, Usability Studies
Empathy
When I first started this project, I had a fairly clear objective: share music with my family. However, I needed to narrow that down. Why was that my objective? What was wrong with the process of the current products? How could I make that better? While those are all questions that needed to be answered, the first and most important question needed to be asked and answered. Who would use my potential design and why?
I started to answer this question by looking at the types of users that had the most difficult time sharing music as is. Thus, the personas were made!
Personas
Meet Nicole and Eugene. Eugene is a truck driver who often drives long distances and is far from his family often. Seeing as how he is normally driving, playing around on his phone is not an option. Nicole is a university student, just trying to adapt to life away from her friends and family. She often busy with schoolwork and has little time (or free hands) to share the songs she would like with her family. She also has dyslexia and can have a difficult time reading the screen to get to the point of sharing a song.
Problem Statements
Nicole is a busy college student who needs an app that is easy to read or intuitive because she has dyslexia.
Eugene is a truck driver who needs a hands and distraction free app to send music because he cannot lose focus of the road while driving, and remembering to do it late is difficult.
User Journeys
These journeys were very helpful in finding some key pain points. They also helped me get into the right mindset while in the ideation phase. Becoming or thinking as another person is difficult, but very efficient if used correctly.
Storyboards
Pain Points
Time: The process to share a song has numerous steps. Many users forgo it simply because it takes too long.
Accessibility: Sharing a song has several steps, all of which need at least one hand to complete. This becomes a problem if the user cannot spare a hand.
Car Mode: As mentioned above, sharing a song takes at least one hand, which should not be spared while driving. However, the process also requires attention. According to research done, 12% of distraction-affected fatal crashes occurred due to cell phone usage in 2021.
Source: FARS 2017-2020 Final File, 2021 Annual Report File (ARF) Link
Low Technological Knowledge: This bit came a little later than the others but is no less important. Many websites and apps use icons and symbols to navigate the process of sharing music. However, this leaves those that are new to technology or cannot grasp the concepts used in it at a loss of what to do.
Competitive Audit
The competitive audit gave me a great appreciation of UX Researchers
Ideation
Site Map
Creating the site map was fairly straightforward as I had already decided on a linear flow. From there, I just had to make sure all the screens and steps I needed were available to the user.
For the layout of each screen, I used the Crazy Eights method and How Might We. From there, I refined and combined elements to create these paper wireframes.
Paper Wireframes
Design
Digital Wireframes
For the design, I wanted to keep the the layout simple and intuitive.
While I did not mind the layout and overall design, the screens were still missing some critical details, such as labels. Back to the drawing board (or Figma in my case)! After some tweaking, I came out with these wireframes.
Some labels were added. However, it starts to look pretty crowded in that little bar on top. Instead of going back into Figma, I decided to do a usability study. This study would help me decide if I was on the right track with this project or if I needed to backtrack and change some fundamental ideas. At this point, I already had a low-fidelity prototype up and running so why not test it out?
Please note that while the picture is of my very first design, the usability study was done after I made the changes to version 1.2
The usability study had 5 users, 2 of which were over the age of 55. The user would go through the process to share a song, the longest route possible. After that, the users were encouraged to navigate through the app in which ever way felt most natural to them.
This process gave me quite a bit of insight. The first insight is that many users will click on anything and everything on the screen if given the chance. The other large insight happened to be labels. The two users over the age of 55 needed the guidance to navigate the app on their own. After that, the problem of crooked buttons was noted, specifically on the Contacts screen. Some other insights were mentioned, such as adding more customization to the profile or being able to select more than one song to share. However, those were deemed as being able to wait until later to add, if at all. While some users do love themselves some customization (myself included), not every user enjoys it and thinks the customization process is tedious.
With these insights fresh in my brain, I went to work again. I first straightened out the layouts, making sure each element of the screen lined up with each other. Then, adding labels to each button that did not have a clear direction.
If you would like to take a look at this low fidelity prototype, it is still up and running. Please just follow this Link. Although if you wait, there's a better one later.
The top most part of the app did not feel right to me, even at this point. I played around and finally felt as if I could take the next step and move onto High Fidelity wireframes.
High Fidelity Wireframes
Right away, I knew I wanted to stick to a dark theme across the app, as it is easier on the eyes and my elderly parents told me they did not want to be blinded by the light once again. Also, I wanted separation of the header, body, and music bar if applicable. Still being new to Figma, I did not separate using frames or even a box at first. Instead, I played with gradients to create my first high fidelity wireframe.
It was not my favorite... Still, they could have turned out worse!
I added further separation by sticking the back, menu, and profile buttons on one line and moving the title of the screen to the top. This helped ease the cramped feeling I was getting from the previous attempts. Also, I wanted to make the title of the screens as apparent as possible, so that no user would lose their way within the app.
Deciding that the gradient did not have the effect I was going for (and having done some research into how to effectively use Figma), I did some more work. Welcome to version 1.2
Ah much better!
I added some pictures and changed the header to actually look like a header. This version felt much better than the last. Cleaner in my opinion. Deciding to go forward with this version, I started working it into a prototype.
That's a lot of lines. Every song leads to the same place so it isn't as confusing as it looks.
With a prototype up and running, it was time for another usability study! This study had 6 users, 2 over the age of 55. As my goals were very similar to the last usability study, I did not change much in it's approach. Users would take the longest route possible to share a song, then they would share a song in the way they felt most comfortable with, and finally they would move around the app in which ever way they wanted.
My goals were to see if the app was functioning as it should, if any new pain points occurred, and how fast each user took to share a song. The results were fairly positive. However, the study also revealed that some users had a difficult time reading the title of each screen, a demand for more screens (such as Recent) be added, and some of the gestures to move between screens appeared to be different from other similar gestures. I moved to correct these issues as soon as possible. I also changed the lighter purple into more of a blue shade create more uniformity throughout the app.
Behold! Version 1.3!
At this point, the embarrassment from my first version is very nearly gone. The title of each screen being separated by being on a different color really made it pop out. There are still issues of some crowding I've noted. However, after making the changes mentioned above, this prototype is starting to feel and act like an actual app.
There are some issues that still need to be acknowledged though. Remember Eugene the Truck Driver? None of the above solutions help him out. He needs something that can be hands free and (preferably) distraction free. Also, there are still some crowding issues that need to be addressed.
Finally, you get to see the current version of Sharing is Caring. Version 1.4
I added a button that would ultimately be a voice activation with some simple commands such as "Play Song by Artist" or "Share this song to Abel." As this is a design prototype, that task will go to a production team. The Options and Share buttons were also moved and reorganized to line up more with each song title.
If you would like to check out this prototype, please follow this Link
Going Forward
Impact
This project was my first ever UX design. It was incredibly fun to create an app from nothing. Most of the feedback was positive too! I am not unfamiliar with taking feedback, both positive and negatives, and applying it to my work, though this is the first time I have had to do it for digital work. This work has given me great appreciation for those that have done this for many years, especially UX Researchers.
What I learned
While I learned the obvious, such as Figma and the fundamentals of designing, it took some time for me to realize the real trick. Designing while keeping the User in mind at all times is a skill that is developed and nurtured. One does not just walk into UX. I will continue to develop that skill so that I can help those that do not even realize they need it.
Next Steps
I plan on adding a Browse screen. This screen will be the first to incorporate carousels. I believe this will be a better way to showcase some of the music, rather than lining them up. I also have been debating on doing this for the Home screen as well.
Add a functional Options menu. Each song has the button for an options menu to appear. However, I previously lacked the knowledge to add this in Figma. After doing some research, I believe I have it and will be adding this feature in when I get the chance.
Thank you for taking the time to look at this case study. Apologies if it felt too long winded. I could not hold in my excitement to share my first project and wanted to share the amazing journey with you!
If you would like to offer feedback or would like to connect, please feel free to do so!
