Building an E-Sport Community to Increase Product Adoption
EA SharePlay automatically captures players’ best moments and creates highlight clips. Players can then simply share the clips with their friends on their new personalized profile section.
My Role
Team Lead and Product Designer
Project Type
Hackathon Project in a Team (3 web developers and 3 designers)
Methodology
Double Diamond Design Process
Tools
Figma, Secondary Research, Google Docs, Zoom, Slack
Project Timeline
24 Hours (December 2022)
The Problem Space
Electronic Arts (EA) develops and delivers games, content, and online services and brings infinite possibilities to nearly 600 millions players and fans worldwide.
EA recently replaced its legacy gaming platform, Origin, with a new platform, the EA App as the EA App has a faster and more automated and better overall experience for gamers. and provides a seamless experience across multiple popular platforms.
The design challenge that was given to us was:
How might we ensure the EA app is adopted by current Origin users?
My Design Process
Before the hackathon, our team, Team 405 Found, had two meetings for team bonding and discussing logistics. During these meetings, we discussed our strengths, established ground rules, and created a rough timeline to ensure the developers had enough time to implement the designers’ designs.
We used the double diamond process to tackle this design challenge.
Please feel free to explore all the steps by clicking on the corresponding emoji!
DISCOVERY🔎
The first stage is discovery, in which we separately did secondary research to explore the problem space.
Secondary Research
Given the super tight time constraint, we focused on secondary research. The team separately conducted research to understand the EA brand, EA’s users, the gaming industry, the psychology of change, and compared the Origin app with the EA app.
Using the Technology Adoption Lifecycle
Using my marketing background and UX knowledge, I focused on user research. As the EA app was launched in September 2020, I applied the technology adoption lifecycle. We made the assumption that the app may only have attracted innovators and maybe some early adopters so far because the problem space for this hackathon was to adopt current users. Thus, to increase adoption, it’s important for EA to focus on early adopters.
Here are some key points our team identified:
💭
Early Adopters Are Thought Leaders
Early adopters are the most influential segment because of their well-informed and less risky approach
✍️
Early Majority Heavily Depend on Recommendations
The early majority is a sizable segment that is important for adoption. This group is careful about accepting change and aren’t quick to try new technology. They often rely on recommendations from those who have used the products already.
🎮
Connecting Through Gaming
Majority of young players prefer to play as part of a team and play with friends. Multiplayer formats keep gamers engaged through social interaction and a sense of achievement.
👎
Negative Reviews
EA origin app has 1.5 star reviews. The main reason why users are refusing to switch over to the newer app is because they think that even though Origin has many bugs, the EA app would be worse.
❤️
Lack of Personalization and Community
One of the main pain points current players experienced was feeling the lack of personalization and sense of community in the new EA app. One EA Answer HQ user suggested new social features, such as expanded player profiles.
SYNTHESIS📝
The next stage is synthesis, in which we narrow down and defined the core problem using our research.
The Core Problem
After grouping our research, we identified the core problem:
Early adopters currently do not have a positive experience on the EA app and these people are influential. The bad reviews the early adopters leave can turn away the early majority, which is a sizable market.
Our Goal
To stay focused on our project, we came up with the project goal:
Provide a positive EA app experience for early adopters.
The New HMW Question
As many gamers, including the early adopters, value a personalization and sense of community, we created a new HMW question:
How might we ensure early adopters feel the EA app is personal and feel a sense of community in the EA App?
Proto-Persona: Meet Bob
To ensure our design is user-centric and data-informed, we created our proto-persona, Bob Laiton aka mrwaffles55.
Bob Laiton, EA SharePlay's Proto-Persona
IDEATE💡
Our next stage is ideation, in which we brainstormed solutions and sought out UI inspiration to help inform our design decisions.
Brainstorm
Our team brainstormed a list of ideas based on our more defined problem space. Here are some of our favourite ideas:
🏆
Personalized Profile
A personalized profile sections for users to share their achievements and connect with friends.
📹
Automatic Highlight Video
After users finish a game, the EA app will automatically make a recap of the players’ best moments for users to share.
🎁
Digital Gift Box
Send Origin users a digital gift box with a small gift and a guide to help with their adoption to the EA app.
💻
Pop-Up Within Origin App
When users encounter challenges, such as slower loading speed on the Origin app, a pop-up will suggest users switch to the EA app and highlight the new app’s benefits
To short-list our list of ideas, each team member got three votes. The personalized profile and automatic recap videos got the most votes.
As the two ideas go well together, I suggested combining the two ideas; users can share their recap videos on their personalized profile. My teammates loved the idea and that’s the idea we went with!
UI Inspiration
Next, while the development team set up, the design team created an UI inspiration board that highlighted personalized user experience, such as homescreens, homefeeds, as well as sites that displayed video and photo sharing screens.
.jpg)
UI Inspiration Board
Sketches
Then, we created sketches to explore our design ideas. After the exploration, we focused on sketching the home screen, the share screens, and the feed.
Sketches
PROTOTYPE 🔗
The final stage of the double diamond process is prototype. Prototyping allows us to share our ideas with the EA judges.
Prototype
To ensure the development team had enough time to implement our designs, the design team created a 6-screen high-fidelity prototype in a few hour based on our sketches. We agreed on the flow of playing FIFA and posting a highlight video to focus on the screens directly related to video sharing and the profile section.
The designers created each element of the existing screens from scratch, including the icons, as EA uses customized icons that were not shared with the hackathon participants. We tried screenshotting from the existing app but the quality was too low for the development team to implement. The designer team also designed our own screens to add that were consistent with EA’s existing design guidelines. We created a components library so we can easily share the components with the development team.
Please feel free to try EA SharePlay below!
IMPLEMENT ✅
The talented development team implemented the design team’s solution.
Prototype Comes to Life
I believe one of the main reasons behind our success teamwork is the constant communication between the developers and designers. The designers hand off our designs while simultaneously continuing to work on other screens and the developers constantly share their progress and ask for feedback.
Our teamwork was evident to the judges. One of the judges asked the all the different teams about their teamwork and for our team, she said “I am not going to ask about your teamwork as it’s clear that your team has exceptional collaboration”.
Coded Prototype
Here is a video walkthrough of the coded prototype that the development team created!
OUR SOLUTION: EA SHAREPLAY 💻
I am proud to present our final solution, EA SharePlay!
Our solution, EA SharePlay, records highlights from the user's games. Then, the user can simply share the clips to their personalized profile section where friends can connect! The goal is to improve the sense of community within the app and encourage more interactions between users.
Key Features
The two main elements of our ideas are the highlight clips and the personalized profile section.
Highlight Clips
Highlight Clips Design Decisions
Personalized Profile Section
.png)
Personalized Profile Section Design Decisions
HACKATHON RESULTS 🏆
The hackathon was a success with our team placing first!
Winners!!
I am proud to share that our team, Team 405-Found, placed first place in the BrainStation x EA hackathon out of 10 teams!
Positive Comments
In addition to winning the hackathon, our team received many positive feedback from our educators and the guest EA judges!
The group showcased a fully functioning app - I’d say the most impressive app
I like the UX storytelling. “Bob is lacking community” immediately drew me in more than any other presentation
Prototype is well designed, and the build translation is excellent.
Effective consideration of the user by creating a persona.
Strong energetic opening remarks and introduction. This is a team of very strong presenters across the board.
REFLECTION 💭
As a resilient life-long learner, I learned through overcoming challenges with my team.
Key Learnings
Apart from the strong friendships we developed from this hackathon, another takeaway is our learnings.
💬
Communication is Key
Having clear expectations, respectful communication, and allowing creative freedom helped set us up for success and allowed us to work extremely well together.
💻
Handing Over Assets in a Clear Way
As designers, it’s important to hand over assets in a clear way. Some key points the design team learned is to name the files properly. For example, spaces in the filename are bad. Moreover, we developed a stronger understanding of the export function in Figma, such as the sizing (1x, 2x, 4x) and the file type (PNG, SVG, JPG).
LOOKING AHEAD 👀
Given the time constraints, we had to be picky with what to include in our process.
Next Steps
📊
Conduct Primary Research
We want to conduct primary research through users interviews and surveys to confirm our hypothesis of what users want
✅
Do Usability Testing on Current Prototype
We hope to conduct usability testing to identify any possible usability issues and gain feedback.
💬
Communicate with the EA Teams
It’s important for us to consider business and technical feasibility so we hope to communicate with the EA teams on what funding/resources they have.
💡
Explore More Ideas
We also came up with a few ideas that we didn’t get a chance to implement yet. We want to create a social media competition/ campaign for EA SharePlay, in which users can share their best highlight clips. This can be a helpful campaign for the launch of SharePlay. We also want to add more personalized game recommendations and a live feature for users to stream their game so they can share while playing, not just when they finish playing.