Project overview
The product:
A Website for a fictional rockband with an inbuild
ticketing option.
Project duration:
April - May 2023
The problem: People will be redirected to another online plattform when they want to book tickets on their favorite rockbands website
The goal: Design a website for a fictional rockband with an inbuild ticket booking option
My role:
As designer my role is to create a Website for a rockband that offers an inbuild ticket booking option
Responsibilities:
Conducting interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies (2), accounting for accessibility and iterating on designs
User research: summary
The product:
I conducted interviews and created empathy maps to understand the users I’m designing for and their needs. A primary user group identified through research were people that have a favorite rockband and book concert tickets on a regular basis.
This user group confirmed that they will be redirected to a booking website when they visit their favorite rock bands and can not book the tickets within the bands website.
Pain points
Focus
Many Bandwebsites are overloaded with too many information.
Accessibility
Music bands website don’t offer many assistive technology.
All in one Solution
Websites of music bands offer some services on another plattform (ticket booking, merchandise etc.)
Starting the design: Paper wireframes
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points.
Digital wireframes
As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research. Additonally i used the Gestalt principles to group content and elements.
Low-fidelity prototype
A low-fidelity prototype has been done. Afterwards I conducted two usability studies. Findings from the first study helped me improving the overall user experience going through the design process and improve the design for people with impairments. The second study used also a high-fidelity prototype and revealed aspects that need to be improved for an easier navigation and better user experience.
Round 1 findings
1. Fonts too small
2. Color contrast needs improvement
3. More options to home screen
Round 2 findings
1. Progress bar to improve user experience
2. Adding more payment options
3. Add basket icon for quick access
Round 1
Round 2
Refining the design: Mockups
The goal was to give the shop items a lare apperance on mobile. Except for the desktop mode the information of the items are written under the picture and not on top of it. The buttons are in blue color compared to the overall black and white design to emphasize the option to buy merchandise.
Before usability study
After usability study
After conducting the usability study a progress bar was added and the color of the order process button is n now blue to improve the overall booking experience.
Before usability study
After usability study
Accessibility considerations
1.
Provide optional font-size adjustments and more space between the menu items to improve the user experience for people with visual impairments.
2.
Progress bar helps people knowing the status of the order and gives them more satisfaction.
3.
Better contrast ratio between foreground and background for improved readability.
Takeaways
Impact:
An inbuild ticket booking option on a users favorite music band is more comfortable to handle rather then being redirected to an external booking page. The time on task KPI can be tracked fully because the whole booking process takes place on a single website.
An inbuild ticket booking option on a users favorite music band is more comfortable to handle rather then being redirected to an external booking page. The time on task KPI can be tracked fully because the whole booking process takes place on a single website.
What I learned:
I learned that a usability study is key to improve the design heavily which resulted in less design iterations. The feedback of the users is fundamental for UX-Design.
I learned that a usability study is key to improve the design heavily which resulted in less design iterations. The feedback of the users is fundamental for UX-Design.
Next steps
1.
Testing the website to see if the user flow is given, the overall website is easy to follow and helps the visitors to perform a task successfully.
2.
Improving the user experience by optimizing loading performance.
3.
Adding more options to improve AT. Considerations: Dark-and lightmode for the Interface, font-size adjustment. Screenreader, booking via Audio.