Hi, I’m Jonathan! I’m a senior EECS major at UC Berkeley. My interests include computer graphics, game programming, and algorithms. Throughout my experience at Berkeley, I was never able to take a bonafide UI design class until now. I’m excited to showcase what I’ve learned!

Design Manifesto

From my perspective, the design process is that of translating user needs and wants into a platform or interface. If I were to sum up what I learned from going through the design process, it would be that things do not play out as planned, and that an effort to be perceptive results in a product that is constantly evolving in a positive manner. The user is the central focus of just about everything, and using their opinions and feedback in a meaningful way requires careful and deliberate actions.

 

Picking up on details that interviewees give away

During needfinding, one can generally go far by constructing an empathy map. This empathy map requires the interviewer to be aware of the interviewee’s emotional cues. When I first began interviewing people, I let them get away with answers that cover up their true emotions (answers that one would give when talking with a stranger to maintain common platitudes). I realized that this is not the best course of action when trying to create a summary of their emotions, as much more meaningful things are to be found when digging deeper. Although one doesn’t need to call people out on their half-truths, one needs to take note of inconsistencies and contradictions, because those can often tell a story. 

Empathy map

One concrete example I can give is during the needfinding phase for my project to create a device that reduces food waste caused by people forgetting about things in their fridge. In the beginning of the interview, I took the platitudes of the interviewee at face value when I asked her about how it made her feel to throw away wasted food. Her initial response was something that would be expected, she feels bad about wasting food. However, later in the interview, she stated that she found cleaning out the fridge to be satisfying, as in the act of throwing away food made her feel satisfied. This statement, coupled with her indifference that I almost neglected to pick up on, made me realize that the person I was interviewing did not actually care about wasting food. This created a user group that I did not expect to encounter, and influenced my design of a “vending machine” refrigerator which essentially creates friction by forcing the user to look at all the contents in the fridge. By creating this friction, this design was able to reduce the likelihood of food waste in both people who cared about wasting food as well as people who didn’t. The takeaway here is that one’s expectation that the interviewee will say all of the answers doesn’t meet the reality that oftentimes one interviews an unreliable interviewee. 

Vending machine fridge wizard-of-oz

Getting design ideas down on paper

Keeping everything in one’s head is a bad idea. Small details might not be remembered from one day to the next, and the best way to get a snapshot of that great idea is to immediately make it tangible. In addition, being able to see what one is imagining in front of them allows for another perspective to be formed in which shortcomings that didn’t appear in one’s head will appear. It’s also much easier to organize ideas if they are physically in front of you. Visual aids are much easier to use in communicating ideas, so providing others with a sketch of what you’re thinking will expedite the process of explaining greatly.

When I was designing a prototype for an app to simplify the process of finding environmental volunteering, I made the mistake of thinking that my app was simple enough to be explained to my group using just words. I then went on to sketch it afterwards, not only losing some of the ideas that I had but also not communicating what exactly I wanted to my group members. Each member had their own idea of what I was going to do, and so the process of converging was made much more difficult after we each went off to do our own prototype.  

Volunteer event rating app

Asking the right questions in usability

Usability testing starts with the purpose: what questions do we intend to answer by conducting usability testing? Therefore, one needs to be careful and deliberate when selecting those questions to make the most out of the usability testing. Luckily, my group and I were able to formulate questions that exposed a unique dimension to the problem that we were trying to solve.

In the process of making an environmental volunteering platform, we asked the question of how users would react to different approaches of addressing no-shows. Our group was able to see a large problem in environmental volunteering which is statement of intent with no follow up. Thus we asked this question and saw a different angle of tackling the problem of encouraging more environmental volunteering, which was to either incentivize or penalize. By taking this problem into two different directions, in the final module I was able to take those results and apply them to a hi-fi product in which a system was built off of those findings (namely a reward point system which we measured to be effective and favorably reviewed in our usability testing).

Social aspect of Envol

Profile of Envol user with point system

Integrating feedback

Expanding on the idea of the unreliable interviewee, it is sometimes the case that what the user says they want is not necessarily what they actually want. The designer can sometimes create a feature or interface that is not to the specification of what users want but also address their feedback in a better way. In some cases, like in the iteration module where I helped to design a system for adding a social aspect, a designer can expand on the wants of the user and give them something that they didn’t know that they needed.

In my usability testing, I discovered that the user wanted to be able to volunteer with people that shared her interests. This seemed like a straightforward enough feature: just display the most common interests of the people signed up for an event, right? However, my partner and I were able to see that this desire for social aspect could be expanded so that it would address the aspect in a broader sense, one that was suitable for a wider group of users. We were thus able to create a social web design within the app that had features like being able to see one’s friends that are going to an event.

