Pointing to Meal Points

SOCIALLY ENGAGED ART


Keywords: Food Insecurity, Public Interactions



GOAL
To design a provocative object to engage public interactions and elicit food insecurity problems on campus.

TEAM
Jess Liu, Maisha Kabir, Evie Liu, Maggie Chen

MY ROLE
︎ Research
︎ Observation
︎ Prototyping





In the light of the opening of another new non-meal-point cafe on campus, our team decided to build a signpost with signs pointing to the food places on campus.









CONTEXT

Dwindling Dining Options on Campus


Cal Dining, UC Berkeley’s dining program, has been shutting down on-campus cafes and services (including the popular Late Night) that accept meal points from student’s paid meal plans - despite the growing student population.

On the other hand, a plethora of new non-meal-point dining options has spawned in replacement. This has been frustrating for students, especially those who have purchased meal plans, as they struggle to find places on campus to spend their meal points. Meanwhile, students who have not purchased meal plans are also affected, as the old cafes were replaced by newer, fancier, and more costly dining options.

In the light of the opening of another new non-meal-point cafe on campus, we decided to make a signpost with signs pointing to the food places on campus, including:

  • 6 meal-point cafes (including two closed)
  • 12 non-meal-point cafes on campus (excluding three more under construction).




THE SPACE
The History behind an Empty Lot


This project is about observing people in places, and this one particular space on campus really caught our attention.

It’s a construction lot just outside Evans Hall, where construction equipment is placed and trucks are parked. It seems like it’s been there forever - and nobody knows what the space is for, so we did some digging.

Turns out that it used to be a Victory Garden in 2009, brought on by an on-campus sustainability team, where healthy vines, stems, and sprouts will be the fruits of victory (we even found some pictures).

Then, at one point, there was a plan to rebuild Evans and make this lot a part of the Memorial glade.







OBSERVATIONS
Intrigued by this mysterious lot, our team made multiple visits to observe the space at different times and locations.

Heat map of the traffic around the lot
Heat map of the traffic around the lot

General Observations


  • Location: in front of the Math building and an Engineering library, so there is a lot of foot traffic
  • It’s wide open, even at night: anyone can walk inside without getting into trouble
  • There are high fences around the lot, so even though it’s wide open, there weren’t any student actually walking into that space, despite the amount of foot traffic around the area
  • Generally quiet and unguarded, yet somehow feels forbidden

Inside the Lot




  • The area is paved, and there are cars and trucks parked inside (fewer at night)
  • A lot of construction materials and random trash:
    • Abandoned paper signs
    • Garbages
    • Random things like a chair, road sign, etc.
  • Smells of gasoline and oil

Sounds


  • The lot is pretty quiet, but we could hear faint noises from around the lot, where there is a lot of foot traffic:
    • Conversations about Engineering and Math
    • Bikes being locked
    • Footsteps

During one of our site observations, we saw a construction worker park in the Evans lot, and take a large piece of wood to the new cafe in front of Moffitt, which is also a no meal points location. 





PROCESS
Synthesis & Reframe


Drawing from our research and site visits, we were able to make an immediate connection between the history of the site and its current state. Almost ironically, what used to be a Victory Garden that promotes sustainability and food security for students, is now a storage lot for the construction of a new cafe that doesn’t take meal-points from students.

This has led us to come to the idea of deploying a signpost at the lot to showcase the disparity between meal-point and non-meal-point dining locations on campus and highlight the problem of the increasing scarcity of affordable dining options on campus for students.

“A signpost placed in the middle of campus directs students to dining options - indicating whether or not food points may be used there. […] This work is “by the students, for the students.” In many ways, taking back the campus that belongs to you. The playfulness of this design is wonderful. “


-- Quotes from Prof. Jill Miller



Sketches




Building the Signpost


Materials

Two 2in. x 3in. x 96in. wood posts
Three pieces of plywood (for laser cutting)
Screws
White and red paint

