Angela H. Xu



Audrey's Website

A website design for a college campus cafe.

Freshpresso

Demystifying the coffee shop ordering experience with an interactive kiosk.

WeCycleIt

An app with local recycling resources for homeowners.

Progress

An app to encourage consistent, daily progress on projects.


Reading Design Challenge

An app to motivate a student having trouble completing his readings.

Poster Design

Designing typographic posters for a conference.

Project-in-a-Box

Developing hands-on project kits for K-12 students to spark interest in engineering.

Audrey's Website


Timeline

January 2019 - March 2019

Role

User research, UI design, prototyping

Team

Andy Xia, Janet He, Shelby Tindall

Links

Mobile Demo
Desktop Demo


Overview

Audrey's Cafe is a student-run cafe located inside Geisel Library at UCSD. It is a popular and convenient spot for students to grab a drink while studying at the library.

After several management changes, Audrey's Cafe ended up without a website of their own. In January of 2019, my team reached out to the student workers and in 10 weeks, we designed a website for them.


Client Interview

To start our research, we met with the operations manager, Bri, and the fiscal and inventory manager, Diana. We prepared a series of questions regarding their goals for the website as well as general goals for the business.

Their main goals for the website were to have a simple-to-understand menu, to have easy access to their hours of operation, to showcase their quarterly specials, and to revamp their catering form. In addition, as a completely student-run business, they also wanted to show more of the student-oriented aspect of their brand.

Take a look at the full client survey responses here.


User Interviews + Personas

Following the client interview, we began interviewing potential users of the website in order to obtain some insight into what customers would need the most in a cafe's website.

Based on the responses of the 14 people we interviewed, we created 3 personas that represented our user base. The Coffee Connoisseur was someone who was very particular about the taste and quality of their drinks. The Caffeine Addict was someone who was looking for a quick fix to give them energy. The Frugal Friend was someone who just wanted the cheapest drink. A common need among the 3 personas was a menu that provided them with the information they wanted to know. An additional need that was important for the Caffeine Addict in particular was the ability to know when the cafe was open.

Take a look at all of the user interview responses here.
Take an in-depth look at the personas here.


Competitive Analysis

Before working on the design of the website, we performed competitive analysis on 4 other coffee shop/cafe-type businesses to research how they executed certain aspects of their website such as branding, functionality, and navigation.

Our main takeaways from analyzing the websites of these competitors were:
The homepage should display important information for users to see right away.Navigation titles should be clear and simple.The design should be clean and minimal so that pictures and important information can pop out more.Make sure the menu is not overwhelming. Make good use of a simple layout or break down the menu into sections and use collapsible menu.Use a responsive web format to ensure website remains consistent between devices.


Moodboard

Using Audrey's pre-existing branding as a base, we created a moodboard to help us guide the aesthetics of the website. The client wanted to emphasize a welcoming feeling through the cafe's brand. We felt that the bright and lively colors used in their existing branding already elicited a friendly atmosphere, so we wanted to retain their original color palette as much as possible.


Sketches + Wireframes

Since a large number of Audrey's customers are students on the go, we designed the website for mobile first. The desktop versions of the pages were mostly similar to the mobile, but were altered for viewing on a larger screen. After sketching paper prototypes, we began creating digital wireframes in Figma.


For navigation, we opted for a hamburger menu that opened up from the top of the screen when tapped. The footer contains the location, regular hours, and contact information for quick access. On the homepage, we showcased the quarterly specials through a carousel that cycled through images of the drinks. Navigation for the desktop version was changed to a top navigation bar.


Audrey's existing menu was a very long, very overwhelming pdf file (uploaded online on the library's website). To make the menu easier for customers to read, we decided on a collapsible menu inspired by Lani Coffee's menu. Tapping on an item on the menu displays its ingredients on a pop-up modal. On the desktop version, we added a picture to each menu section that was representative of the items in that section.


The Hours page has a calendar layout to accommodate all of the special hours the cafe holds throughout the quarter.

The About page contains short bios of the employees to further emphasize that Audrey's was run by students, for students.


Audrey's existing catering form was a long and cluttered Google Form. In our competitive analysis, we saw that other coffee shops had a built-in catering form on their website. For our design, we also made the catering form a dedicated page so customers could submit a request for catering directly through the website. We also used a collapsible layout for the catering page, breaking the form into sections. The desktop version of the catering form had a similar layout, but with tabbed sections instead of an accordion.


Prototypes

We kept much of the UI design from the wireframes in the first prototype. We added Audrey's colors and whimsical Dr. Seuss graphics.