Event listings with “friends going” feature

Iterating and polishing: complex visual design in pursuit of simplicity

The current landscape of user interface design dictates that designs need to feel sleek and look modern. Design principles such as usage of whitespace and visual hierarchy are essential to this pursuit. Skillful usage of color palettes can also transform an app from drab into something truly eye-catching. 

In this sense, in my prioritization of simplicity in Envol I was under the impression that the user wanted a no-nonsense time-saver. In the first iterations of the design, Envol was stripped of any interesting color palettes or “non-essential” screen elements. However, my partner and I discovered through feedback after creating a much more visually complex interface that we had not taken away from the app’s ease of use, only enhancing the experience. We integrated color palettes and better usage of whitespace along with sleek and modern touches, and these changes were met with a positive reception. Thus, we learned that by changing the visual nature of the app we really have the power to redefine how the experience of searching for events feels, not just as easy but also as cool and satisfying.

 

Front page of Envol

Takeaways

Interaction with the user is key, and taking things at face value is oftentimes not the best decision in design. In our mission to interpret what the user wants and create something for them, we can really take some liberties to create something that exceeds expectations. A careful attention to detail and perceptive mindset allows the designer to ideate and develop a solution that addresses the problem in ways others don’t expect.

 

 

 

 

 

 

Design for Iteration Design Doc:

A Platform for Environmental Volunteering

Overview

Global warming and other environmental issues threaten our planet on a daily basis. Although many people are aware of the threat and would tell others that they are willing to help, few actually take the time to volunteer. With our product, Envol, we are trying to address the issues that prevent people from volunteering.

The prototype is trying to solve the problem of many different volunteering events having different sign up processes and thus taking large amounts of time. In addition, the current standard of search (Google) does not give relevant search results. By standardizing the signup process and aggregating all events into one platform with a powerful search function, the user can efficiently find the events most relevant to them and spend minimal amounts of time signing up for them.

Interviews

From our interviews, we found that there were several pain points that formed a barrier between the average concerned citizen and the active environmental volunteer.

Our user group is composed of working adults, some who are active in environmental volunteering and some who have no previous experience. We engaged with this group by asking them questions about their priorities and thoughts on the current landscape of environmental volunteering. We also conducted user testing with the group. From our second round of needfinding, we were able to learn that people who are already involved in environmental volunteering have something in common with people who are thinking about starting, which is that they value their time immensely. It seemed like the major pain point and obstacle for people who wanted to volunteer was the amount of time they needed to invest in finding quality events. In terms of new information, we found that the impact of events is important to some users, who want to see their actions directly benefit the communities or ecosystems around them.

Needfinding Domain: Anybody who would potentially volunteer environmentally, of all levels of experience

Methodology: Interview

Interview Plan: Investigate the barrier between idea and action when it comes to environmental volunteering.

Interview Results and Key Insights

Interview 1

Interviewee 1

 

Interview 1 Transcript

11/18/2019 3:00PM at Jonathan’s apartment

Interviewee is a 26 year old female working for the San Diego Water Authority

From the interview, I learned that individuals who are already motivated in terms of environmental causes can benefit from a platform that helps them save time in the search for volunteer events. It is becoming clear that time is an especially valuable resource for those who would actually be willing to go out and volunteer. In addition, the interviewee (who already goes out of her way to volunteer) cited long and convoluted sign up/search processes as a major pain point and deterrent. This shows that those dedicated to environmental causes are also not keen on spending lots of time to find a good event. There is also something to be said about the social aspect, as it is clear that volunteers would like to connect with like minded individuals in their volunteering experiences.

  • User needs to be able to find events of a high caliber and ones that have a good location without spending large amounts of time.
  • User needs to connect with like minded individuals in her volunteering experience.
  • User needs to see her volunteering making a direct impact on her surroundings and participate in a well-organized event (waste less time, have more flexibility).

 

Interview 2

Interviewee 2

Interview 2 Transcript

11/19/2019 5PM at Interviewee’s Apartment

Interviewee is a 23 year old software engineer working in SF

One of the target demographics for a potential app if participation would want to be increased would be those that say that they want to volunteer but just can’t find the time. From the interview, I learned that this demographic seems to convey that they would be more likely to volunteer if there was a tool/platform that allowed them to maximize their usage of time. In particular, the process of searching for the event needs to take minimal time and also the event that they possibly choose to attend needs to be close to perfect (reputable, fun with friends, and impactful) in order for these users to consider volunteering again. It is evident that the majority of people who volunteer don’t find the work nearly as fun as the social aspect, and thus an event without friends can dissuade repeat volunteers.

  • User needs to see a social aspect in events in order to want to volunteer more.
  • User needs better method of finding events that takes minimal amounts of time.
  • User needs to be able to verify the safety of events consistently.

 

