UC Berkeley Haas School of Business
Market Games
A Business Simulation & Education Game
Individual Project // User Research // UI Design // Figma
Project Brief
In 2018, I led a team of student designers to create a business simulation game for UC Berkeley Haas School of Business. The team successfully delivered mockups for a desktop version.
3 years later, I'm tackling the project again, this time with a mobile-first approach and an upgraded UI style.
Final Product
Background
Principles of Business (UGBA 10) is a prerequisite course that intended business major students at UC Berkeley take. Even though the course is taught at an introductory level, the intensive load of material and content might be hard for students exposed to business knowledge for the first time in this class.
At the end of each semester, students are surveyed about their mastery of the content and how prepared they think the course has made them.
The course content is divided into four modules taught by four different lecturers:
Most students find that they struggle with the latter two modules the most according to a Piazza (course forum) discussion in Spring 2019 because
Business terminology often times is named correlatively and easy to get mixed up when used altogether
Learning about the role and duty of each stakeholder does not offer enough reality in how they are linked to one another and function together
Running a business requires a team, whether large or small, but learning about how from textbook is done by oneself; it lacks of team work and synergy
Market research
Our app must be able to support both business simulation and learning assistance, so not only did I research simulators, I also looked into apps that supported webcast replay, course material upload, and quizzes.
User Interviews
Ronley
Freshman & Undecided major
I thought I got the materials pretty well-absorbed, but my exam scores said so otherwise. Maybe it was really too much content for someone new to business to get a hold of everything in just a 3-month period.
Justiene
Freshman & Business intended major
I kind of breezed through the course because I was in a business club in high school. I mean I kind of had to like re-learn some of the more in-depth concepts, but overall I think the course just filled in some holes in the business stuff that I already knew.
Josh
Freshman & Computer Science major
I wanted to do a minor in business administration so I took this class. I feel like the class prepped us pretty well because a lot of the upper division business courses just repeat some of the principles taught in this course but just more rigorously.
Affinity Map
I filtered out these key inputs from the interview notes, categorized them by topic, and color-coded the responses by level of satisfaction with the old version of simulator.
Click to view in detail
User Persona
User personas are used to imagine the most common use cases of Market Games and plan out the logical workflow for the app.
Click to view in detail
Click to view in detail
Design Concept
After synthesizing insights from interviews and desktop research, I have set the following key areas and goals that are central to this the Market Games mobile app redesign.
These keywords are used for generating key visuals and creating a mood board that determines the overall UI style. With the right branding, color scheme and style are effectively decided.
Information Architecture
Wireframes
User Testing
I used in-person testing method and printed the wireframes using Figma’s prototype mode. I gave users several tasks to test how easily can my test subjects complete these tasks:
-
Do my test subjects feel well-onboarded after the new onboarding process?
-
Are they able to find the business guide and user help guide once they exit the onboarding process?
-
Are they able to find a quiz to take?
Click to view in detail
Visual Specifications
Color Scheme
The blue color family is derived from Market Games‘ logo and diversified into a series of blue shades to create a unified color coherence without making it too monochromatic.
Primary Colors
Secondary Colors
Text Colors
Typography