The Catering page was changed slightly. The Info and Order sections were swapped so that the catering menu would be the first thing users see. This way, users could look at the catering menu without having to input their information first.


The homepage initially posed a bit of a challenge for us. It didn't look as cohesive with the rest of the website and didn't convey as much of a sense of "lusciousness" (in the words of our professor) as we had wanted. There was also the issue of making sure users had quick access to the information that they needed the most, specifically the menu and hours, which the homepage wasn't quite delivering on.

We decided to redesign the homepage entirely. In place of the carousel, we added an eye-catching hero image with quick links to the menu and hours as a call to action.

We placed a banner advertising the quarterly specials for winter with pictures and descriptions of each drink below it.


User Testing

To test our prototypes, we asked 3 users to perform a set of tasks:

Find Audrey’s hours of operation for today.Find the ingredients in Kian coffee.Use the prototype to find a drink you’d be interested in purchasing under $4.00.You need to get catering for March 27th at 10:30am. See how much it would cost to get 2 airpots of coffee and 3 carafes of iced tea at Audrey’s.List the 4 quarterly specials.Find out who are the people who run Audrey’s.


The 3 users were able to perform most of the tasks with relative ease. However, we noticed that users were getting tripped up with the quarterly specials task. They tended to check the menu first but the quarterly specials were only listed on the homepage and were not included in the menu. Our client specified that they wanted to separate the specials from the permanent menu in order to not confuse customers, as they often have customers asking for special drinks that were no longer available. In this case, adding the specials to the menu was not a viable solution. Instead, we shortened the hero image on the homepage to make sure the winter specials banner would be above the fold and immediately visible to the user.

Users also had a tendency to try to open menu sections by clicking or tapping on the menu header bars, but we had only made the plus and minus symbols clickable. This was an easy fix, however—we made the entire menu section header bars clickable afterward.


Final Prototypes

Based on the results from user testing, we updated our prototypes accordingly and made minor aesthetic changes as well.

Check out the mobile prototype here.
Check out the desktop prototype here.


Freshpresso


Timeline

April 2019 - June 2019

Role

User research, UI design, prototyping, branding

Team

Dana Chou, Leah Zhang, Samm Iwamasa

Links

Demo


Overview

Freshpresso is an interactive kiosk that makes ordering easier for new coffee shop customers. Coffee shop menus can be overwhelming as well as confusing for those unfamiliar with coffee-related terms. To address this issue, we wanted to design a kiosk that could be placed inside a Starbucks cafe so that customers who needed more time to decide could browse the menu more thoroughly.


Preliminary Research + Competitive Analysis

My team chose to design a kiosk for use in a coffee shop setting. First, we did research on existing kiosks in similar contexts to see what these kiosks offered and what they lacked. We did not find examples of kiosks for our exact context, but we examined self-kiosks in other settings such as restaurants and shopping centers. This competitive analysis gave us some insight on the types of functions our kiosk may perform.


Observations + User Interviews

To figure out what kind of solution we could offer, we did some observations in the setting we wanted to put our kiosk in, which was the Starbucks cafe on the UCSD campus. We noticed that the drink pickup area was often very crowded. The crowding was further exacerbated by the close proximity of the pickup area to the ordering line as well as the seating area. We also saw some customers who spent a long time looking at the menu and deciding what to order, which held up the line.

We then conducted interviews with 4 customers at the Starbucks to learn more about their coffee-buying habits. Despite Starbucks being consistently busy, the interviewees did not have problems with waiting in the long lines or with the wait time to get their drink, since both were relatively fast. Some interviewees found the ordering process to be cumbersome due to baristas getting their order wrong or having to interact with the cashier to place their order.

Later on in the process, we interviewed one of the Starbucks baristas about their work and the challenges associated with it. We were able to gain more insight on how a ordering kiosk might affect and fit into their current workflow.

Check out the observation notes here.
Check out the user interview responses here.
Check out the barista interview responses here.


Personas

Drawing from our observations and interviews, we created 2 personas that represented our user base. The first was a busy student who needed fast service as well as the ability to customize her drink with assurance that her drink will be made correctly. The second persona was someone who wanted to try new drinks but was not that familiar with the Starbucks menu and therefore needed enough time and information to decide what to order.


Storyboards + Idea Refinement

My team drew storyboards to illustrate possible scenarios in which our kiosk could provide a solution to a problem.

It was a bit of a challenge for my team to focus in on a target audience and main function. We wanted to improve the ordering process for customers but we also needed to differentiate our solution from the existing Starbucks app. We discovered that although people can use the Starbucks app to order and pick up drinks in the store, this particular Starbucks cafe on campus did not offer this service. With this revelation, we moved forward with our ordering kiosk but made it clear that the setting for the kiosk would be the on-campus Starbucks specifically. We also decided to target mainly customers who were unfamiliar with the Starbucks menu. While a Starbucks regular could very quickly order at the cash register, a new customer could use the kiosk to place their order, allowing them to browse the menu in its entirety and take as much time as they need to decide.