Interview 3

Interview 3 Transcript

11/14/2019 4:05 PM at GCB Cafe

31 year old lawyer (subject declined recording/photograph)

Interviewee has most experience volunteering for other causes. He appreciates structure in his volunteer experiences, and needs to know the specifics of how, what, where, and when the task is to be completed. As a goal-oriented individual, he requires leadership and organization to make him feel like his time is being utilized effectively. And of course, he values the social aspect, especially as he is more committed to regular and less event-based volunteering.

  • User needs to have structure and hierarchy in a volunteering experience.
  • User needs to be able to know the details about any volunteering event.
  • User wants to be able to see the impact of his or her actions at a volunteering event.

 

Interview 4

Interview 4 Transcript

11/15/2019 6:15 PM at GCB Cafe

20 year old student (subject declined recording/photograph)

Interviewee does not have much experience volunteering outside of participating as a Scout during his childhood. He asserts that the most difficult part of volunteering is the logistical aspect, and as a rule requires an incentive to consider volunteering (in the Boy Scouts, it was a requirement to advance, if we understand him correctly). As someone familiar with the difficulties of volunteering as well as the lack of motivation to commit one’s time and effort to volunteering events, he recognizes that there is a distinct lack in the bridge from someone’s couch to the space of volunteering action. Many other users might empathize, as passiveness and a dislike of labor is not uncommon.

  • User needs the event to be well organized.
  • User needs to know the details of the event.
  • User needs external as well as internal motivation.

We identified two main “concepts” for our users:

  • Volunteer ranging from armchair activists to hardcore public servants compete against each other for the incentive — public recognition, in the form of internet points
  • Groups encourage the social aspect, and help volunteers find similar-minded people, in terms of volunteering interests, while fostering cooperative competition — public recognition, in the form of internet points

How Might We…

How might we encourage new volunteers to invest time into volunteering?

How might we make volunteering more social?

How might we introduce structure and organization in to volunteering?

Prototyping

The design concept would be a consolidated platform where one can quickly and easily find the events that they prefer. Our solution creates one place where a prospective or experienced volunteer can find legitimate and impactful events with helpful features like ratings, incentives, and search functions.

Lo-fi Prototypes

We decided that we would need to create an search page, where users could find events. Upon selecting an event, the user would be able to access all the aforementioned features, as well as see categories. The user would also be able to see what kind of organization was running the event. By joining such an organization, users would also be able to contribute to a social group centered around a sphere of environmental volunteering that they were passionate about.

In the age of instant gratification, a “recommended” section is essential and thus the app will use a ML model to provide the most relevant events to the user based on what they search for, favorite, and rsvp for. This will save the most time theoretically since there is a chance that what they are looking for will pop up on the screen the moment they open up the app. There is still a powerful search function which allows the user to search on their own criteria for events. Events and Organizations are rated by users so that users can look for the most reputable and impact-generating events/orgs.

These are some early sketches that we went with:

General app layout

We were constantly asking ourselves: will giving users a tool that allows them to bypass what they claim is the most headache-inducing part of the process of volunteering (finding good events), will we be able to encourage more participation? In particular, will both eco-minded individuals (will their time be saved?) and people who vaguely want to start volunteering (will they take the first step?) both benefit from a tool like this? This helped establish a basis for the more concrete step of implementation.

Incentivization system

Later ideas in the lo-fi stage included the incentivization system, which aimed to tackle our first “how might we” in a more concrete way than just convenience given our interviews and first usability study. Also, we wanted to create a system that could recommend fitting events based on the user’s interests. This sprung out of our third “how might we”, in which we aimed to make volunteering seem less like vague acts of charity and more attuned to a potential volunteer’s actual interests — in other words, providing structure to the environmental volunteering experience.

Early Hi-fi Prototypes

The prototype is trying to solve the problem of many different volunteering events having different sign up processes and thus taking large amounts of time. In addition, the current standard of search (Google) does not give relevant search results. By standardizing the signup process and aggregating all events into one platform with a powerful search function, the user can efficiently find the events most relevant to them and spend minimal amounts of time signing up for them.

We wanted to iterate not only on the previous design, but further focus on our own designs that we created for this module. Given the feedback in the needfinding process and usability testing process, we thought it was necessary to adhere to these principles when creating our user interface:

  • Simple and easy to use
  • Use of color and rule of proximity to encourage target behavior
  • Minimum amount of actions needed to find target events
  • Incentive and social aspect

An earlier signup hi-fi prototype.

Final implementation of the signup prototype.