Steps by Step Instructions

  1. Measure out and cut 2in. x 3in. x 96in. wood post into four 2ft. Sections
  2. Measure out 2inches of the end of two of the 2 ft sections
  3. Measure out 1.5 inches of the end of the other two 2 ft sections
  4. Predrill 2 holes onto the measure out ends of each section
  5. Predrill corresponding holes onto flat sides of wooden sections so then can attach like picture below: (show picture of base)
  6. Predrill 2 holes on the wider section of the wood post
  7. Predrill corresponding holes onto the wooden sections that have 2 inch ends
  8. Match 2inch end wooden sections to the corresponding side of the wood post. (Sections with 2in marked ends match with the wider side, 1.5in sections match narrower sides)
  9. Glue 2in section onto wood post
  10. Drill 2in section into wooden post
  11. Glue 2in end onto 1.5in end
  12. Drill 1.5in section into 2 in section
  13. Repeat steps 8-12










POST-DEPLOYMENT
Observations


We deployed the signpost at around 9AM in the morning, and we took turns to stay around it until about noon to observe people’s reactions and interactions.

Most of the time, people passed by and just ignored it. Some glanced at the sign before they continue to walk, and some circle around the sign to either read everything or take photos.

Occasionally, when a pair or a group of friends pass by, they would circle around, and even stop to converse about it. Unfortunately, while we were observing from afar, we were unable to capture these conversations, which would’ve been interesting to hear.

Before noon, two men (who seemed older than college students) came around, with clipboards in their hands. They walked up to the sign, shook it around, lifted it up, then put it back down.




People reading the signs
People taking pictures
Broken sign at night
Found broken piece next day



Then later at night, we found two of the signs on the post, True Blue and Bear’s Lair (both non-meal points), broken.

Since both of these signs were at the top of the post, which is almost impossible to break by accident without knocking off the lower signs, we concluded that the signs were most likely broken off intentionally.

One of the broken pieces wasn’t found until the next morning, by which time the entire signpost had already disappeared. We looked around the area, even in nearby dumpsters, but the post sign was nowhere to be found.

All the events described above happened within a day after our deployment of the signpost. It wasn’t clear who had broken off the pieces, stole/confiscated the signpost, and what were their motivations behind these actions.We were only left wondering:

Does a stationary sign really bother people that much?

Do people not want to talk about Cal Dining’s decisions to close their locations and reduce their service, even as the UC Berkeley population continues to grow?

Who took the signpost??

“This piece is so successful that it was stolen. Let’s call that a compliment. ”



Read more about our provocation here, written by Jess.


Mark

Recharge

UI DESIGN


Keywords: Stress, relief, interface, mood, wearable device




GOAL

To design cohesive interfaces for a product consisting of two different components: a stress management app and wearable device.


In Spring 2018, I took a class to learn about how to design aesthetically engaging interfaces, and the final project involves designing two interfaces for a stress management app. The goal is to turn the user’s stress into something positive by providing positive visual feedbacks.

CONTEXT
The user is stressed.


The wearable sensor picks up the user’s status and displays the sensor reading as well as the status of the user being stressed. The user presses the button on the screen in reaction. The screen then takes the user to the next screen where it suggests the user to relax.




PROCESS
Colors & Moodboarding


To set the tone of the user's statuses of being stressed/de-stressing, I partnered with a fellow classmate Sophia, and we built two distinct color palettes for each screen, pulling inspirations from images on the internet.




Typography


I decided on a clean, san serif font for a minimal style, so the user can clearly see the focus on the screen. I used two different weights and sizes to establish visual hierarchy, directing the user’s attention to the most important element on the screen.




Layout


I kept everything on the screen centered, with generous space between each group to reinforce the hierarchy of different groupings.



ITERATIONS
Medium to High Fidelity


Based on peer feedback, I iterated through medium to high fidelity for the interfaces,  tweaking different elements like the font, iconography, spacing, copy, gradient, etc.

You can see the evolution below:










Final Design


The design is built upon a metaphor that compares the user's stress status to a battery, e.g. a low battery status when stressed.

There are two screens in total, each indicating a separate stress status.



stressed  
destress


  1. When the wearable device detects that the user's stress level has hit a certain critical point (e.g. when the “battery” is below 20%), the app connected to the device would enter the stressed screen.
  2. The symbol will change from exclamation to lightning sign to indicate changing status from being stressed to actively de-stressing, and enters the de-stressing screen.
  3. The “battery” will then charge as stress level decreases. When the stress level hits a certain point, the user will have the option to swipe left to quit the de-stressing mode.