Moodboard + Design Specification

Although we were designing our kiosk for a Starbucks, we couldn't use the Starbucks branding for our product. Instead, we created a fictional brand for our kiosk.

For our brand, Freshpresso, we wanted to convey a chill, refreshing, and comforting feeling with a clean and simple aesthetic. We constructed a moodboard to explore color and aesthetic options.

From our moodboard, we put together a style guide establishing our color palette and visual design components.


Sketches + Paper Prototypes

Next, we made paper prototypes to determine the interactions and flow of the interface. New customers would be able to sign into the kiosk as a guest or sign up for Starbucks rewards. Although the main audience was not Starbucks regulars, regulars would still be allowed to use the kiosk, so we also wanted to make it possible for these users to sign into their rewards account. After signing in, the user would be able to browse the menu and order their drinks.

Originally, we made the kiosk a preorder system where the user would be given a drink ticket. The user would then show the drink ticket to the cashier and pay. Later on, we changed this so customers could order and pay at the kiosk because otherwise it would be troublesome for customers to have to line up at the cash register after they ordered at the kiosk.


Digital Prototype

Referencing our paper prototypes and style guide, we created a digital prototype in Figma.

When the customer walks up to the kiosk, they are prompted to sign in as a guest or sign up for Starbucks rewards. Those who already have a Starbucks rewards account can sign in with their login information or by scanning their Starbucks app. After signing in, the user can browse the menu. Each drink page has a description of the drink as well as its components and nutritional information. The user can customize their drink to their liking by tapping the icons for size, creamer, and sugar. There are also additional customization options under the icons. The header will update with the customizations the user chooses. The user can then add the drink to their order, check out, and pay. After paying, a receipt prints out of the kiosk for the user. A drink label is printed on the cashier side, which is then attached to a cup and sent down to the barista.

Check out the interactive digital prototype here.


Physical Prototype

To prototype the physical kiosk, we first made a crude cardboard mockup. We then made a 3D CAD model of the kiosk in SolidWorks, refining the design to be closer to the shape and dimensions that we wanted our final prototype to be. We made a second cardboard prototype, referencing the dimensions of our 3D model. Our final physical kiosk prototype was made of laser-cut foam core board. The digital interface was displayed on an iPad and inserted into the kiosk.

Since the UCSD Starbucks was fairly small, we decided that the best area to place our kiosk in was next to the indoor entrance. This location was close to the start of the line but did not obstruct anything. We added a sign to indicate to new customers that they could order at the kiosk.


WeCycleIt


Timeline

April 2019 - June 2019

Role

UI design, prototyping, front end development

Team

Debbie Vo, Julius Guzman

Links

Github


Overview

The theme of this project was to design an app for users who are very different from ourselves. My team decided to create an app for homeowners.

Waste disposal can be a daunting task for many homeowners. Whether it's from spring cleaning to moving to a new house, homeowners are likely to find themselves with a pile of items that are difficult to recycle or require special services to dispose of. WeCycleIt is an app that allows users to search for local recycling centers by the type of material they want to recycle.


Storyboards

We sketched out 2 storyboards to illustrate how the app would be used. The first involves searching for a nearby recycling center to drop off boxes. The second involves using the app to look up how to recycle certain items and arranging an at-home pickup.


Paper Prototypes

We created 2 paper prototypes. The first prototype used a quiz-like process for searching for nearby recycling or donation centers. The app asks the user a series of questions and returns a list of centers based on their answers.

The second prototype used a search engine approach where users choose from recycling or donation centers, enter their location, and get a map of centers that are nearby.


Digital Prototype

For our digital prototype, we mostly referenced our second paper prototype with the search features. We ended up scrapping the donation center aspect of our design and focused solely on recycling. In addition to location, we added a search field for the item material. We built out the frontend of the prototype using HTML, CSS (mainly Bootstrap), and Javascript. We used Node.js, Google Maps API, Earth911 API (recycling center data), and SQLite for our backend.

On the homepage, the app has text fields where the user can input the type of item they want to recycle as well as their location. Hitting the search button brings the user to the search results page for nearby recycling centers that can accept the item. Users can switch between a list view and a map view and are also able to filter results. Additionally, users can schedule a curbside pickup through the app if the option is available for a particular recycling center. The app also includes a recycling guide that users can reference for common types of materials.

