top of page

 UC Berkeley Haas School of Business 

Market Games

A Business Simulation & Education Game

Individual Project // User Research // UI Design // Figma

Project 4-1.png
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
Frame 219_edited.png

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


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.



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.



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
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:

  1. Do my test subjects feel well-onboarded after the new onboarding process?

  2. Are they able to find the business guide and user help guide once they exit the onboarding process?

  3. 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


Frame 213.png
bottom of page