WEARABLE
Sketches


It’s important to keep consistency between different components of the whole product - in this case, the interface and the physical wearable device. 

This is to insure that the user, while using both the wearable and the app, would have a seamless experience transitioning between the two, which will help create a sense that this is a cohesive product.




This is done through: keeping the symbols consistent across devices (e.g. exclamation and lightning), and translating the minimal style from the interfaces to the wearable device.

While the heart is a major element in the app interface, I decided make the wearable device square, which is more neutral and can be easily disguised as an accessory instead of a stress management device.



Mark

Brightn

EXPERIENCE DESIGN



Keywords: Mobility, Commuting, 



GOAL
How might we reimagine the commuting experience for young professionals taking BART (Bay Area Rapid Transit)?


TEAM
Andrew LinXie, Katherine Qiu, Manisha Ponniah, Jun Zho, Maggie Chen

MY ROLE
︎ Secondary Research
︎ Prototyping

︎ Visual Design
︎ Interviews
︎ User Testing

OBSERVE & NOTICE
Initial Research


From some quick research on the internet, we learned about the public’s opinion on commuting, what are the common pain points, and especially commuting in the bay area. Here are some of our key insights:

  • Driving sucks
  • Current status of the BART: a lot of riders are commuters to work
  • Increased numbers of commuters: New York and San Francisco had the strongest.
  • The average commute time in the bay area is around 30 minutes.
  • Worn down public transportation contributes to traffic.
  • Health and hygiene are big concerns.
  • What affects transportation: colors & art

User Interviews


We also conducted interviews with commuters in the age group of 18-30 to understand their experiences with the BART and commuting in general. Here’s what they had to say:

  • Safety seems to be a concern - people wants to feel comfortable
  • The interior seems dull and depressing
  • We can learn from the public transport systems in foreign countries





FRAME & REFRAME
Synthesis to define the problem space




Drawing from the insights gained from our initial research and interviews, we narrowed down our target user group to young adults entering the workforce. After synthesizing, we came to the question: How might we reimagine the commuting experience for young professionals taking public transportation?

Further Research


As we continue to develop our idea, we started to focus on the interior aspect of the BART. We did more research to learn about interior visual aspects like lighting and colors to better inform our future design decisions. Here’s a high-level overview of what we found:

Since the Bay Area has such a diverse cultural mix, we also learned about some cultural contexts for colors.


Source: Cultural Color Chart




IMAGINE & DESIGN
Persona: Risha


To better understand the needs and pain points of our target users, we built a persona represe the workforce.


Risha

Age: 23
Location: San Francisco Bay Area
Recent Cal grad, Bio-E and Cog Sci major
Current consultant at a biotech consulting company
Daily commuter between Berkeley and San Francisco.

I also wrote a pitch with a short story reimagining Risha's experience with BART after the revamp.

Diverging


To attempt to solve the problem, we tried to come up with as many ideas as possible using methods like brainstorming, journey map, AEIOU, and system mapping.









INSIGHTS
Converging


To converge, we used a decision matrix to evaluate the effectiveness of some of the ideas based on the following elements: cost & profitability, visual aesthetics, functionality, space availability, cleanliness, storage capability, accessibility, and comfort.

We also looked at public transit systems in other cities and countries, and discussed what worked and what didn’t.



We decided to focus on the idea of improving perceived aspects like safety, comfort, and cleanliness through changing the visual interior aspect of the BART, especially colors and lightings.

Business Model


To fund and support the revamp of BART interior, we also built a business model, which includes installing murals in the interior of the BART, with sponsored logos from corporate partners like companies in the Bay Area.

The idea here is that the young commuters can enjoy the art and feel empowered as they work toward their goals, while our corporate partners would sponsor part of the revamp project.





Business model canvas

Mural mockup




MAKE & EXPERIMENT
Prototype Testing


After attempts to get in touch with BART officials, in the lack of approval to do prototype testing on the actual BART, we decided to visualize our idea through both digital and physical prototypes.

We photoshopped images of the BART interior to demonstrate the difference colors and brighting can make:



We also 3D printed a small model of the interior to show our idea of improved lighting and colors (unfortunately we have lost the picture of the final product).



