Discovering new insights on designing for accessibility through user research.
For this project, I was challenged to explore different ways to design an app with accessibility in mind.
I chose to design my own app called “Live Beats” instead of redoing an existing one, similar to popular music streaming apps. To find problems to solve, I made user journey maps and did a competitive audit to find common accessibility issues, create problem statements, and iterate on solutions.
This project emphasized user research in order to gain new insights on how to design with accessibility in mind.
80% positive feedback on visual design and ease of navigation.
Accessibility features were embraced by all types of users.
Designed UI compliant with WCAG guidelines.
Results Snapshot:
Roles:
Research
Design
Conceptualisation
Usability testing
Tools:
Figma
Wireframing & Prototyping
User journey maps
Timeline:
3 months
01 - Defining Goals
Digital streaming platforms are constantly growing and expanding their content to other forms of audio entertainment, such as podcasts and audiobooks.
However, this breadth of content has its cons:
Lack of accessibility in visual design.
Cluttered layouts that make navigation and ease of use difficult.
To tackle these issues, I came up with the following project goals for the design:
Implement features that support visually impaired users.
Create a visual design that adheres to Web Content Accessibility Guidelines.
Conduct research to find out what designs work best and test them for accessibility.
Animation of the user flow for purchasing a ticket on the app.
02 - Studying how competitors utilize accessibility.
I created a spreadsheet of popular digital streaming platforms and ticket marketplaces and compared their pros and cons to identify areas for improvement:
So, who won the award for Best Accessible App?
Let’s look at the key insights from the audit for answers:
Apple Music had the best accessibility features such as Siri voice command integration.
Spotify had the best visual design and interactive features.
Soundcloud had the best UI and organization of content.
With these insights in mind, I plan to take the best accessibility ideas from each of these apps and include them when wireframing and prototyping.
03 - With all of that data from our competitors, let’s add the must-have accessibility features in our wireframes!
There were two design choices in particular from those apps that I absolutely had to include:
At the time, I found this layout to be more popular with desktop websites but still wanted to try it on a mobile app. The most interesting pieces of content should be displayed first to ensure engagement, with the “See all” cue visible to give users the option to explore more of that category.
Since then, I’ve seen music streaming apps adopt a more streamlined layout with carousels that allow for multiple pieces of content to be shown with interactive motion gestures.
I’ve seen this feature used more in Apple CarPlay user interfaces for vehicles, and I briefly saw something similar on Spotify for iOS a couple of years ago but I don’t believe it’s been utilized anymore. I personally think it’s a neat icon to have and wanted to test how it would look on the app to give users a hands-free option for searching songs.
04 - All of my research and planning has led to an initial design. So what to do with all of this data?
It’s time to do more research actually, but in the form of a usability study. I have a theory that needs testing before I move forward with this design:
My hypothesis:
By incorporating these features to the app and keeping accessibility in mind, users of all types will be able to easily navigate the app, search music and create playlists, and purchase concert tickets quickly.
To test this, a low-fidelity prototype was created in Figma and a usability study with 5 participants was conducted.
Each participant was sent a link to the prototype and given a short list of tasks to complete that would expose them to different user flows (such as “create a playlist” and “purchase a ticket to the featured concert”).
If I am correct, a high-fidelity mockup will be created and tested as well to provide more insights on how accessible the app is with users.
Here’s what I found:
4 out of 5
participants found the prototype easy and intuitive to use.
60%
of participants were able to navigate the main user flows without getting stuck at any point.
5 out of 5
participants responded positively to the visual feedback cues when completing a task.
All participants
agreed that the font and buttons were easy to recognize and read.
So why is all of this important?
Feedback surveys show that the app design is user-friendly, but some adjustments are necessary to prevent users from getting stuck. (ex. a change in font size or button placement to make content more noticeable)
Feedback on the prototype’s visual cues also hint towards it being strong in engagement and retention, two key metrics in any design.
Overall, the first usability study was a success and my hypothesis was correct, so now I confidently move forward to the next step of making a high-fidelity mockup!
05 - This is my favorite part of the project! Adding color, buttons, and icons to create a high-fidelity mockup.
With my significant breakthrough in the user research, I dedicated the following week entirely to refining the high-fidelity mockup on Figma. This involved incorporating the feedback and insights gathered during the initial usability study, ensuring a user-centric and accessible design approach.
The style guide (below) was created to show both designers and developers the key components of the app’s design
See how all of these components came together in the high-fidelity mockup of the app below.
Final Designs:
06 - Another round of research! (Remember, the design process isn’t linear)
The interesting thing about the design process is going back to a previous step and redoing it with a fresh perspective. Since I have this shiny new toy in Figma to play with, I chose to do another usability study to test the same hypothesis from earlier and see if I truly did make improvements towards achieving an accessible design. The same 5 participants took part in the study.
Here’s what I found this time around, and my immediate response to the feedback:
Feedback:
Most users commented that the “Buy Now” button should be easily visible to users when browsing for live shows.
The checkout process was quick and smooth and every user was able to complete that task.
3 out of 5 users weren’t fond of the visual design or were neutral when asked if it looked good.
Response:
Moved the "Buy Now" button closer to the top of the page for quicker access, saving time scrolling.
Took note of how users reacted to the visual cues for adding to cart, selecting payment method, and completed the purchase to reference back later.
Used the WCAG website to determine if colors chosen adhered to accessibility guidelines and researched modern UI patterns to find areas of improvement.
07 - Wrapping up! Here’s what I learned from two rounds of user research and hours of reps in Figma.
Ease of Use
The product included a comprehensive ticket marketplace that effortlessly guides users in finding the best deals for their desired events.
The ticket purchasing process is simplified and provides valuable insights to help users make well-informed decisions.
UI Design needs some work.
The app achieved accessibility by adding vibrant buttons and an organized layout, making it easy for users with mobility or vision issues to navigate and find information on music artists.
However, the UI looks outdated by modern standards and great strides must be taken to improve it.
Accessibility helps everyone!
Accessibility considerations make a better experience for all users. Most of the praise for the accessibility features came from participants who are in no way visually impaired.
Color palettes were audited for accessibility via the WCAG website.
Whenever I decide to revisit this project, I would like to do a competitive audit on ticket marketplaces like Ticketmaster as part of my research and take note of any ways they have made their app more accessible for users.
I would also seek feedback from developers on design feasibility and assessing the Figma components I created for consistency. I want to always be a designer that works closely with the developers for collaboration.
Finally, I would use another research method such as the five second test to measure first impressions of the app’s home page and hopefully get more feedback on how to improve accessibility in the user interface.
Reflections and Takeaways:
Next Project: