Project Overview
For our first team project at General Assembly we were given the task of re-designing the user experience for ListenBoldly. The official app of the Seattle Symphony lets users find events and buy tickets.
The Challenge
The landing page gives no information about the event shown and major features (including account information) is hidden behind a hamburger menu. Once an event is chosen, there is no way to filter seats by price or group availability. There is no further information on seating. Selecting a seat and adding that seat to the shopping card is quite cumbersome.
The Solution
Showing more events and information on the landing page, being able to apply filters to events to narrow down the search, streamlining the seat selection with a focus on accessibility will improve usability.
My Role
I was the Visual Designer in a team of four. On my team were Sam Beattie (Project Manager), Mary Walton (Researcher) and Aaron Fredrick (Interaction Designer).
Tool
Photoshop
RESEARCH
We researched apps and websites of other symphonies and opera houses, as well as websites that sell tickets. Below are some apps we looked at to explore features and for a visual comparative analysis:
PROTO-PERSONAS
Our team members individually created a persona as a target audience for The Seattle Symphony. This is mine:
“Carol, 53 years, 4-year-old grandson, research assistant at UW
fairly competent user, but doesn’t follow trends right away, takes her time before using new technologies
She has an active social life, likes to go out with friends and her husband. She often babysits her grandson and likes to take him out to events in the community. She volunteers at a neighborhood art festival and is part of a small theater group that puts together a play each summer.
Carol enjoys performances, going to concerts and theater, she has a busy schedule and has not used an app to purchase tickets at the symphony, she uses the website instead. She needs an app that is easy to navigate and gives her all the choices and information she needs to make a decision. Due to her age, she prefers information and buttons of a certain size.”
I used the four personas our team created and merged them into two proto-personas.
Mary, our researcher, used these proto-personas to inform her research strategy. We decided to focus on Kathie for the scope of our project.
Sketches
We had decided that the most useful approach would be to improve the seating selection. It is a major pain point in the current app and a crucial part of the purchasing process. Some of my sketches:
Design
The Seattle Symphony logo looks a little outdated and is not used in any new publications. Instead just the words "Seattle Symphony" is used (capitalized). The main colors are black, white and magenta.
Potential new color schemes:
Based on Aaron's wireframes, I started to create high-fidelity mock-ups.
Iterations of design and landing page:
I tried hues of magenta and black, and toned down images, but decided to keep it clean and vibrant. The final look reminds me of a brightly lit stage.
I experimented with rounded corners, but then kept them straight to keep keep in line with HIG heuristics.
Filter icons: We tested different symbols, but the carat was most easily recognized.
I added black overlay over images to accommodate longer text and lighter background.
Icons were moved off the pictures, to the event page for a cleaner look.
Colors: I used magenta for highlights, blue for actions.
The high-fidelity mockups:
next steps
- Improve filters and search on landing page
- Offer alternative ‘list view’ when finding seats
- Continue revisions of the ticket purchase flow into the actual checkout process
- Improve the ability to curate a recommended event list
- Pick specific event tags, (pop culture, featured artists, etc.) to track and receive notifications about
What I learned
- Make sure the visual design is included earlier in the process.
- Ask for more team meetings. They can be short.
- Include visual design in the competitive analysis, if appropriate.