Time Out x Time Stream
A conceptual design sprint in the live streaming sector
The Challenge
This was part of a course at General Assembly — we were working in a group of four.
Our brief was to create a new live streaming service to sit as part of Time Out’s website.
Key requirements included:
- Users should be able to browse and sign up to all sorts of live events.
- Users should be able be able to connect with their friends and arrange to go to live streamed events together.
- Groups of users should be able to interact with each other in a virtual space before, during and after the event.
- Users should be able to interact in various ways during a live stream, such as video, voice and text.
What I learned
- Working to a specific client brief
- Competitive Research
- User Research Interviews
- Design Studio Workshops
- User Testing
- How to work effectively in a team of UXers
Tools used: Figma, Miro, Zoom, Paper and Pen
My role in the group
My background as a music publicist was particularly useful for writing engaging copy for the final product, and creating user interview questions.
We were all involved in ideation, and I helped with the hi-fidelity stage of design, but I was lucky to work with a photographer who went above and beyond in terms of polishing the final visuals.
The team included someone with a legal background who had an astute awareness of real business needs, and a marketing professional with a creative approach.
After the project the group let me know they valued my ability to prioritise and keep the team on track, as well as mediate between conflicting viewpoints.
Competitive Research
We looked at 11 competitors, including direct and indirect.
Of particular interest were Twitch, Discord, Dice and Meetup, in the differing ways they onboard users and facilitate live events.
We found that all competitors we looked at offered a chat function, full screen option and sharing capabilities.
A majority included recommendations based on previous streaming activity, and several used limited colour palettes and dark modes, presumably to reduce distraction while viewing.
User Interviews
To identify user needs, we spoke to 15 people in the 18–30 year old demographic.
After affinity mapping the findings, the key takeaways were that participants felt that:
- Virtual events are often too rigid and structured.
- People talking over each other and or busy chat boxes can be overwhelming.
- Users felt events were often anticlimactic.
Participants missed aspects of real-life events, with one telling us:
“It’s about the whole experience before, during and after the event”
Persona
We pulled our research together into a persona to represent out typical user:
& put together an Empathy Map to dig deeper into her experience:
Problem Statement and HMW
To focus our efforts, we came up with the problem statement:
Joni needs a fun and engaging way to to connect with her friends because they’re all tired of standard Zoom calls.
Using this statement as kickoff, we thought about how we might tackle this problem, settling on three ‘how might we’ statements:
How might we create the buzz and build the same excitement before a virtual event?
How might we personalise the experience?
How might we create a social environment at all stages of a virtual event?
Design Studio
We took these statements into a Design Studio session that I facilitated. We had short amounts of time to come up with 6 drawings possible solutions, dot voted on the features we liked, then combined the best ideas into one solution.
The mix of divergent and convergent thinking in this method helped us pull out some really cool ideas!
Feature Prioritisation
With way too many ideas than we could feasibly implement, we had to narrow things down.
Measuring impact v effort on an axis helped us focus:
Features to prioritise included:
- Private video chat with user’s friend group
- Personalisation
- Separate volume controls
- Multiple Rooms
- Messaging
User Flow
We put together flows for ticket purchase and in-event scenarios — as it became clear that each process had it’s own needs and nuances:
Site Map
This site map shows how the pages will sit within the existing Time Out site.
Our aim was to provide a seamless service that would leverage the users existing trust in the established brand:
Paper Sketches
We out our ideas together from the Design Studio, with one member of the team sketching a prototype on which we conducted 4 user tests.
Key findings included:
- Confusion on what features were and how to move around the site.
- Users wanted to move around freely and control their screen setup.
- Navigation was unclear.
- Terminology wasn’t consistent and caused confusion e.g. Waiting Room, Lobby.
- Anxiety experienced due to the countdown clock, and being unclear how they will enter the ticketed event.
Ideation
We continued to test on users while iterating through mid and hi fidelity prototypes.
The initial room the user is in was changed due to feedback such as:
“I don’t know which room I am in..?”
“Can I move between rooms during the event?”
“Why can’t I get into the VIP room? It’s locked…”
We added soft on-boarding and ‘Room Selector’ tabs, as well as swapping a ‘VIP Room’ for a backstage area anyone can access at any time.
We initially had a ‘games room’, however this caused confusion and so a quiz about the artist was added to the backstage area to try to increase engagement without this issue. Comments had included:
“I don’t understand how this works. Do I play by myself?”
“Who am I playing with? Are these strangers or are they my friends?”
“I’m here to see an event, not play random games.”
Another key feature was the group chat — a key part of the brief in terms of communicating during the event. We changed several aspects based on feedback such as:
“Confused by the minimize button “Can I play my messages?”
“Mixed feelings about DM’s. “We’re here as a group.”
“Who is in the chat? Everyone at the event? Or just my friends?”
The Solution
Click through to the prototype of the Time Stream service, from ticket purchase through to the event itself.
Next Steps
- Adding the ability for users to see what room their friends are in e.g. using icons or a map.
- Adding capability for people attending along to join others with similar interests.
- Creating a broader social network for users to see what their friends are attending and recommend events to each other.
Key Learnings
- Too many features on a page can be confusing for the user.
- Terminology is key in helping the user know what to expect (our ‘lobby’ didn’t do this)— as per Nielsen’s 2nd heuristic “Use words, phrases, and concepts familiar to the user, rather than internal jargon.”
- It’s important to think about the needs of more than one type of user — in this case catering for people who like to chat during a gig, and those who find this too distracting.
Reflections
Overall this was an incredibly useful experience for me in developing the skills needed to solve user problems effectively in a team.
It was difficult to narrow the scope of features and ensure that we were achieving deliverables whilst ensuring we kept our focus where it needed to be — on the user.
