A video game being published by Microsoft needed a digital marketplace that would allow users to buy digital products and game add-ons both on the regular web and through the game interface itself. We decided that one global market was the best way to accomplish this, so the design had to be effective and intuitive in the browser as well as in-game.
I was the lead UX/UI designer for this and below is a case study of the design process.
Feel free to skip to:
- User journey mapping
- UI design for web and television
- E-commerce design
After receiving the project brief, my team and I conducted a user survey that helped identify the key UX issues we should focus on;
- Gaining user trust across multiple purchase platforms
- Creating a consistent layout whether in-game or on the web
- Designing a modular system that would allow for flexibility in the marketplace
From the feedback of our user surveys and through brainstorming features with my team, I created a hypothesis to follow throughout the project.
If we create a simple and modular store design, it will allow the user to seamlessly and comfortably make purchases on any device.
My first task was to create a flow chart that detailed the user journey from product discovery to the completion of the purchase.
Another requirement of the project was that users would be able to upload their own community generated content that could then be sold on the marketplace. The design had to take both traditional purchases and community generated purchases into account.
After settling on a user flow, I designed the first wireframes for the main landing page of the marketplace.
This is the entry point where users can get information on sales, new items, special holiday deals, and community content.
I also designed a search and filter function that allows the user to drill down and find specific types of products.
An important feature that the game developers wanted to include was the ability to put together product bundles.
I created a layout that would allow the user to browse each item in the bundle, understand the amount they were saving, and learn more about the overall bundle package.
The last and most complex section that I designed was the community generated content upload section.
This is an area that allows the user to create their own game assets, upload them into the marketplace, and then submit them for review and ultimately for sale.
Since the user was uploading external content, particular focus was given to the error states and file parameters.
The final layout is a section where the user can create their own product page by uploading images and writing in details about their game asset.
Since the game hasn’t been launched yet, the data analytics haven’t been gathered to measure the success of the marketplace. However, through user testing I have conducted, I’ve gotten positive feedback around the design being easy-to-use, friendly, and an exciting feature to add to the game.