User Testing


To test out the effectiveness of our idea and collect feedbacks from our target user group, we created an online survey, and distributed it through our social media.

We asked questions like how often do they ride the BART, their main reason of travel, and how strongly do they agree to some statements regarding BART:

  • The current color scheme of BART puts me in a positive mood
  • A different color scheme of BART could put me in a more positive mood
  • A different color scheme of BART could make me feel safer riding on BART
  • A different color scheme of BART could make me ride the BART more often redesign were affective, I asked the two users with different amount of usages of Airbnb to use the prototype, and observed their interaction with it.

From the 70 surveys that we've collected, we got an overall positive feedback on a new and improved BART interior:

  • 78% agreeing that a different color scheme will put them in a better mood
  • 76% agreeing that brighter lighting will put them in a better mood.




MISC

Presentation


At the end of the class, we presented our project to students, faculties, and industry professionals at the 2016 Jacobs Winter Design Showcase.

We even had the opportunity to speak with a representative from BART, who recognized the problems that we've brought forth, took notes from our project, and gave us some feedbacks on the feasibility of our project.



Mark

CSAA Innovation Manual

WEB DESIGN


Keywords: Corporate Innovation, Design Thinking



GOAL

To inform employees about the innovation program and equip them with tools to innovate.


CONTEXT
During the summer and fall of 2018, I interned at CSAA Insurance Group’s internal innovation program, which aims to build new business ideas and to further instill a culture of innovation within the company.

MY ROLE
︎ Ideation
︎ User Research
︎ Wireframe
︎ Mockup +
Prototype


I mainly worked as an innovation analyst during the internship, assisting groups of employees iterate through new business ideas within the program. Throughout the summer, I found that many employees can often be intimidated by the idea of “innovation”, due to limited knowledge about the program and overall tools and terminologies commonly used in practices of innovation. Therefore, I decided to design a company-wide website for the program to make relevant knowledge and tools more accessible to all employees, and familiarize them with work done in the program.

Eventually, this project stretched beyond my original summer internship, and I continued to work there for the following Fall semester.





PROBLEM

What is ‘Innovation’, and what are they doing?


Through talking to company employees outside of the program, I found that a lot of them have little understanding about the program and the works done here. Even those who were currently in the program, a lot of them were unfamliar with the idea of “innovation” (which is an admittantly broad term), and are often intimidated by the idea of it.

To help employees gain better understandings of what’s going on inside the innovation program, and build a creative confidence in their own abilities to innovate, after conducting user research with a few employees and relevant stakeholders, I started designing a website for the innovation program with goals to:

  • Showcase teams’ progress
  • Engage employees outside of the program to get involved
  • Provide tools and methods to help employees innovate

Additionally, this will serve as an operating manual for the program, to on-board employees within the program, and help them get up to speed in their daily operations.


PROCESS

Research, Ideate, Wireframe, Mockup, Prototype


The general steps I’ve taken throughout the design process include:
  • User interviews with stakeholders and employees affiliated with the program (currently participating or have been marginally involved) to find pain points
  • Synthesis of findings and discuss with the Strategy & Innovation team to establish and align goals
  • Sketch information architecture and wireframes
  • Iterate and design higher fidelity mockups
  • Build an interactive prototype on InVision and presented it to the entire Strategy & Innovation department, including key stakeholders like C-suite executives.

DESIGN

Deliverables


Wireframes for landing page

Mockup for landing page

Information architecture & more mockups



Due to Non-Disclosure Agreements, please shoot me an email to learn more about this project or request access to the prototype.



Mark

Pokebox

PRODUCT DESIGN


Keywords: Human-centered design, Hyper-Personal Prototyping, Education




GOAL
To design a tool for Christina - an apprentice/aspiring teacher, that helps engage her students in class.

TEAM
Sally Tran, Phyllis Thai, Carlos Lazo, Maggie Chen

MY ROLE
︎ Interview
︎ Exploration & Ideation
︎ Prototyping

For a New Media class that I have taken, along with a talented team of 3 students, we designed a hyper-personal object for Christina Ong, a UC Berkeley senior studying Geophysics and minoring in Cal Teach.


Pokebox


