Team: Daryll Hall - UI/UX Designer, Annahi Paez - UI/UX Designer, Joseph Henrichs - UI/UX Designer
Length: June 2021 - January 2022
Tools: Figma, Miro, Google Docs, Maze
Project Overview
The initial design for the Tribal Network Marketplace was to be an online game store where players could purchase games in Player Mode and could upload a game that they programmed from external software applications in Creator Mode. However, after a meeting with the Product Manager, he informed us that the project would be changed to designing an online asset store because the Software Engineers were currently developing a video game where users can build their own game based on assets purchased within the store such as levels, characters, environments, and sounds.
Role
I came onto the project as a UI/UX Designer. The User research, research synthesis, and the development of the affinity diagram was already completed before I joined the team. my responsibilities were to create a persona based on the results from the research, develop a user journey, contribute to the project roadmap, design low to mid fidelity wireframes, conduct a usability test, and help develop the final prototype.
User Research
The initial design team conducted virtual user interviews with 8 participants who were interested in the gaming industry. The team wanted to find out what the participant liked/disliked about the online game stores that were currently on the market, empathize with the frustrations that the participants were having, their beliefs, shopping experiences, and playing experiences.
Affinity Diagram
The initial design team took the data from the user interviews and created an affinity diagram so that the information could be better organized and reviewed.
Personas
We took the research data that was collected from the user interviews by the initial design team and developed two personas based on the type of gamer the interviewees identified with. One UX Designer developed the Discerning Legacy Gamer persona, who is dedicated in putting time and effort into his playing time and game publishing. Another UX Designer developed the Casual gamer persona, who plays in their spare time and is not as serious about their playing efforts.
User Journey Mapping
After two members of the team developed the personas, myself and another UX Designer developed the User Journey Mapping for both personas. I focused on the Discerning Legacy Gamer persona. I visualized what the process and activities that the user starts and finishes from awareness of the online game store, consideration against other online game stores, making the final decision of which online game store platform fits their needs, and the usage on the online game store. I also want to know what are their feelings and emotions while performing each one of the activities.
Product Roadmap
The design Team developed a product roadmap so that we could organize the features into the categories of Must Haves, Nice To Have, Surprising and delightful, can come back later, and avoid. After a long discussion, the team decided to focus on designing the Must Have features and to review the other category of features at a later time and add them to our designs if time permitted.
Low Fidelity Wireframes
The design team developed low-fidelity wireframes based on the agreed upon Must Have features. I focused on the store, shopping cart, confirmation, and library screens. My process of designing was to make a simple purchasing workflow that immediately transitioned to the library screen so the user can verify their most recent purchase. We met with the Product Manager to demonstrate our proposed design system and demonstrated what the work flow would look like through prototyping. He signed off on the low-fidelity prototype.
Mid-Fidelty Wireframes
After finishing up the low-fidelity wireframing, the design team had a meeting to discuss what would be the best method for developing the mid-fidelity wireframes. We wanted consistency across the screens with color schemes, fonts, and containers. We decided that it would be best to develop a UI Kit and build the frames based on the agreed font style, font sizes, background color, and navigation bar design.
Going In A Different Direction
The design team met with the Product Manager to present the mid fidelity wireframes and received news that the Online Game Store was being changed into an Online Asset Store due to change in stakeholder needs. We were informed that the engineering team was currently developing a new game that allows users to customize their own levels based on assets purchased in the store. The Product Manager provided the new requirements that needed to go into the asset store. After the meeting, the design team met and we discussed the best way to tackle the sudden change requirements.
New Mid-Fidelity Wireframes
In redesigning the UI, I decided to include the ability for the user to browse assets down to a sub subcategory to allow for a much more narrow search for specific types of assets. As a team, we decided to keep the layout, color scheme, and font size.
Usability Testing
We conducted a performance based usability test using Maze and asked the participants to answer questions in the follow up survey about their experience using the product. For my answers, I chose to use Miro to organize my responses.
Final Prototype
The final prototype below demonstrates the workflow of how the user would search for an asset to purchase by shopping by category, selecting 3D assets, selecting characters, add character asset to cart, checking out, selecting a payment method, a confirmation email, then being taken to the asset library. During the final design phase, my teammate, Annahi Paez, created the payment method pages and redesigned the confirmation page to provide more detail on the purchases.
Design Retrospective
This project has taught me how to adapt to last minute changes and reworks. One of the most important abilities that a UX Designer must have is adaptability. Business goals and stakeholder needs are always going to change based on swifts in the market or demands for last minutes additions. A great UX Designer knows how to remain calm, assess the situation, and apply the changing accordingly to fulfill business goals. At first, the design team was frustrated because we reached the end of the process by building the high-fidelity prototype, but we understood the new vision that the organization wanted to go, so we reworked the design and applied the changes to create a new prototype.