Overview

Client
Market Games (Startup)

Timeline
Sept - Dec 2018

My Role
UX Design Consultant,
Sprint Leader (Usability Testing and UI Design)

Team
Inaara Charolia, Kevin Pham, Victoria Wu, Bhushan Balagar, Yani Mai (Project Mentor)

Background
‍Market Games is a competition-based learning platform that seeks to gamify the business learning experience. The game divides the classroom into teams of 4-6 members, where each team’s goal is to achieve the highest amount of market share. The results from the game affect the students grades in the course. For this project, our goal was to cater to the needs of college students with no background in business.

The Challenge
‍
Our client initially tasked us to design a mobile application for the existing game, which was only available on desktop.

My Role & Responsibilities
‍I was a UX Design Consultant, and therefore had an active part in each step of the design process. I was also the Sprint Leader for our last sprint, where I planned and led our sessions for usability testing and finalized our UI design.

Project Impact
The game is currently played by 700+ students at UC Berkeley every semester, with a beta version used to onboard 30 Google employees. Currently, Market Games is expanding to community colleges and entrepreneurship programs across the nation.

Research

For the user research sprint, our goal was to better understand the problem space and identify potential opportunities. First, we began by brainstorming potential stakeholders. We then used this information to discern that the most appropriate group to target for interviews would be college students that were new to business, or currently enrolled in an introductory business course.

User Interviews
Given the target market our client outlined for this product, we interviewed undergraduate business students at UC Berkeley as well as from a number of community colleges in the US.

Our goals for the user interviews were to understand:
1. Undergraduate business student learning styles and practices
2. Student experiences with gamified learning
3. Current uses of mobile learning
4. Usability of the current version of Market Games

By conducting interviews that combined behavioral user interview questions with first-use impressions with the existing desktop version of Market Games, we discerned a number of valuable insights, which are seen on the affinity map below.

Affinity Map Key:
Blue Notes = Positive Feedback
Orange Notes = Negative Feedback
White Notes = Overall Trends

Key Insights
1. Students do prefer learning through projects and discussion, as opposed to just lecture and readings
2. The connection between in-class material and the real-world application was critical to student engagement
3. Students did not prefer mobile learning because it posed too many distractions
4. The goals and navigation of the current Market Games desktop experience is unclear

Pivot
Given that we found mobile learning as an ineffective approach for students, as well as the number of issues that arose with the current UX of Market Games, I pushed the team to reconsider our project deliverables and scope. After reaching an agreement with the team, I helped lead the conversation with our client. We explained the insights distilled from the user research, and our obligation as human-centered designers to be a voice for the user and design the experience for their needs. After some deliberation, the client agreed to shift the deliverables. By the end of the project, he was completely onboard and was glad we had made this pivot earlier in the project.
‍
We pivoted to work towards improving and re-designing the current Market Games desktop experience, with the goal of being more understandable and intuitive for the user.‍

Ideation

After seeing how the users interacted with the existing version, we were able to distill points of frustration for users. Based on this, we discerned that the following goals would be most appropriate to address user needs:

1. Onboarding process: improve student understanding of the game instructions, as well as their roles in the team
2. Homepage/Dashboard: provide users with a way to access an overview of relevant information
3. Overall flow: develop a more coherent flow between the game itself, embedded quizzes, and the community forum

User Flow
We created several iterations of the user flow, and then came together to discern which flow might work best.
‍

Bubble Map
To ensure we were making design choices that addressed user needs, I proposed that we outline the key insights/needs we wanted to address. From there, our sprint leader improvised a 'bubble map' exercise (see below), where we documented main user insights on the left, feedback from the client on the bottom left, and necessary elements on the top right. We then used these findings to help guide the placement of assets on webpage.
‍

Prototyping

Low/Mid-Fidelity Mockups
After individual and team-based activities to develop screens (e.g. crazy 8's), we came up with some initial low to mid-fidelity screens, seen below.
‍

User Testing
With these low-fidelity prototypes, we created an interactive prototype on Invision and conducted in-person as well as remote user testing sessions through usertesting.com.

Our goal was to test:
1) if users understood the basic goal of the game (such as how the game is played, their role, grade, etc)
2) if users could easily identify and complete core game tasks
3) if the flow was intuitive enough for the basic user
‍

User Testing Insights
We came up with a set of insights catered to each major touchpoint on our website, as well as insights based on general user experience. Summarized are the following key user testing insights:

1. Some UI choices we included had adverse effects on usability. For example, adding a show to the right-side navigation panel made it unclear to users whether it was a static element, or was associated with the dynamic elements on the page. To address these concerns, we removed the shadows, and were mindful of catering to other visual associations users may make.

2. The copy for some of the categories was confusing for users (ex: “dashboard”vs. “team dashboard”, or “round” vs. “year”). We got these terms clarified and changed with our client, which helped in differentiating components and touch points.

3. Some students found particular tasks to be unintuitive to navigate. In response, we added additional visual cues like arrows to help direct users as they complete their tasks.

Final Deliverables

With consideration to the clients requests and needs, we then developed a color scheme and implemented changes from our user testing insights into our final iteration. We made a total of 36 screens for our final deliverable, though just a few are pictured below. Feel free to check out our interactive prototype here!
‍

Reflections

This was definitely one of my favorite team projects! I was in a team of amazing people. We all worked really well together, and built on each others strengths and knowledge. Our client was also incredibly generous, committed, and open to feedback, which I was especially grateful for when we proposed to pivot.

Looking back, there are certainly different decisions I would make regarding the UI/UX of the project, although I think we did quite well given the time constraints. One of my biggest takeaways from this project is the importance of making my voice heard, especially when there is something critical that others might be overlooking. While it could have been easier to simply complete the deliverables asked of us, taking a step back and really considering how this project and the user needs connect with the client's business goals can—and did—make all the difference.

I'm incredibly excited that Market Games is continuing to implement our re-design changes, and that the game is currently being played by 700+ UC Berkeley students every semester. I am eager to hear more about their progress as they expand to community colleges and entrepreneurship programs across the nation, and will be sure to update!

Final presentation with the amazing Market Games team and client!