HOW IT WORKS
Christina may choose to use the tokens to symbolize class participation.

  1. When a student answers a question, he/she receives a token.
  2. Students deposit the token into the Pokébox at the end of the class
  3. Tokens start to add up and fill the first tick-mark on the front of the box - Christina can then evolve the Bulbasaur into Ivysaur.
  4. Tokens start to add up and fill the second tick-mark on the front of the box - Christina can then evolve the Ivysaur into Venusaur.
  5. When the box is all filled up, the Pokémon has reached its final evolution, Christina can reward the students with a pizza party.

OBJECTIVE: STUDENT ENGAGEMENT
  1. A reward system to encourage students to participate in class.
    The idea is that there would be an immediate reward (egg, sound and lighting effects), and a long-term reward (evolving the pokemon) for the students (from the book 1-2-3 Magic Effective Discipline for Children 2–12).
  2. Physical objects as a token.
    From our interview with Christina, we've learned that students enjoy having a physical object to hold onto. We decided to make a box that can be filled up by tokens shaped like Pokemon eggs, which can be earned in class through activities like answering questions, handing in exit tickets, or acing a quiz/project, etc.

OBJECTIVE: PERSONALIZED PREFERENCES
  1. Christina enjoys anime, especially Pokemon - our box is therefore Pokemon themed. We also chose the Pokemon Bulbasaur, because Christina likes the original Pokemons, and her favorite type is grass type Pokemons.
  2. She loves cute objects, especially eggs.
    She told us that she likes cute things, and she finds eggs especially cute. So we made the tokens in the form of Pokemon eggs, which also goes with the theme of evolving the Pokemon.






INTERVIEW
Getting to Know Christina


We designed a hyper-personal object for our client Christina Ong, who is a UC Berkeley senior studying Geophysics and minoring in Cal Teach.

We wanted to get to know Christina on a deep, personal level, and design something that will be a “painkiller” that she will love and use. We conducted a series of long interviews with her, with a specific focus on her passion for teaching, and here are some highlights of our findings:




She mentors kids on computer science as a member of an on-campus club, and she's passionate about helping and teaching kids.


She encourages group works and likes to have class/group competitions. However, sometimes she struggles with engaging students in her classes.



Having a physical object for students to hold onto as a part of a point/reward system has worked well for her.


She adores anime (especially Pokémon), cosplaying, and cute things like eggs.  



IDEATION
Defining the problem space


It wasn’t immediately clear to us what is a problem that Christina would like to solve at the beginning. While we were conducting the series of interviews, we also brainstormed different ideas for the object that we’d like to build - like a personalized mannequin for her to make cosplay costumes, a custom stamp for her to grade assignments, and gadgets to help her dog get on the chairs.






What we realized, as we drew insights from the interviews that we’ve conducted, is that Christina really has a passion for teaching, and she’s having trouble engaging her students in her classes.

From there, we decided to make a personalized teaching tool for Christina to help her engage her students in class, facilitate student interactions and interests in the class materials, and incorporate her personal preferences to make it uniquely hers.



Sketches


Since our product is highly interactive, sketching helped us understand the mechanism, as we designed different components of the box.

We made multiple sketches and kept improving the design as we prototype and iterate, which also helped solidify our final prototype.


The final idea is that it’d be a Pokemon-themed, piggy-bank-like box that students can interact with in class.

The teacher (Christina) would distribute egg-shaped tokens for any student achievements, and as students earn their tokens in class, they can deposit them into Pokébox. As the tokens add up to reach a certain amount, the Pokémon on top of the box evolves. When it reaches its final evolution, Christina can then choose to reward the students.





ITERATIONS

Prototyping




One of the important aspects of our project is a functioning prototype, and this involved an iterative process of prototyping at different fidelities.

First Prototype (low fidelity) ︎ Second prototype (mid-high fidelity)




Starting with a low fidelity cardboard prototype, our team had several iterations as we improved our design. We adjusted relative sizes of each component to make sure that they’d work with each other (including a box and some electronic components), making sure that the mechanism of the teaching tool would be intuitive and easy to use, and lastly, the final product would be visually appealing to both Christina and her students.


Read more about Pokebox and follow-ups from our team member Sally.

Mark