I am a senior working towards a Bachelor of Science degree in Cognitive Science specialized in Human Computer Interaction at University of California, San Diego.
In my free time, I like to swim, jam out with music, and stare at beautiful pixel art. You can check out my resume below!
Many people know about the video app, TikTok, however it is not as widely used as some other video sharing platform, like Snapchat or Instagram. In a team of 4, we wanted to find out the reasons why users prefer using other apps, issues that people had on TikTok, and ultimately using the data we found to improve the app.
As a team, we conducted recorded interviews and directly observed users after giving them tasks to complete. We wanted to ask pre-task questions to gauge whether our users have prior or similar experience with TikTok. We also wanted to see how familiar they are with the app. After asking them questions, we timed our users to see how fast they could complete the tasks. We took notes of their actions and reactions.
New TikTok users need to learn how to navigate around the app intuitively while browsing for entertaining videos.
From direct observations and interviews, the main issue trends were: visibility and consistency. Click here to look at our interview data.
Many new users struggled with knowledge based errors while well versed users struggled with action based and memory lapse slips. Users would intuitively swipe left instead of up to go to the next video. They ended up on their profile screen instead.
There were also a lot of buttons cluttering the home screen. We found that many of those functions that those buttons provided, such as going to user's profile, liking, commenting, and finding the song, could also be done in another way by tapping or swiping on certain areas of the screen. Having these extra buttons confused users.
Our design space compared usability (how similar the user's thought process matches the product design) and minimalism (how simple the layout is). We quickly rated similar video sharing applications based on our prior experience with each one.
In our redesign, we focused on usability and minimalism by taking out or consolidating the extra affordances that were confusing users. We decided to:
Excessive signifiers for an affordance will lead to confusion and frustration for first-time users. The key to creating a clean and easy to navigate user-interface is to be aware of what is necessary to show and what could be hidden to allow more screen space.
Several classmates were having issues with the light switch in our design classroom and said it was confusing and difficult to use. In a team of 5, we analyzed the issues of the light switch, conducted direct observations and interviews, analyzed data, and finally designed an improved prototype.
We conducted and recorded 15 interviews by direct observations and asking users questions afterwards. We filmed users actions and asked them to speak out their thought process. We asked all our interviewees a pre-task question to see if they have any prior experience with the specific light switch we are testing with in case it may cause any bias results.
UCSD design students and faculties using the Design Studio Room need a light switch that clearly presents the dimming feature and alternating light functions so they can quickly understand and manipulate the lights for their specific needs.
Our design space compared discoverability (how easy it is to see what you did) and usability (how similar the user's thought process matches the product design).
In the original design, the largest and most recognizable switch was the right-most one, which controls the presentation lights. As mentioned earlier, 8 out of 15 interviewees reached for the presentation light switch when asked to turn on one of the sets of alternating lights. Therefore, we decided to accommodate for this mental model by adjusting the width of the switches in accordance to the surface area to which they correspond i.e. the light switches for the alternating lights are wider because those lights cover most of the room. We also oriented the switches horizontally so that they mimicked the mapping of the room.
Three horizontal sliding switches that allow you to adjust the alternating lights' brightness by sliding the circle left (dimmer) and right (brighter).
The presentation light switch is the lowermost and it is narrower and shorter than the other two. We also added an icon depicting a person standing in front of a screen with a speech bubble to represent the corresponding function.
We had to give-up several aspects to ensure that usability and discoverability are prioritized. In the process of creating our redesigned and improved light switches, we made three main tradeoffs:
Designers need to take a step back, remember who our users are, and realize that a function that is “cool” is not necessarily useful. This is a case in which the designer was tempted to add a function that they believed to be useful, but in reality, it feels as if they were designing for themselves. For this reason, if we were to continue to work on our redesign, we would scrap the alternating lights in exchange for lights that acted as a single entity, lighting up the entire room; we would include a dimming function.
We noticed that a lot of students are struggling to balance between social activities and academics. So we wanted to design a web application where students could elaborate on academic materials with humor to increase memory retention and to bridge academics and social activities. Students could upload their own creations to share with others as well. In a team of 3, we designed a prototype for students to upload academic memes to study with.
Balsamiq (wireframing) Sublime Text (programming) Github (code sharing) Heroku (hosting site)
Students who are purely memorizing for exams need an engaging learning method where they could actively make connections on course concepts to increase deeper understanding, to encourage interaction with fellow peers, and to avoid burnout from stress overload.
We created storyboards to share our ideas of what kind of web app we wanted to develop. This storyboard shows an example of a student recalling a scientific meme they saw online during a test.
Next, we created paper layouts and conducted several Wizard of Oz prototype testing. Then, we created several low-fidelity wireframes of our mobile app idea by using Balsamiq to better design the homepage, drop down menu, and uploading page.
Using the prototype we created, we asked users to perform several tasks to navigate around and test the user interface. We also interviewed them afterwards to find out whether the subject page or the search bar worked better for searching up memes.
Unintuitive Button Placements: Users tend to press around different buttons to navigate around the app. There was confusion on the general layout of the headers and footers because home button was not in the middle.
Unobvious Pages: Users tend to neglect the subjects page because it was not part of the footer. Users thought that all the important functions would be all in one place.
Lack of Search Query Recognition: Users tend to fill in the form for uploading and search uploaded memes by title and/or description. However, we could only search things up through subject tags so people got confused when the title and descriptions are not showing up.Click here to look at our data.
After interviewing 3 users, we analyzed the data and found that there was a common error in button placement. We redesigned the buttons to place the home screen in the middle of the navigation bar and moved the upload button from the top right to the bottom for a better reading flow.
Our team presented the completed prototype and pitched the web app studying idea, Memeorize, to judges and students.
"We all know that feeling when we're trying to study but we need some help online. You’ll do a quick google search, and one thing leads to another, and before you know it, it's 1am and you're looking at memes. Wouldn't it be great if we could just get the best of both? With Memeorize, you can get all the entertainment of procrastinating while also being productive. Our users can upload educational memes that other students can use to learn. So next time, instead of going on Reddit or Facebook, go to Memeorize - because you can only say that you understand something if you understand its memes."Check out Memeorize's Prototype (only works on mobile layout)
Developers have different strengths in a team. Having a development plan chart helps with delegating and sorting out tasks. Create an Inspiration Board. Researching on similar apps can help with inspirations for creating your own. Wizard-of-oz prototyping is a cheap and fast way to test user experience flow before having to invest in a lot of time and effort in coding. Creating responsive webpages. It is good to constantly revisit, revise, and improve on our POV. The original idea and direction might evolve throughout the process.
I collaborated with another Public Relations Chair to create a logo and graphic designs for Cognitive Science Student Association's annual conference, Cognitive Crossroads.
Adobe Illustrator/Photoshop (logo design) Slack (communication with team)
Create a logo that illustrates the combination of "Design and Interaction" and "Language and Culture" for UCSD Cognitive Science Student Association's annual conference while maintaining the club's branding.
*The constraints were to maintain a hexagon shape and to incorporate the idea of blending "Design and Interaction" and "Language and Culture".*
In the final logo design, the crossroads represent different cultures meeting in the middle while the speech bubbles represent communication and interaction. This design still maintains the club branding by keeping a hexagon shape.
The colors represent the earth: blue for water and green for land. Human designs create opportunities and allow people from all over the world to travel across the sea and interact with each other.
Logos should have strong contrasting colors and simple shapes so it can still work when resized. Simplicity over cool details. Minimalistic is key. Bouncing ideas back and forth with another designer helps with seeing things in a new perspective. Always keep the idea of what you are designing for in mind. Try to find symbols that relate to the idea and incorporate them into the design.
For 2019 San Diego Hackathon (SD Hacks), my team and I developed a text sentiment analyzer over 36 hours by incorporating AWS Amazon Comprehension API. I worked as a front-end developer tutor on this project and explained the basics of HTML and CSS to another front-end developer. Check out EmoText (Note: The link may take a couple seconds to load and is only a basic prototype.)
Programs Used: Figma (wireframing) Sublime Text (programming) Github (code sharing) Heroku (hosting site)
Many job-seekers strive to grow their network, yet they are unsure of how to initiate conversations. Our team hopes to enable workers in the tech industry to improve their professional skills and networks through extending or redesigning a feature within an existing app to help encourage specific types of people in one's surrounding area to get together in-person and physically interact in a meaningful way.
My team and I redesigned LinkedIn for Android. We divided the work evenly where we all help conducted user research, tested prototypes, and designed new screens. I focused on the visual designing and maintaining branding consistency. I had an extremely fun time interviewing LinkedIn users from different levels of career experience and coming up with three personas that could relate with the target audience. I also created the UI sketches, one of the paper prototypes, and organized the prototype map flow on Figma to help increase readability.
Someone who is in or aspiring to be in the technology industry and is striving to gain more connections. Tech field is rising in demand within the job market. However, that also means it is also getting very competitive to land a job. By gaining connections and expanding their network, that individual will gain an advantage in the market for increasing their job opportunities.
3 out of 3 : LinkedIn participants could not find meet up opportunities to attend for career growth 1 out of 3 : LinkedIn participants actively interact with connections to build their personal network 3 out of 3 : LinkedIn participants want more personalized career-building information and did not utilize the hashtag filters
We conducted user research by direct observing and interviewing three LinkedIn users. Click here to see our recorded data.
Our direct observations validated our hypothesis that many LinkedIn users working in the tech industry face issues in finding ways to develop deeper connections for their specific field. In addition it was clear that tech users need easier ways to organize relevant information and to limit contents that are unrelated to their career direction or interests. Finally from our interviews it was clear that LinkedIn users from various positions have the common goal of needing a more efficient searching system to help find specific people who could help with advancing their career. Thus our solution must adapt to the users based on their own personal goals and connect them with the resources they need to accomplish them.
"People in the technology industry need an easier way to connect and communicate with field experts to organize small-scale meetings/gatherings in order to build up their professional profile and expand their career opportunities."
We came up with two workflows, the first being an interface for demonstrating how LinkedIn’s group features could be improved to facilitate physical interactions and the other setting up meetings between users for mentorship opportunities.
We felt that the goal of LinkedIn’s groups feature should be to provide users with a narrower platform with which to build connections. As such we felt it important that LinkedIn groups be flexible for new members and retain them for as long as possible. Our flow focused on three potential options for members of LinkedIn groups, inspired by other apps such as Facebook, Eventbrite, and Glassdoor: connecting with users with aligned career paths/skills within the group, finding relevant events and being kept up to date with the group’s organizers, and sharing information without fear of retribution. We felt that this would allow for users to engage more with the group and, as a result, lower attrition rates. This could allow for groups to grow their mentorship capabilities by retaining skilled members as well as being assured that any long-term events they hold will have regular turnout. This feature would likely help all three of our personas as it provides people like Mr. Albert and Nathan Boy a platform with which to build their network and provides people like Audrey Girl a way to find a support group to vent their frustrations as well as get a better understanding of others’ experience in their field.
We chose LinkedIn’s messaging section as our entry point. This was because we wanted users to have already interacted in one form or another before trying to set up meetings in order to avoid things like spam or feature abuse. A feature like this would primarily help out someone like Mr. Albert or Nathan Boy as it gives them a structured way of seeking one-on-one mentorship opportunities with new connections that they make.
As we were sketching, we had to consider a number of options for how we wanted to tweak LinkedIn’s current layout without disrupting its other features and drastically changing the UI. Drawing out the UI also gave us a chance to better understand the information we had to work with. For some of our features, for example, we were able to realize the importance of filtering as visualizing the relevant information showed how we risked overwhelming users.
Prototype A - Group Page Redesign: Connect with people with similar interest in a group by following an event organizer for event notifications.
Prototype B - Message Meet Up Redesign: Schedule and cancel a meet up request
Our paper prototypes were primarily based off of our UX flows with a few slight tweaks. One of the changes we made was that we decided to isolate two of the features in our UX flow, scheduling meet ups and navigating through groups, between our two paper prototypes. We primarily followed the layout of our UX sketches, but added in a few more contextual details to make the paper prototypes easier for users to navigate through. For prototype A we focused on a higher-level approach to making users more likely to interact, primarily through the use of LinkedIn’s groups feature. This contrasted with the approach we took for prototype B where our design was made to foster more personal connections between users by allowing them to schedule meet ups through LinkedIn’s messaging feature.
From our user testing, we learned that users felt that they could more comfortably approach and connect with new people through the system in Prototype B. They felt that while the solution presented in Prototype A would lead to developing more connections, they generally felt that those connections would be of lower quality as beyond adding new connections. Prototype A didn’t do very much to encourage developing those connections even further or even just maintaining those connections.
While Prototype B is what we feel we should largely continue with, we found a number of issues with it that we should address such as: discoverability and options for responders. We also feel that some of the ideas from Prototype A could be utilized moving forward and used to supplement the solution presented in Prototype B, primarily elements which encourage users to find and reach out to others they don’t know yet. By combining these elements of Prototype A with an improved Prototype B, we hope to increase both the quantity and quality of connections between tech industry professionals on LinkedIn.
For our final prototype, we focused on creating an easier experience for users to directly find and meet up with other users who could help them in their specific career development. We took the idea of being able to set up a direct invitation through messaging from our second user flow/paper prototype and expanded on it. Originally we believed, based on user testing and feedback, that our second idea was too narrow and resembled a plugin to the messaging feature more so than a novel redesign. From user testing and other feedback we also learned that prototype A required a lot more user-testing for each of its individual functions and decided that it would be easier to focus more in-depth on one function than to try and tackle a broader redesign. As a result, in our high-fidelity prototype, we decided to merge the filtering feature from our first idea to make it easier for users to start valuable conversations by filtering people by positions or interests. We also followed the the material design guidelines and added more options for users overall.
Before: In our previous design, the meet up form consists of several drop down menus to input information for creating the meet up invitation.
After: We added more icons to help guide users visually. The step-by-step process allows a more conversational aspect to creating a meet up invitation without overwhelming the creater with too many different options from a drop down menu. By presenting one idea at a time, users will only have to think of selecting one option at a time.
Before: The original design for the invitation included information such as: meet up method, location, topic and its description. The receiver can choose to either cancel or accept the invite and select their availability for the meet up.
After: We changed the invite design so it can look more like the Android Material UI. We wanted to incorporate the Linkedin brand colors as well to show that this invitation belong and fits with the Android UI as well as LinkedIn’s UI designs. We also added a header to emphasize on the type of topic users want to discuss about. Aside from the visual aspect, we added "See Availability" in the invite so the invitee can confirm if the time suggested works for them and they could also edit the information. We also consolidated the cancel/ignore options inside the edit button so there can be more user flexibility in the confined space.
Before: The original design allowed for the meet up receiver to edit details of the meet up to better fit their location, schedule, needs, etc. The option that brought up this form, however, took the place of where the cancel button was originally. During user testing, we were made aware of this missing option.
After: Based on user testing, we realized that we had to give users an option to ignore or decline a meet up within our alternative view. We decided that these options should be placed in the edit form on the receiver’s end in order to allow for them to review the details in full before coming to a final ignore/decline decision. We also added a reasoning field that would appear when receivers choose to either ignore or decline an invite. This provides inviters an opportunity to provide reasoning to the inviter if they choose to decline or report the inviter if they choose to ignore the request. We felt that the inviter should recieve some form of feedback when their invites get declined, so we made it mandatory for receivers to provide a reason for declining. On the other hand, if the receiver chooses to ignore the request, we allow them to optionally anonymously report any issues they had which may have led them to ignoring the request.
After accepting the invitation, LinkedIn will remind the users before the meeting through a notification.
I really liked adding the icons for decision making in our redesign. It easier to present a lot of ideas just by having one little symbol. The process of inviting a person to meet up is scary and overwhelming for many people. But the step-by-step process with categorizations really helped me sort out my thoughts more on what I want to ask.
Our future challenges include designing a better form for searching expertise around the local area for potential one-on-one meet ups and establishing a clear system online for finding expertise who are willing to help out and answer questions. The idea of meeting up with a stranger could be intimidating and has potential danger concerns. We also need to cover more scenarios for users after they accept the invitation. We could possibly have it create a reminder for users on their calendar.
I was really surprised when I found out about Google Material Design Guidelines! It was really helpful and I felt like I learned a lot from visual branding to trending functionalities.
On a side note, there were many discrepancies on LinkedIn for iOS and Android. They had different layout and functions so it was hard communicating with my team about the specific icons and functions. In future projects, choosing a specific display to work on is something to keep in mind so that everyone will be on the same page.
In 2019, I joined Harvesthru, a start-up that provides an online market-place to help improve food-sustainability, under The Basement program at UCSD. I am working as a UX/UI Designer where I collaborate closely with another designer, the operations team, and developers team to design both the mobile and web app by following an agile development structure.
I was Public Relations Chair for Cognitive Science Student Association (CSSA) in 2018-2019. Throughout the year, I attended weekly board meetings, designed the 2019 annual conference's logo and any necessary marketing assets such as flyers, shirts, and social media event covers, and printed materials for the organization.
In 2016, I co-founded an all-inclusive, beginners' friendly student-led choir to provide a safe environment for UCSD students to sing and meet friends. We are the only singing student organization that requires no auditions and is open to everyone. Currently with a team of board members, I plan and hold weekly rehearsals, special events, and fundraisers throughout the year.