ReCore
The Goal: To create a game announcement site for ReCore for E3 that could grow as the game was developed and serve the fanbase after release.
Idealogy: Fans come first. We wanted to encourage fan content, social media, cosplay, streaming, and blogging.
Challenge: 3 weeks to deadline and only 2 pieces of art for the game were ready!
My Role: Information Architect, Lead UI/UX, Art Director. I led this team: Design, Development, Project Management, and Client Interface.
Microsoft Studios: We created a dynamic site that could expand as the game developed. Over the next year, the game and the site developed in parallel. Some of what was created for the site made it into the game. As pieces of art were complete and aspects of the game animation were developed, we were able to incorporate the true essence embodied in ReCore.
Extras: I designed animations for the site to bring it to life. Things like sand blowing in the background, or game cues that move and light up. I kept these subtle to ensure we were presenting characters and info as the priority. You can see these details on the site by clicking the link at the top of this page.
PLANNING
1. Identify Key Desires:
I used a different approach. I began to research other games with the kind of fan base we were seeking. I narrowed our choices to 4 games that we wanted ReCore's fanbase to emulate and why. What floated to the top was 1 key element per game.
2. Competetive Analysis:
The results turned out some key Architecture, features, social connectivity, and player specific areas that give each of these games the rabid, loyal, long-term fan base that ReCore deserves.
3. Personas:
The Personas pictured here are very stripped down versions of what I had to work with. After some research with the User Testing team, I decided to add an additional Persona who would discover the game in the community through social media or cosplay events. That is Xiawan.
INFORMATION ARCHITECTURE
4. Card Sorting
I gave each person topics on post-its and asked to also add topics that weren't listed. They were asked to organize the topics into categories that we had already defined through research. As a group, we evaluated each feature placement and compared them to some top gaming sites. UX, Dev Team, and PM Team all took part resulting in a starting point for IA.
5. IA Overview:
I needed an IA Overview because it helps me get a bird's eye view of my thoughts without getting lost in the weeds. In this case, it also also helped me communicate with the Dev team the back-end needs the site would require.
6. UX Flow Chart:
After my meeting with the dev team, it was important to show The ReCore Team that there wasn't time to create everything they wanted before E3. I was able to show them that things like private accounts and forums would delay the project. These things were added shortly after E3.
WIRE FRAMES
7. Wire Frame:
I organized the info for 3 different layouts into wire frames to show the ReCore Team. We guerilla tested all 3 layouts around the office to make the decision. You can see what we decided upon in the final design below. We focused on keeping it simple, making it a fan first design, and took out everything that would slow down development.
8. First User Test:
After E3, we were able to focus on User Testing and improvements. The announcement had been a hit. In order to grow the site in a way that would appeal best to the fan base, I partnered with an internal team that does User Testing at Microsoft. Together, we were able to get make fruitful changes and additions.
FINALS
9. Final Designs
I did everything iteratively to ensure that we would grow with the fan base. The website did its job, expanding to show more and more of the game as it was developed. We added character profiles, a sign-in, and forums amongst other things. Some of the elements and animation themes I created for the site ended up in the final cut of the video game. This entire experience was so much fun.
News Page
Character Page