Check out the Github for this project here.


Progress


Timeline

January 2019 - March 2019

Role

UI design, prototyping, front end development, user research

Team

Debbie Vo, Joycelyn Peng

Links

Github
Demo


Overview

The theme of this project was to design an app that presents information in a way that helps users. Progress is an app that encourages users to make consistent daily progress on their projects by providing visual feedback of their productivity.


Storyboards

We drew 2 storyboards to illustrate different scenarios for a our app and how it might solve a problem. Both storyboards involve users who are motivated to work more after seeing their progress (or lack thereof).


Paper Prototypes + Wireframes

We made 2 paper prototypes to test the flow and functionality of different designs. Our first prototype used a calendar layout to visualize progress on a project. The user can add a project with its start date and due date. The project is added to the daily list and the user can mark the project with "Yes" or "No" depending on whether they worked on the project that day. They can also mark the project as "Complete" if the project is finished. Each of these marks show up on the calendar. The user can also view statistics of their projects overall as well as statistics of individual projects.

The second prototype uses a list view and a more quantitative approach to visualization. The user adds a new project and specifies the start date, due date, type of project, unit of measurement, and total units to complete. In the example, the project is an essay and progress is measured in number of words written. Once added, the user can input the number of units they completed that day. The user can also look at a graph tracking their progress over time for each project.

We performed user testing with both of these paper prototypes and found that users vastly preferred the first prototype with the calendar visualization. Most users felt that the second prototype was less engaging and thought that projects would be difficult to quantify in units.


We then tweaked our calendar paper prototype and created mockups of our main screens in Balsamiq. We changed the Yes/No buttons to checkboxes since some users during testing expressed concern that people would not like admitting that they did not work on a project that day. We also added due dates and edit buttons next to the project names. In addition, we added a column that tracked users' streaks for each project, or how many days in a row they worked on something.


Digital Prototypes

We built out the frontend with HTML, CSS (Bootstrap), and Javascript. For the backend, we used Node.js as well as some libraries and plugins for the calendar (FullCalendar), circle charts (Chart.js), timekeeping (Moment.js) and checkboxes (Persistent Checkboxes).

We made several changes from the wireframes to the digital prototype. We altered the due date to read the number of days until the project was due instead of the actual date so users did not have to do that calculation themselves. There were also features that were incredibly challenging for us to implement, such as the edit function and marking the calendar. We ended up abandoning some of these features or switched them out for an easier to implement but less usable alternative.

We tested a circle chart visualization for the main page and found that users actually preferred it over the calendar visualization. We ultimately pivoted to the circle chart and scrapped the calendar completely.


Final Prototype

For the final prototype, we continued with the circle chart visualization and added styling to the app. We were able to implement most of the functionality we wanted but had to make compromises with others for the sake of time. We removed the streak tracking on the main page and put it on the Stats page only under individual statistics. We struggled to implement a working edit function so we changed it to a delete function. To delete a project, the user must type the name of the project. The process is not ideal, but it works for the prototype. If we were to iterate on the final prototype, we would definitely try to implement the edit function and improve the usability of the app.


Reading Design Challenge


Timeline

February 2019

Role

Brainstorming, UI design

Team

Joshua Tjong, Katya Noble, Nessa Vu, Osgood Gunawan, Victoria Vu

Links

Demo


Overview

The prompt for this design challenge was to design a solution for a student who was having trouble finishing his readings for class. My team came up with an app that made reading into a game and would penalize the player if they failed to complete the task.


Brainstorming

My team started by thinking of possible reasons why the student was having trouble finishing his readings, such as lack of time, lack of interest, lack of motivation, lack of understanding, and lack of accessibility.

Once we identified the pain points, we brainstormed possible solutions for each problem. Narrowing down ideas, we focused on the problem of lack of motivation. Many of the solutions we came up with involved making reading a game, introducing penalties, or having accountability buddies. For our final solution, we decided to incorporate several of these ideas into a single app.


Sketches

After brainstorming, we figured out how the app would work.
Once we figured out the mechanics, we drew sketches of the user interface.


Prototype

From our UI sketches, we created a digital prototype of the app in Figma.

On the homepage, the user is prompted to choose between Solo and Together Mode. In Solo Mode, the user adds a new assignment along with its deadline. The user then chooses a penalty, which can either be money or an embarrassing social media status or photo. If the user is able to complete the task before time runs out, they get to keep the money they wagered or the status will not be posted to social media. If they fail to complete the task before the deadline, they forfeit their money or their embarrassing status is posted to social media for all to see.

