Product Design.
UX Design.
Mobile App.
Game Center App
An information Hub for NYU Game Center
Collaborating with New York University Game Center Department (GC), we are designing a platform that would act as an information hub for all the announcements and events that are happening in the NYU Game Center. The product would include a mobile-based app and a website. We are currently working on the mobile app MVP product, focusing on the homepage design for the information receiver user group. This case study presents the process of product design and UX design of the mobile app homepage.
My Roles & Contributions \
Project initiator, product manager
Along with another project initiator, we validated the product direction, onboarded the stakeholders, defined product scope, timeline, milestones, constraints, and aligned understanding among team members.
Product designer & UX designer
I led a UIUX team of four, handed off the app homepage (11 screens) to the developer team. My job includes defining product and design vision, conducting design research, creating and iterating low-fi and mid-fi prototypes, conducting and synthesizing user testing.
UX researcher
Collaborating with two more researchers, I planned stakeholder interview, qualitative & quantatitive researches, and user testing.
Team \
3 UX Designers · 1 Visual Designer · 1 Researcher · 2 Developers
Status \
[✔️] Problem defining & Significance validation research
[✔️] Onboarding stakeholders
[✔️] MVP - mobile app homepage design (for information receivers)
[🚧] Information gathering survey
[🚧] Fundamental user research\
.....
What are the problems our product trying to solve?
😕 Not making enough use of GC resources
😰 Missing out on valuable information
🔋 Energy consuming to keep track of GC information
💥 Bombarded by the information they are uninterested in
🤯 Hard to determine how much useful information is going around
🤔 No information bridge between BFA and MFA for student-posted information
📊 Hard to track event statistics
🥱 Laborious to announce events on multiple platforms
To start, for the mobile app MVP home page design, we are focusing on resolving two of the problems.
Our Solution
Product \
An information receiving & posting hub that covers events, announcements, and job information in GC
Mobile App MVP Home Page \
Present information in a concise and compact way, so users feel easy to quickly grasp it all in a glance
Initiating the Project
Why We Started
This is what it looked like to check information in GC for me and my friends:
Cluttered and scattered information...
"I forgot about that deadline!"
"Wait, there's a seminar today?"
"What are the undergraduates doing?"
This is what we wished for it to look like:
"I can find all the major information here!"
"I can filter out information
I'm not interested in!"
"With one glance I know what's happening in this week!"
An information hub!!!
For a product to be successful,
it must bring sufficient value to both the users and stakeholders.
So, let's start with the users.
What do the other GC folks think?
Are they experiencing similar problems?
Will they need our product?
Significance Validation & Problem Defining Research
To find out if the product idea is significant for the users,
we talked to some relevant personnel both online and offline.
Receiver
Receiver
Poster
Receiver
Poster
Receiver
Poster
Receiver
Q1 \ How would you like to stay informed about events, announcements,
and job opportunities that interest you?
7/10 Solvable by our product idea
Q2 \ What's your opinion on the current information system for events, announcements,
and job information in GC?
Information Receivers
Seeking social opportunities that bring together BFA and MFA students
Information very cluttered. Hard to find useful information
It's hard to find jobs that are applicable to their case
Information feels scattered in multiple platforms
Information Posters
Information very cluttered. Hard to find useful information
Tedious to post events on multiple platforms
Painpoints of Users
🤯 Hard to determine the how many useful information are going around
😰 FOMO for valuable information
🔋 Energy consuming to keep track of information
😕 Not making enough use of GC resources
🧺 Cluttered information
🧩 Scattered information
💥 Bombarded by information they are uninterested in
🤔 No information bridge between BFA and MFA for student-posted information
📊 Hard to track event statistics
🥱 Laborious to announce events on multiple platforms
Product Vision [1/2]
(User Significance)
With the user perspective understood,
we are ready to begin initial product planning.
First step of determining product vision:
How to tackle user potential pain points?
Direction
Both information receiving center & posting center
for both information receiver and posters.
🧩 ̶S̶c̶a̶t̶t̶e̶r̶e̶d̶ ̶i̶n̶f̶o̶r̶m̶a̶t̶i̶o̶n̶
🥱 ̶L̶a̶b̶o̶r̶i̶o̶u̶s̶ ̶t̶o̶ ̶a̶n̶n̶o̶u̶n̶c̶e̶ ̶e̶v̶e̶n̶t̶s̶ ̶o̶n̶ ̶m̶u̶l̶t̶i̶p̶l̶e̶ ̶p̶l̶a̶t̶f̶o̶r̶m̶s̶
MVP
1 \ Filter function
💥 B̶o̶m̶b̶a̶r̶d̶e̶d̶ ̶b̶y̶ ̶t̶h̶e̶ ̶i̶n̶f̶o̶r̶m̶a̶t̶i̶o̶n̶ ̶t̶h̶e̶y̶ ̶a̶r̶e̶ ̶u̶n̶i̶n̶t̶e̶r̶e̶s̶t̶e̶d̶ ̶i̶n̶
2 \ Clear and concise
🧺 ̶C̶l̶u̶t̶t̶e̶r̶e̶d̶ ̶i̶n̶f̶o̶r̶m̶a̶t̶i̶o̶n̶
3 \ Display all recent information in a easy-to-quickly-grasp-it-all way
😰 ̶F̶O̶M̶O̶ ̶f̶o̶r̶ ̶v̶a̶l̶u̶a̶b̶l̶e̶ ̶i̶n̶f̶o̶r̶m̶a̶t̶i̶o̶n̶
🔋 E̶n̶e̶r̶g̶y̶ ̶c̶o̶n̶s̶u̶m̶i̶n̶g̶ ̶t̶o̶ ̶k̶e̶e̶p̶ ̶t̶r̶a̶c̶k̶ ̶o̶f̶ ̶i̶n̶f̶o̶r̶m̶a̶t̶i̶o̶n̶
4 \ Information included covers GC events, GC announcements, student-hosted events, external events, job opportunities
🤔 ̶N̶o̶ ̶i̶n̶f̶o̶r̶m̶a̶t̶i̶o̶n̶ ̶b̶r̶i̶d̶g̶e̶ ̶b̶e̶t̶w̶e̶e̶n̶ ̶B̶F̶A̶ ̶a̶n̶d̶ ̶M̶F̶A̶ ̶f̶o̶r̶ ̶s̶t̶u̶d̶e̶n̶t̶-̶h̶o̶s̶t̶e̶d̶ ̶a̶n̶d̶ ̶p̶o̶s̶t̶e̶d̶ ̶e̶v̶e̶n̶t̶s̶
Future Functions
RSVP and attendance system
📊 ̶H̶a̶r̶d̶ ̶t̶o̶ ̶t̶r̶a̶c̶k̶ ̶e̶v̶e̶n̶t̶ ̶s̶t̶a̶t̶i̶s̶t̶i̶c̶s̶
Onboarding Stakeholders
Stakeholder Interview
Phew......now the product idea sounds significant for the USERS
BUT, here comes another boss - STAKEHOLDERS!!!
For a product to be successful,
it must bring sufficient value to both the users and stakeholders.
We conducted stakeholder interviews,
and found out their expectations as well as aligned information.
Stakeholder Expectations
Statistics Tracking
📝
Track the events statistics, including how many RSVP, attendees, and how effective they are
User onboarding
🌼
Users can have a smooth transition from current information system to the new one
Maintainance
🔧
Easy admin maintainance and furture app maintainance
Funding
💰
Won't take a large part of GC technical funding
Product Vision [2/2]
(Stakeholder Significance)
According to the results of the stakeholder interview,
how do we plan to achieve expectations and resolve concerns?
Product Vision Adjustment
🌼
📝
🔧
💰
1 \ Frequent communication with users from the early stages of design to ensure their willingness to onboard at every stage of product development
✅ User onboarding
2 \ QR code system
✅ Statistics tracking
3 \ Admin system; Long-term project management plan
✅ Maintenance
4 \ Estimated team funding; Ask the developer about tech funding - eg. Cloud Database yearly fee;
✅ Funding
Pitch
The next task is to secure stakeholder buy-in.
Our strategy was answering these two questions:
1 \ How to convince the stakeholders that this product has an impact and a significant return on investment?
2 \ How to make their life easier?
How can our products meet the current critical needs of stakeholders?
Program popularity
Student satisfaction
Student employment rate
Department Chair
1 \ Searching for NYU on the App Store will only display the NYU App and NYU GC App as results.
2 \ Improve student social Life and GC resource utilization. Developing this product highlights the program's emphasis on students' learning experience and creates a unique and personalized program.
3 \ Increasing the efficiency of job advertising and applications, as well as establishing connections both during and after attending GC.
Optimized workflow
Minimize the amount of manual work
Tech Admin
1 \ Both Information Receiving Center & Publishing Center.
2 \ Publish events to multiple platforms in one click.
What are the other significances of our products?
1 \ According to the problem defining research, our product vision can address current GC information system painpoints
2 \ According to the stakeholder interview, our product vision can meet stakeholder expectations
Success Metrics
[How will we measure the effects?]
The success rate of achieving each focus area goal statement is measured by the satisfaction rating survey.
( > 70% )
Final product goals:
1 \ Event RSVP & attendance rate ( +> 20% )
2 \ Student social engagement ( +> 20% )
3 \ Resource Utilization Rate ( +>20% )
4 \ Information tracking time ( ->30% )
How will we work with the constraints?
💰
Funding
< 15% of GC tech funding goes to cloud database yearly pay + permanent manager pay
⌚
Time
September Beta Version ready for iOS & website
👯
Team
Recruitment on a rolling basis; Ensure one on-campus team member; Permanent stakeholders for contact & team recruitment;
Ver.1 MVP :
Mobile App
Homepage Design
[For Receivers]
Ver.1 MVP Executive Summary
First version of the product is tackling problems of:
1 \ Hard to determine how much useful information is going around
2 \ Energy consuming to keep track of information
3 \ Cluttered information
4 \ Scattered information
The situation has led to GC people not making full use of GC resources, feeling a sense of FOMO (fear of missing out), and finding it challenging to keep track of information.
How might we present all the recent major GC events and announcements on the home page in a concise and compact way, so users feel easy to quickly grasp it all in a glance?
1 \
What
Create a mobile app homepage for information receivers
2 \
Main Functions
-
Browse events
-
Browse announcements
-
Filter
-
Timeline
3 \
For Who
Information receivers
4 \
Success Metrics
Measured in satisfaction rating survey :
-
Browse events
-
Browse announcements
-
Filter
-
Timeline
5 \
Roadmap
-
Design Research
-
Ideation
-
Design & Prototype
-
Test (2 rounds)
-
Iterate
-
Hand-off
-
Research for the next steps
Design Research
Before starting the design process,
it is important to have a clear understanding of the current information system of GC.
This will help to identify strengths and weaknesses,
as well as determine how to provide a smoother transition experience for users.
Current Information System Research
At the same time, we need to draw inspiration from other similar products.
We conducted reference research on some mobile apps with event display and booking functions.
Reference Research
Ideation
Write Down Keywords
To stay on track and avoid digression, we kicked off by jotting down keywords from the goal statement.
Compact
Concise
Minimal Effort
Easy
Quick
Role-playing
As this is our initial product design phase, we haven't had ample time to fully comprehend the user's perspective. To get into the user's shoes and brainstorm effectively, we tried an exciting approach - role-playing! Drawing insights from problem-defining research, we played various user types like international students, fourth-year GC students, and newly-hired professors, and shared our design expectations.
Sketch Sprint
We set the timer for an hour and kicked off a sketching sprint. Our focus was to produce a myriad of ideas, ranging from safe to wild sketches, and cast the net wide to capture as many concepts as possible!
Following that, we used the insights gained from our role-playing exercise to analyze the sketches and identify designs that could genuinely aid the users.
Wireframes & Testing
we integrated select designs from our sketch collection
to develop three wireframes that best represent our vision.
3 Wireframes
We aimed for three diverse designs, which we will evaluate by having potential users compare them side-by-side in a rapid usability testing.
This process will provide us with a clear understanding of the optimal design direction to pursue.
User Testing
Conducting user testing at the early concept stage helps reduce bias, saves on later design costs,
and allows us to stay on a user-centered design approach.
Testing Goals:
1 \ Display of events
2 \ Filter function
3 \ Display of announcements
Working:
Ver.2 \ Present timeline of events
Ver.1 \ Display announcements in a modal
Maybe?
Ver.1 \ Browse events by categories
NOT Working:
Ver.1&3 \ Too many events presented at the same time in clutter
Ver. 2 \ Not enough information per event
Ver. 2 \ Calendar as the main view
Ver. 1 \ Too many buttons
Low-fi Prototype & Testing
Sketches
Based on the A/B testing insights, we started to make sketches for the low-fi prototype
Low-fi Prototypes
After much discussion, we pieced together our favorite designs to create two low-fidelity prototypes, one featuring a conservative and straightforward design, and the other incorporating more innovative elements.
Why are there two prototypes?
We also want to conduct A/B testing this time, allowing users to compare two different styles of designs. We believe that A/B testing is the best way to test user experience during the early design phase, as providing only one version can limit feedback due to insufficient information in low-fidelity and incomplete designs.
User Testing
Testing Goals:
1 \ Display of events
2 \ Filter function
3 \ Timeline View
4 \ Color Coding
5 \ Search function
Display of Events
Ver. A \ Some users like splitting events by category
Filter Function
Ver. B \ Filter design in Ver. B looks cleaner and simpler
Timeline View
Ver. B \ Users like the traditional swiping timeline more than the summarized timeline in Ver. A
Color Coding
Ver. A \ Mixed reviews on color coding: some find it helpful, while others find it confusing due to the excessive amount of colors
Search Function
Ver. B \ Search function in menu bar is sufficient
Mi-fi Prototype
Based on user feedback, we have decided to create two event display modes that users can switch between on the homepage at any time.
One mode categorizes events by type, while the other displays them in chronological order.
This will cater to users who prefer to view events in either of these ways.
Hand-off
Next, we will transfer the mid-fi prototype to the Visual Designer, who will take charge of creating the high-fi prototype.
Hand-off Page
I created a hand-off page that outlines the relationships and connections between each screen.
Design Problem Hand-off
There are some known issues in the mid-fi prototype that need to be addressed by the Visual Design stage.
We have communicated these issues to the Visual Designer:
Style Keywords
As the product designers, Diganta and I have combined our understanding of the GC style and product requirements to create a set of keywords that will guide the creation of the style guideline.
How it looks
Fun, Exciting, Happy, Vibrant, Engaging
How it functions
Clean, Clear, Efficient, Helpful, Concise
Gamer Identity
NYU Game Center, Gaming, Tabletop Games, Digital Games, Community, Cohesive, Game Culture
Heuristics
Accessible, Simple, Informative, Useful, Aesthetic, Balance, Consistency
Factual Data Database
In addition, Diganta and I have created a factual data database that contains authentic GC events and announcements.
This resource will be utilized by developers and the high-fidelity prototype.
Result
Next Steps
To ensure the success of the next phase of in-depth design, we need to conduct further research before proceeding. The one quick user research session we've had so far lacked the necessary depth and breadth for the next phase of design.
Currently we are working on two researches:
One qualitative research to further understand potential users' needs, expectations and painpoints.
Another quantatitive research to gather essential data like Information Type that should be included in the app, and to validate assumptions.
Reflection
Reflection 1
Look beyond the surface
Don't rely on user feedback data without thinking thoroughly. Explore the true thoughts of users represented by the data through empathy and critical thinking, in order to gain insights that truly reflect user needs.
Reflection 2
Communicate your ideas with others extensively during the early stages of design
Such as with teammates, stakeholders, and potential users, to avoid biases and prematurely committing to a single idea.
Reflection 3
Consider how your product and design can bring impact on multiple aspects
Such as user, product, business, and team, rather than focusing on just one.