During my freshman year in college, I taught myself how to use some of the industry standard design softwares like Sketch and Principle. I then put all of these skills to work by making a concept design of my version of an ideal chatting app. I want the app to connect local people together, and I therefore called my app localplus.
I started the design by keeping in mind that the app tI’m designing focus on grouping people together. That is why I make the first page of my design groups that I’m in. I made the groups the shape of a bubble in order to make the design more personal.
I came up with a few designs that I believe can help users to find their group most efficiently.
VERRE is a cosmetic company concept that I was working on during my freshman year. The cosmetic company caters to women of color, making the experience of purchasing cosmetic products and matching their skin tone with the correct product easier for women of color.
I started this project when one of my friends, Bianca, told me about the frustration for women of color to find the cosmetic product that fits their skin tone. Bianca is Filipino American, and she said she is always having trouble finding the cosmetic products for her skin. Most of the products in the market right now are catered to women with a lighter skin tone. However, for her, she has to search for the cosmetic product in stores for hours before finding the right one. I told myself, there has to be a better way.
I was inspired by one of the photography classes that I was taking during that time. In that class, we talked about the power of white balancing and how that can make sure that the picture shows the most natural color. An idea comes to me, why not allow users to white balance their pictures, and then we can use that color to help the user find the right cosmetic product?
So I began to design a prototype for this project. I first sketched out how I want everything to look. In order to make a more realistic app concept, I taught myself how to use Adobe XD and Adobe Illustrator, and used those tools to create my prototype. Since I want the color to be a big part of this app, I designed the app so that the main color is black and white. That way I can make sure that the color will catch the user’s attention and can be a good call to action button.
After hours of hard work, I was able to come up with a prototype thetas both pleasing to the eye and easy to use. I tested out some of the features of the app with some of my friends. I have my friends a working prototype and asked them to complete a series of tasks. After testing out with them, I realized that the shopping cart feature should be better optimized to fit the user’s needs. I, therefore, put the shopping cart on the navigation bar instead of in a hamburger menu.
I also created some of the infographics that will help introduce our product to the consumers.
Uniters of UW Poster Design
Unite UW is an on-campus cultural exchange program that builds bridges between domestic and international students at the University of Washington. Unite UW’s goal is to create a mutually-enriching international experience in a local setting. The program aims to engage student participants in cultural exchanges to enhance global understanding, overcome barriers and boundaries, inspire lasting international relationships and unify our campus.
Uniters of UW
We started the Uniters of UW project to promote a closer relationship between international students and domestic students at UW. After becoming a member of Unite UW, we realize that many of the international students come from diverse backgrounds. However, many of their stories are left untold. We created the Uniters of UW project to help international students tell their stories, and to show people the beauty of a diversity.
As the marketing director of the project, I wanted to use pictures to tell the stories of individuals in this project. I also wanted to use some of the inspiring quotes from their interview to convey the essence of this project, which is diversity in ideologies among all of us. I first came up with a design that emphasizes on the quote of the individual.
After discussing those design elements with my friends, like the font and the placement of all the quotes, I experimented with different font sizes, colors and quote placement, I realized that even though quotes with a bigger font might be effective in a poster, it is not as effective in a facebook post setting. Therefore, we decided to change the placement of the quote and the size of the font.
After consulting with the team, we ended up choosing two of these designs for our final product. One of them would be for posters that we will put on around campus, and the other one would be for Facebook posts.
Blog: Human Centered Design
During my freshman year, I took HCDE 210, a Human Centered Design Exploring class offered by HCDE department at University of Washington. Throughout the course, we explored ways which designers can make sure that their designs are intuitive and efficient. Here are some of the blogs that I wrote for that course.
UCD Charrette Process Blog — User Centered Design
The first Design Charrette activity in HCDE is to design a better car control system to meet the need of different people from different background.
There are already existing solutions in the market now, but we decided to try to design something specifically for some group of people. In order to experience the whole process of Human Centered Design, we started with figuring out what our target audience is. We did some brainstorming exercise and came up with about 50 different audience type.
We then thought about the scenarios which people will use the product. Including the way people interacts with the product. We drew visualizations of different scenarios. After that, we started the design process.
We started out the process with one big goal in mind, which is to make sure that the user won’t need to touch the screen too often. We solved that problem by having a countdown clock for each action. If the system believes that the user will initiate the action, it will give the user a countdown clock. After the countdown, the system will just initiate the action. We also made sure that it’s easy for the user to cancel the action really quickly.
We raised some questions during the process. The first major one that we faced was whether to create a system for everybody or just create the functionality for some specific users. Due to the limitation of the assignment, we chose to design a system specifically for new parents who just had kids, who might not be comfortable with raising a baby yet. And after that, we thought about what they will want in their daily use and create the system that we have right now.
I like the fact that you can design your own system without much limitation in this project. There’s are virtually unlimited ways that we can solve this problem. But we are able to narrow it down by keeping in mind that we are designing the system for users. Therefore we need to make sure we have everything that the user need and the way the user interacts with the system should also be safe and efficient.
This idea that we can use a countdown clock to replace the normal buttons is really creative. But it’s really hard to achieve because it takes a lot of data and machine learning for the computer to figure out which button might the user press and use that as a default option. However, if we can figure out how to use this method, it will be really good because we don’t need to worry about pressing the button anymore. With the help of text to speech system, the car can automatically make decisions for the user while giving them a generous time to reverse those actions. I think it will greatly improve the safety of driving because of its non-intrusive nature.
HCDE: Interaction Design Process Blog
What we did
Last week, we worked on a project which we try to design an app for a citizen science project, which is to keep track of the water quality of a certain area. The app that I designed is called “myWaterQuality”. The objective of this activity is to design an interaction that is effective in submitting data, textual information, some incentive and some extra features.
We first approached the problem by thinking about what kind of user we are designing for. After going through a lot of brainstorming, we made up our mind on parents that live with their kids who just moved into a new house by the ocean. After that, we create the basic structure for the app and use note cards to create the visualization of our project.
Another objective of this activity is to get us used to use online tools (marvelapp.com) to create a rough mock up for an app. That could be really helpful in the future especially when you are working in the job market.
We also mentioned how to make a product video so we can show a user using our app and try to attract new customers. I created a video log to explain how the app works, which can be found here.
Reflection on the experience
We started by focusing on only a small group of audience, which is the family that just moved into a new house. That experience helped me make sure that I always keep the user in mind when I design an app. I will first think about what the user need and what the user wants for an app so that I can fulfill their needs.
The brainstorming process helped us generate as many audiences as possible so that we do not forget about a certain group of people. I think that should be a big part of HCDE. It’s called “Human Centered” design after all, which means putting the user first.
After this experience, I was able to use online tools to create my own mock up apps. This requires virtually zero programming experience. However, it’s a great way to convey my message to my group if I were to work in a big company. I will be able to use visual demonstration instead of just talking about my ideas.
Also, I learned the importance of putting the user first when we are designing anything. In order to make a successful app, we need to make sure that our app is solving a pressing problem that our society need the solution of and make sure that it’s designed for users.
“the effectiveness, efficiency, and satisfaction with which specified users achieve specified task in particular environments.” (ISO 9241)
What we did?
This week, our group in HCDE class consisting of Sylvia, Lin and me explored the field of usability test by testing the usability of one of the microwaves in one of the residence halls at the University of Washington. We conducted the test with three participants: they are all young men and women between the age of 18 to 20. They are all students of the University of Washington. Among them, one of them is male and the other two are female. The male participant and one of the female participant have experience with using the microwave, and they are code named Participant 3 and Participant 1. The other female participant is code named Participant 2.
How we did it?
After determining the appliance that we were going to do the usability test on, we quickly narrowed down three potential participants. We hope to investigate how college students will use the microwave. We, therefore, set a goal to find both male and female participant between the age of 18 to 21 at the University of Washington. Before the usability test, we wrote a script that we would read to every participant during the tests, including an important factor of Usability test: it’s on the machine, not on the human. We also included some general instructions, the rights as a participant and acquired their oral consent before recording the test in any form. After that, we gave them pre-written, specific instructions on what they will need to do with the microwave while narrating their thoughts during the test. We then record the data and do a brief interview after the test. We recorded their time, their error rate and difficulties on a scale of one to five.
Why we did it?
We hope to have a generalized pool of participant, and that is why we strived for diversity in our test. We chose to record the time because time is a good indicator of how good the user design is, for a good design usually save the user time and reduce the hassle by increasing the efficiency. We recorded the error rate by dividing the mistaken steps by the total steps that the participants took. We can, therefore, infer how good the design is because a good design is usually associated with a lower error rate, thus improve the effectiveness of the product. The difficulties in the scale of one to five aims to measure the satisfaction of the product because the better the product is designed, the less likely the user is going to say that it is hard to use which leads to dissatisfaction.
Reflection on the test
This experience made me realized that testing is a really good way to improve a product. For a microwave manufacturer, for example, they should have tested the product before they mass produce them to improve the product. Now when I finished designing a product, instead of sending them straight to production, I will do some usability test with my friends because I realized how important usability test can find so many problems in an existing product. It made me realized that there is always room for improvement for every product as long as we put in the hard work to test them extensively. This also gives me some ideas of how to improve the user experience of a microwave so that it can be more efficient, more effective and more satisfying to use. One day I might design a new interface for microwaves and help make everyone’s lives easier.
What we did
Ideation is the process of coming up with ideas in a production process. It is also called brainstorming sometimes. This process is where many good ideas get discovered and eventually evolve into a creative product. This is the reason why when I try to find a new form of sustainable transportation, I started with ideation. I started by coming up with many different ideas in a divergent manner: sketching every idea that comes to my mind, not quick to judge whether it is a viable good idea. I did this because every idea is valuable. Every idea might start something new. I started sketching on papers. I stopped after I came up with 10 ideas. Then I picked one idea out of the ten ideas that I came up with, and expand on that one idea. This will help me converge my ideas down to one specific area, and come up with even more ideas.
I learned a lot from this Ideation workshop. I learned the skill to think divergently and then narrow in down using convergent thinking, I learned that there are certain rules that I need to follow when I try to come up with as much idea as possible. These are going to help be more successful in the future when I am working in a bigger group and we have to work together to come up with new ideas. I realized that new ideas can be delicate and I have to make sure that I do not shut anything down before it can even develop. I also know that I need to strive for quantity, which is going to help the group to come up with a lot of new ideas. I need to do what I did in this workshop to think divergently and then convergently. Next time when I come up with something other than sustainable transportation, I will have the confidence that I can do well in similar ideation activities.
HCDE: User Research
What we did
Inthe User Research workshop, the researchers did user research on the topic of transportation. The objective is to find flaws in the existing design solutions and come up with potential research topics which might lead to a better design to solve the problem. The researchers conducted the research by observing people who use the bus stop outside of District Market at the University of Washington. The researchers began by taking field notes in the form of bullet points and sketches. Later, the researcher will read through the field notes and compile them into a memo which includes three observations. In the end, the researcher proposes some future research opportunities over one of the observation.
I like this project because we make something that we see every day: people waiting for the buses at the bus stop into something that we can research on, and potentially make a difference in the experience. I like it because I believe it yields the most natural results because unlike any research that we have done, this one requires us to simply observe what is happening. I think this is a better way to solve the most mundane problems.
This technique can be applied when we are conducting user research, especially before ideation, when we are coming up with ideas to work with. It could also be useful in product testing especially when we can observe how people interact with our product. For products like youtube, people can simply the way move their cursor, the kind of videos that users watch to find some areas which the current system could be improved. For other projects, however, this technique might not be the best way to conduct a user research, especially when we are testing whether users know how to use the product before we roll the product out. For software like macOS, it’s impossible to roll out an unstable version of the software just to test how people might react to it and find its flaws. A much better way is to conduct a usability test internally in the company instead of risking ruining the software experience for many people.
What we did
During the visualization activity this week, we worked on a research topic that we choose and make a visualization of a complicated and messy data raw file with the help of tableau. We first chose a target user group, the one that I chose was a charity that provides help when people are in mental crisis and provides support when necessary. I chose that because we have data for mental calls to 911, and I believe that that data will help the organization decide when and where to assign the volunteers to work on the ground and pick up calls. We did that by coming up with a research question, in my case it was how many volunteers should be in the call center during a certain month or time and where volunteers should be assigned to. We did that by coming up with a map visualization, a tree chart, and an area chart to represent different data set.
So what (B)
I like this project because, for me, I always struggle to visualize data. When I see the chart with all those data coming from all kinds of places, I get really stressed and do not know what to look for. One thing that tried to do was to create a visualization using excel. However, excel is not always the best tool to do it because there are so many things that it could not do. After getting introduced to tableau, I realized that a software like this can really help me streamline my process to visualize the data. For me, this means that I will be able to create a better visualization based on the data type. For example, I am now able to create a map just base on the longitude and latitude. For my peers, this means that I am a better presenter of data because I can visualize them instead of just presenting the boring raw data.
I think this is really helpful for me because I am working on my own startup. With the skill that I learned, I will be able to visualize all of the data that I collect from my customer research. I actually had a customer research feedback from Google last week, and it has been sitting on my computer and I never got the chance to look at it. However, with the help of tableau, I will be able to visualize all the data and present it to my potential investors. I believe that they will appreciate a data set that is nicely visualized. With this skill, I will be able to help my co-founders to visualize the data, which will help us make better business decisions in the future.
HCDE: Device Prototyping
What we did
During the studio this week, we used the littlebits Kit to create a device prototype for a research question. My group chose the problem that when kids are learning how to cook, they usually forget about the food that they are cooking and leave it on the stove. This creates a potential hazard for the kid and everyone living in the house. Since our user group is parents, we decided to make our product easy to use, which means that we only needed the user to set it up once without maintenance. We approached this problem by first choosing the parts that we might be using. For example, we chose light sensor, a buzzer for alarm, a temperature sensor, a display, a regulator and a fan for this project. Then on paper, we drew how we are going to arrange each part and finally we put them together with actual parts. We went through this process so that we can keep in mind who we are designing for so we think about what the user might need. We drew it on paper first because it makes our logic clearer when we put them together. Also, it’s easy to change a diagram, so it would be easier to fix if we were to make a mistake.
So what B
I like this assignment mainly because I am always curious about how designers actually prototype their products before production, and this studio gave me a brief glance into the world of designers. I like the technique because it is simple and designers do not have to invest a lot of money to make a prototype, but it is really helpful in conveying ideas. It also it proved to me that we do not have to be electrical engineers to create device prototypes, and that is really reassuring for me as a designer.
In the future, designers can apply this technique when they are designing a prototype for start-ups or at work. With a working prototype, it is so much easier to pitch to investors or managers why they should invest time and money into their idea. For example, when someone is designing some small gadget, they might build a prototype using littlebits to convey their ideas. When people are working on any projects that involve building a device, this skill will come in handy to help them build their first prototype. However, if someone is building a software, this technique might not be useful because after all, this technique is for hardware only.