In Together Mode, the user searches for challenges to join. Once the user joins a challenge, they add money to the group pool. During the challenge, the user can see how much time is left as well as how many people have completed the task. When time runs out, the pool of money is split amongst all players that successfully completed the task. The amount of money each player receives may be larger than what they wagered if there are players that failed to finish.

Check out the interactive prototype here.


Poster Design


Timeline

April 2019

Tools

Adobe InDesign CC


Overview

The objective of this assignment was to design a typographic poster advertising a series of lectures at a conference. The text was given to us in a plain format; we needed to decide ourselves how to organize the information and create a visual hierarchy. We were also given a set of stock photos to use in our designs.


Sketches

I started out by sketching ten thumbnails for possible poster layouts. I drew grids on each layout to help organize each chunk of text. From the ten thumbnails, I chose two to further refine in another set of sketches. The two layouts I chose had large and interesting points of entry to catch the viewer's eye. With regards to being able to reasonably fit the large amount of text, these two also seemed the most promising.


First Iteration

Using my sketches as reference, I laid out the text on the poster in InDesign. I used a grid to help organize the text and keep everything neat. The conference name acted as the point of entry on both posters, so naturally they were very large. The event schedule text was considerably smaller but could be read if the viewer took a closer look at the poster.

For the backgrounds, I chose two photos that complemented the layout of the text. I also kept the color schemes of the posters simple as to not overwhelm the viewer.


Second Iteration

For both posters, I wanted to both increase readability while showing off more of the background images. The posters in the first iteration were lacking contrast, so I lightened the background where ever there was dark text and vice versa.

In the second poster (right), I made all of the text light and darkened the background image. I also added dark horizontal stripes to further separate each day's events.


Final Designs

These final designs stayed mostly the same from the second iteration aside from a few minor changes.

I darkened the background on the second poster (right) and added shadows behind the light text to further increase contrast. However, some of the light text is still a bit hard to read, particularly in the middle of the poster. I would further darken the background in that area if I were to make another iteration.


Project-in-a-Box


From June 2017 to August 2019, I was a member of Project-in-a-Box at UCSD. Project-in-a-Box, or PiB, is a student organization dedicated to making hands-on learning more accessible. Members develop self-contained project kits that teach challenging concepts and important hands-on skills. I was part of the former Inspire Division (now the Outreach Track) of PiB and I developed project kits that teach K-12 students hands-on engineering skills such as coding, circuit prototyping, and mechanical assembly.

Because our division's target demographic was K-12 students, we had several additional challenges and constraints to consider when developing projects. Since we had to teach a younger audience, we took extra care to make sure our documentation was easy to follow. We were also limited by time and cost. Projects that were intended to be used in workshops needed to be completable in under a few hours. The cost to make each project kit also needed to be kept low so they could be accessible to as many students as possible.

While in PiB, I worked on six different projects, three of which are shown below.


Stroboscopic Zoetrope

A machine that uses flashing lights and a spinning motor to animate pictures.


Timeline

November 2018 - July 2019

Role

Team lead, coding, circuit prototyping, CAD modeling, physical prototyping, documentation

Team

Ai Hong, Suhailla Saary

Tools

Arduino, Autodesk Fusion 360, laser cutter

Ardubot (v1)

An ultrasonic obstacle-avoiding robot.


Timeline

February 2018 - August 2018

Role

Team lead, coding, CAD modeling, physical prototyping, documentation

Team

Kerrianne Stewart

Tools

Arduino, Autodesk Fusion 360, laser cutter

Candy Sorter (v2)

A machine that sorts Skittles by color.


Timeline

November 2018 - March 2019

Role

CAD modeling, physical prototyping, documentation

Team

David Li, Lucas Nascimento, Stephen Kim

Tools

Arduino, Autodesk Fusion360, laser cutter, Adobe Photoshop CC


About


Hello, my name is Angela!

I'm a San Francisco-based engineer-turned-designer. Welcome to my portfolio website! I'd like to build out my own website design sometime in the future once I teach myself web development but this will have to do for now. :^)

I was born and raised in San Francisco, then moved to San Diego to study Electrical Engineering at UCSD. Five years later, with a Bachelor's degree in hand, I returned to San Francisco.

I'm in the process of switching career paths from electrical engineering to UX design. Nothing wrong with electrical engineering, but after taking some design classes at school, I realized that UX was what I really wanted to do. I'm currently applying to graduate programs for design as the next step in my journey!

For fun, I like to draw! I like creating characters and stories and one of my dreams is to make a comic someday. I've also dabbled a bit in creating merch and selling my art at local anime and video game conventions.

I'm also a fan of cats and apparently I can't pose for a photo without instinctively throwing up a peace sign (or two).