Our prototyping process was heavily intertwined in to our usability testing process, as we constantly iterated on our design given informal feedback, discussions with others, and the actual usability tests.

Usability Testing

Full Usability Study Plans, Guides and Results

With our usability study, we really wanted to use new eyes to probe our interface design for any inherent flaws in layout, organization, and structure. In combination with this, we could use this opportunity to determine what kind of prototype would line up the best with our overall vision and are easiest to interpret for the average user.

Main Questions:

Generally, we wanted to consider these three questions in our main line of testing:

  1. What effects do different methods of attempting to get users to follow through with volunteering have?
  2. Do users want to have the easiest search experience possible (tailored recommendations), and will this ease allow them to follow through more often?
  3. What makes a user prefer one event over another?

Participants and Recruiting strategy:We recruited two of the individuals that we interviewed during needfinding, because we were interested in seeing whether our design took their viewpoints into account.

Usability Study 1

Setting:Conducted the usability study with the same user (26 year-old water authority employee from San Diego) at her house on 11/29/2019.

Method:Monitored usability testing: tester is observed and engaged within physical proximity

Overview of Study:

  • What questions did you want to be answered:Does making the process as easy and quick as possible make people want to go volunteer more?
  • Which prototypes did you use:Our initial prototype
  • What tasks did you have the participants perform:Compare looking for and signing up for an environmental volunteering event found via Google vs. most likely to work prototype

Top Three Takeaways:

  • People who have already had some experience volunteering really value their time, and they want events that will accommodate for their schedule. They also want to have the events that are relevant to them be the first ones that they see (save time in search process). An easy search and signup process can really make people volunteer more because the initial barrier is removed and the time that they save can be put towards actually volunteering.
  • Having the guarantee of safety and legitimacy is very important for just about everyone. Safety comes first whenever a person is going out potentially by themselves with people that they don’t know (which is the premise of a volunteer event).
  • The social aspect is important to people who have small amounts of time to give away. Since people who are likely to volunteer out of their own volition are usually working adults, they want to be able to socialize when they volunteer because they are using their free time and they aren’t really able to make friendships at work.

Early search and event prototypes

New event and search prototypes

Usability Study 2

Setting:Conducted the usability study with User 4 outside Blue Rock Cafe

Method:Monitored usability testing: tester is observed and engaged within physical proximity

Overview of Study:

  • What questions did you want to be answered:Does including the incentivization actually engage the user more? Is the further functionality noticeable, evenwithoutbeing mentioned? Is the app more intuitive and user friendly after making changes based on user feedback? Going through all the major functions of the app: is it navigable, even with further functionality added?
  • Which prototypes did you use:Original version, only with rating system (Prototype A) and Newer version of prototype with badges, XP, and overall overhauled UI language (Prototype B)
  • What tasks did you have the participants perform:Compare looking for and signing up for an environmental volunteering event

Top Three Takeaways:

  • Larger, friendlier UI elements with clear interactivity (rather than just colored text) and a more effective use of color are important in making sure functionality is presentable to the user.
  • Conceptually, incentivization should work, but it needs to have a large place in our design. Perhaps a group and profile screen would impact this.
  • Making different parts of the design distinct visually makes it clearer to the user what the purpose of the active part is, and also improves the interface in terms of navigability.

Group and profile based on usability study

These created two new pages, the group info and profile screens, which further cemented the social aspect of our app (adhering to our second “how might we”). We further overhauled the existing pages of our app to implement the incentivization and signup systems and cement a more fluid and appealing design language that we obtained from our needfinding and usability study processes.

Final Result and Takeaways

We attacked this problem from start to finish based on the idea of iteration, from lo-fi to final prototype. To do this, it was a constant struggle to work in user feedback as we constantly tweaked and overhauled our prototype. These two new ideas eventually ended up overhauling our existing systems drastically, but we feel the effort was worth it in iterating towards a direction that would most benefit our user needs.

Still, there is no doubt room for even further iteration:

  • Focusing on a narrower proto persona. We have uncovered that needs, interaction and content, as well as the way of exploration do differ within our current target group from user to user. Trying to address everyone’s needs did require a lot of effort, but it did make our final product much more useful in our opinion.
  • Addressing several usability issues: for example, the iconography, flow of actions, system feedback, and utilization of familiar concepts from the context of environmental volunteering should be improved. While there are usability improvements we believe we’ve made in the volunteering experience, though they definitely can be expanded on.
  • Further expanding our prototypes beyond Figma mobile devices. Maybe including physical objects and bigger displays for actual use while volunteering, which would also widen our product’s impact.

Further Links

Contact info

LinkedIn

jgong617@berkeley.edu