Concert Crew
Depaul University HCI 430: Prototyping and Implementation
Problem
Going to a concert alone can be a stressful experience for some people. The idea of standing alone in a sea of people or not having someone to share the experience with can turn a fun night into a daunting one.
​
Solution
Concert Crew is a social platform designed to connect others who are attending the same concert event. Whether you're looking to meet new friends with the same music taste or your friends can't make it, Concert Crew allows you to connect with other users known as "Crew" before the concert.
A high-fidelity interactive prototype for both mobile and watch interface was created based on our usability testing results.
Concert Crew will allow users to:
-
See others who are attending the same concert, as well as meeting locations, show details, and venue maps.​
-
​Communicate with attendees and share and view their location and seat number.
-
Meet others who share the same musical taste
-
Rate the concert and share media with others
​
My role ​
-
Created Mid-Fi prototype and iterations for mobile
-
Oulined task prompts for Mid-Fi testing
-
Collaborated on the Hi-Fi prototype for mobile and design charrette
-
Conducted user testing
​
Timeline
-
12 weeks
Design Charrette
In order to begin the ideation process, a five-minute design charrette exercise was conducted to stimulate new ideas.
Tools: Pencil and Paper
Technique: Design Charrette and Low-Fidelity Prototyping
User Personas & Scenarios
Once the ideation was completed, personas and scenarios were created. Our two main users were frequent and infrequent concert goers.
Tool: Canva
Technique: Personas and Senarios
With approval received, the next step was to design a Mid-Fi prototype. Using Axure, the three main tasks of the application were focused on the before, during, and after stages using Concert Crew.
Tool: Axure
Technique: Mid-Fidelity Prototyping
Below are the Mid-Fi prototypes. Press the arrows to view each interface.
The transparent green circle represents the correct user path to get to the next screen.
Before the concert
During the concert
After the concert
Task 1
Task 3
Task 2
Watch interface
Task 3.1
Task 4
Mid-Fi interactive iteration #1
Moderated Usability Evaluation
With the Mid-Fi prototype completed, the usability test plan was created. The task prompts that were created represent the three main flows of our Mid-Fi prototype: before, during, and after the concert.
Five users participated in the usability test sessions.
Tool: Moderated Usability Evaluation, Usability
test plan​
​Technique: Zoom, Axure
​​​​​​​​
Findings
​Users liked Concert Crew’s general layout and clarity. Users also appreciated the placement of basic information.
The watch app was generally simple. However, we found several points for improvement, notably on the mobile application:
-
For task 1, some users accessed the search page and others did not so they used the homepage to browse.
-
For task 3, users were unclear on how to complete Task 3 and were not able to view attendee details.
-
For task 4, almost all users found it difficult to reach the page to create a post
​
Ease & Accessibility
-
Make the transitions between each show screen (before/during/after) more prominent by increasing the clarity of the button to complete the show.
-
Add simple directions below headlines (i.e. click on a user to see where they’re sitting)
-
Increase the prominence of buttons, especially the search button
-
Increase interactivity/add an alternative route to complete tasks, notably for seeing attendee details/messaging
​
Features
-
The button to chat with users should be available at any time the attendee is visible on the screen
-
Add an option to purchase tickets to the show on the settings page, or link to an external purchase website
​
​
Mobile Design Changes
Homepage
-
The search button is more prominent for our users.
Meet up details
-
Changed "Attendees" to "Crew"
-
Made "Mark as complete" more prominent for users.
-
Changed "Mark As Started" to "Mark As Complete"
-
The "Crew" section is clickable.
Crew list
-
Delete "Mark As Complete"
-
Added "Click on a crew member to get directions!" for more clarity
Settings page
-
Added a Settings page
-
This page will allow users to:
-
Purchase tickets from an external site.
-
Invite Friends.
-
To leave the group
-
Watch Design Changes
-
Changed "Attendees" to "Crew"
Mid-Fi interactive iteration #2
Based on the insights from mid-fidelity testing, high-fidelity prototypes were created. The three main tasks of the application were focused on the before, during, and after stages using Concert Crew.
Tool: Axure
Technique: Hi-Fidelity Prototyping
Below are the Hi-Fi prototypes. Press the arrows to view each interface.
Onboarding
Before
During
After
Watch Interface
Hi-Fi interactive iteration #1
Learnings and what I could've done differently
After completing the prototype and usability evaluation on Concert Crew, there are some aspects that I would have done differently, such as:
-
Conduct a round of usability testing on the second iteration of our Mid-Fi prototype. Before moving on to creating the Hi-Fi prototype, another round of testing would've been beneficial to see if our design changes were effective.
-
Increase the sample size of our target audience. Recruiting more participants would help validate the findings for all tests that were conducted.
-
Conduct surveys and informal testing. Conducting surveys and interviews before usability testing will help me better understand user pain points and their preferences regarding socializing during concerts. ​​​
​
-
Conduct usability testing on our Hi-Fi prototype.​ This would give me insights into how our users react to new changes and see if any new complications occur. This will ensure the success of Concert Crew.​
​
-
Block, and user verification feature. Block and user verification features should be implemented for users who prioritize safe and real interactions. This will help broaden our audience.
-
Selfie and ID verification for onboarding
-
Block and report feature
-
Read more of my case studies and design work
