In a 24 hour Hackathon Challenge. We redesigned the EA App homepage to be more gamer centric. Successfully completed the hand-off of the hi-fidelity interactive mock-up to web developers to create a fully functional website.
Gaming is one of the largest industries in the world and has a major influence on the future of tech and entertainment. As consumer preferences change, games and platforms shift to align with what customers want.
EA recently replaced its legacy gaming platform, Origin, with a new platform: The EA App. The EA App promises to be faster, more automated and a better overall experience for gamers. It also connects with other services to provide a seamless experience across multiple popular platforms.
The Next 24 Hours
A 24-hour collaborative design sprint, challenging BrainStation UX Design & Web Development students to create digital solutions for Electronic Arts.
This could look like:
- An online community accessed by users where they can
connect and share ideas - Giving users the opportunity to shape their own playing
experiences - A resource or education portal for users to learn more
about the platform and games - Anything you can create!
The Deliverables
Our team needed to complete the challenge and provide the following deliverables within the next 24 hrs
- Hi-fidelity mockup
- Proto-persona
- Figma wireframe
- Functional Multi-page site
- Interactive widgets
- Insights dashboard
- Presentation slide deck
Identifying the problem space
As a team we started with whiteboarding, trying to understand and identify the problem we were looking to solve and how EA and their user base could benefit.
We asked questions like:
- Who would want to download the new EA App?
- Why would they want to download it?
- What are existing users saying about the current app?
- Would they even want to adapt the new EA App?
- What other existing gaming services offer similar solutions and how do they compare?
- What is currently working well for EA and their competitors and what isn’t?
Product Evaluation
Accessing the EA app
We started our research by assessing the EA app. We wanted to find out how people accessed the app?, What information was available about it on the EA website? and What the app was used for.
While evaluating how users find out about and access the EA Aapp, we found that the EA homepage only provided a small notification on the bottom right corner (which would not show up sometimes for some the designers) to let users know that the new EA App was replacing the old Origin app.
We also discovered that the new EA App was only available to Windows users and that Mac users would have to continue using the Origin app and would have the EA App available to them soon.
EA App page
After following the notification we were lead to the EA app page.
The EA app page provided a good overview of some the new features, notified Windows users that it was available for them and provided a great long FAQ of why they were converting Origin to the new EA App and how it would benefit it’s current user base.
We found that even though the EA App page highlighted the app features really well for current Origin users it did not address new users who may be downloading the new EA App for the first time.
We also read some scathing online reviews about the current origin app and many complaints referring to the EA customer service.
Additionally we found that even though most of the complaints were customer service related. Often it would be about a frustration the gamers had with their specific game.
Online Reviews
Netflix
Due to time constraints we would not be able to conduct target user interviews so we turned to our individual households to get some insight as to what the EA App is and how they access content on the app.
One of idea suggested to us was that the EA app is like a Netflix for but for gaming.
Amazon Prime
Considering our feedback from our household members who may be casual gamers and had used gaming services possibly even EA services at least once, we started to explore which other services offer similar experiences.
We started to also review Amazon Prime as it had both movie and gaming service catalog.
Epic Games
We looked at several video and gaming services that offer a subscription service model for movies and gaming including epic games.
Xbox Game Pass
Steam, Xbox Gamepass and PlayStation Plus were some of the services that were highly recommended.
After the product evaluation and competitive analysis we created a list of possible ideas that would best address the users needs. But quickly found out that some our ideas may not be possible given our time constraints.
During our exploration phase after everyone had a chance to suggest their ideas. We started to vote for what everyone thought would be the best way to have the existing EA userbase to adapt the new EA App.
During a discussion between designers we realized that we needed to include the developers in our conversation as we would need their input to find out which idea would be possible to make give our time frame.
After voting for solutions that all designers thought would be the most impactful to the user, we turned to our developers for feedback.
As designers we wanted to know if our suggested ideas were possible to code and make functional as all deliverable needed to be completed within the 24 hour time frame.
We found out that some of our ideas even though they were possible to code, it would not be fully functional as they would require a complete backend system to be built which was not possible within the given timeframe.
Receiving feedback from the devs, we made a “can and can’t do list” guided by what the devs would be able to create given our tight deadline.
User Feedback
After receiving feedback from the developers and understanding what they could build in the short period of time. We put all of the possible solutions we could make on a design prioritization matrix. This was to determine which feature would add the most value to the user and how much effort they would take to make. But the most important consideration was if our devs would be able to build a fully coded functional product.
Guided by our discussions and voting process the prioritization matrix clearly showed that redesigning the EA App homepage would be the best added value to the user as it would focus on the games they want to play using the platform and would encourage them to download the EA app to do so.
It would also be the best option we could design and have completed by the devs.
Gaming focused
Narrowing down our design solution we started to gather inspiration from other platforms and similar services. During our ideation phase all of the designers started to adapt a more gamer centric mindset. We realized that the reason any user would want to download the EA App was if the game they wanted to access would be available and easily accessible through the platform.
Informative
Reviewing other services like Steam and Amazon we also realized that users would have a lot of questions before adapting the new platform and would want to have the answers in one place. In addition to having the FAQ at the bottom we also wanted to incorporate a FAQ link in the main navigation bar.
Wireframe
Being on a time crunch we spent a little bit of time sketching but mostly focused on the main structure and wireframing of the design.
In our discussion with our project manager, we were also told that we would need to give the devs 7-9 hours to fully code and develop our design and that it would be best to provide them with the main structure as soon as possible so that they can get started.
After each designer had time to work on a feature they would like incorporated we were able to hand-off our initial wireframe to the developers to start the development process.
Medium Fidelity Mock-up
Passing the main structural setup to the devs we started to add medium fidelity elements to our wireframe design.
Gaming focused slider
Establishing our assumptions and constraints our design group knew that we had to quickly
Connect with friend features
Passing the main structural setup to the devs we started to add medium fidelity elements to our wireframe design.
Updated FAQ location
Being on a time crunch we spent a little bit of time sketching but mostly focused on the main structure and wireframing of the design.
In our discussion with our project manager, we were also told that we would need to give the devs 7-9 hours to fully code and develop our design and that it would be best to provide them with the main structure as soon as possible so that they can get started.
After each designer had time to work on a feature they would like incorporated we were able to hand-off our initial wireframe to the developers to start the development process.
Interactive parallax effects
Passing the main structural setup to the devs, we started to add medium to high fidelity elements to our design. Taking the EA design language and branding into consideration, we started to add gradients, gaming related graphics and other visual elements that would enhance the user experience.
At the 9 hr point we were also asked to start thinking about identifying and collecting assets for developer hand-off.
Web page structure
- Having had class all day and then starting the hackathon our group had a very little chance to rest. But we knew that once the design part is completed the web devs will take over and we will be able to rest.
- Little did we know that after the initial design we would also have to start to create individual assets of images and provide jpgs and pngs to the devs.
- Having a bit of knowledge of web design and getting some help from the devs, from 10pm to am we started to take our design apart and exporting images from Figma and creating a file structure and naming convention to that would be easily understood.
Final Prototype
Our final design solution and prototype highlighted some of EA’s AAA game titles the users are familiar with. Our goal was to make the EA App page to be more gamer centric. This would naturally draw users to their favourite titles as they would already be familiar with them and would trust and be willing to adapt the new EA App.
EA App homepage redesign presentation
After ideating, prototyping, exporting all of the assets to the developers and only getting a few hours of sleep we only had a couple of hours in the morning left to submit our project, design the slide deck and rehearse our presentation. With the deadline fast approaching the whole team started to put together the content but luckily Niki and Scott had already started to prepare the layout, to which we were able to add our portion of the content to.
We were all very nervous going into our presentation but our wonderful judges and BrainStation instructors and support staff made us feel really comfortable and had some great feedback about the project. Specifically about all of the things that we did well and some of the things we could improve.
Challenges
- It is difficult to understate the challenges that our team faced during this hackathon.
- Considering we only had 24 hrs to come up with a solution. Initially we lost one of the members from the web dev team
- As designers we were told that the devs would need at least 7-9 hours to develop the final prototype
- Keeping all of the constraints in mind we had to provide the web devs with the main structure that they would build from that could not be changed later.
- Additionally our team decided that our final output would be a interactive prototype in a fully functional website that the web devs would build in react.js
Impact
- We were told that the gamer centric approach was a great idea from the EA judges
- Our parallax effects and use of EA assets were highlighted because we utilized the existing system to best use our time
- Our project manager admired that we incorporated the devs into our design decisions early to understand what could be completed in the time frame we were given
- At the beginning we did not understand the level of expertise of our devs or what they would be capable of building but after speaking to the devs we understood they expertise and interests
After spending the last few hours exporting assets we only had a couple of hours to come up with the slides and present our project in front of the EA panel of judges
Key Learnings
- It is essential to keep all of the team members in the loop to ensure the success of the project.
- Ideally we plan and try to follow the plan personal of unforeseeable circumstances come up and that is where I feel the real creativity shines and one forced to critically think and figure out how they can solve their problems.
Next Steps
- Would love to explore additional options and talk to gamers who use the current origin system for insights to the the type of features they would like to see on the app.
- I would also love to talk to EA judges about how they decided who the winner was so that I can know what I could improve and incorporate in my projects..
