Tina Nguyen UX Designer

About

I am a user experience designer who believes design is about how things work. I focus on making products simple and easy-to-use.

I'm also designer who can build. By build, I don't mean just HTML or CSS or even Javascript. I have built a web app from scratch. However, I focus primarily on UX and build on an as-needed basis. I use my experience as a developer to quickly assess the feasibility of any designs that I create, to come up with the best possible solution while minimizing unnecessary development efforts.

Role

I am happiest taking concepts from the idea stage (informed by user research) and making them tangible by thinking through the user flows, figuring out the information architecture, mocking up wireframes to creating high-fidelity mocks that are ready for usability testing and implementation.

I've worked on small teams where I've been the design lead. My responsibilities generally include: user research, mocking up wireframes for usability testing and creating high-fidelity mocks ready for implementation. I've also doubled as front-end lead since I have as much experience building UIs as I have designing them.

Contact

UX Design Process

User Research
Interaction Design
UI/Visual Design
Usability Testing
Front-End

Projects

Get Found

Get Found

Get Found—a presence management tool for SMBs.

Get Found


Summary

I started working on this product when it was a tool used primarily by restaurants to create and distribute menus. At the time, it was expanding into other verticals so that service-based businesses could also upload their price lists as well. It finally grew into a product that distributes business listing information (in addition to menus) for any type of SMBs via various channels: Google, Bing, TripAdvisor, Yelp, Foursquare, etc. I worked with a visual designer who created illustrations, icons, and styling while I was responsible for the IA, interactions, etc.

Information Architecture

Design Goal: Clean up the information architecture to make sure that there is clarity consistency within the product (features had been added on a one-off basis and as the product grew, there was a hodgepodge of different interactions and UI elements) as well as consistency with common practices.

The Header
Challenge:

Get Found uses a tablet layout for the UI with a header at the top. The problem with the header was that the address gets cut off so for businesses with more than one location, it was difficult for the user to tell which venue is being shown. When the page scrolls, the header disappears so users who spent hours editing their business's menus became frustrated later on when they realized they've modified the wrong venue.

Old Header
Solution:
  1. Fix the header at the top so the venue name and location is always visible.
  2. Move the address to a new line to reduce crowding, making it easier to scan and identify a specific venue.
  3. Add visual indicator to show verified/unverified status of venue (as a reminder to encourage verification) and type of account since it affects features available.
  4. Move seldomly used CTAs to reduce clutter and add in the user and settings menus.
New Header Verify Tooltip
Menu Controls
Challenge:

Even though the Save button is bright blue and always visible, there were many support calls about how to save. This could have been due to the fact that there was a lot controls on the right panel making it difficult to spot the Save button. Another problem that existed is that if there are enough menus, the vertical scrollbar would appear and create this scroll-in-scroll effect. Yikes.

Old Menu
Solution:
  1. Grouped and moved the major controls: Save, Cancel and Add. Fixed the control bar at the top when scrolling so that it's right under the header and easily discoverable.
  2. Moving the controls cleared up the right panel so that it can serve as secondary navigation to easily reach individual menus. This logical grouping conditions users to expect major controls for the page to be up top and in-page navigation elements on the right.
  3. Unfortunately, there are still two orphan controls under the menu navigation that need to be re-organized and moved at some point.
Reordered Menu Controls
The Navbar
Challenge:

The difficulty with having the navbar on the left in a tablet layout is that it can only grow so much before running offscreen (we support 1024 x 768) because the navbar is fixed. The common practice is to have this turn into a slideout menu (shown below). However, this problem presented itself when development time was scarce so we needed a quick solution that would accommodate the addition of new navigation elements, but punt on massive changes to the nav itself.

Old Navbar
Slideout Menu
Solution:
  1. Subsumed the Design tab under the Menus tab since it logically belongs there to make room for new additions to the product that warranted their own tabs: Home (overview page on login), Insights and Local Ads. Further additions will require a slideout menu solution.
  2. Renamed elements for coherence reordered by order of importance.
  3. Grouped seldomly used actions together under a general menu.
Current Navbar
Edit and Design
Business Profile
Challenge:

Initially, the product collected minimal information about the business since the focus was on menus. However, when the focus change to getting businesses listed on various channels, it became important to collect as much information as possible. Given that, that challenge was figuring out how to display the information so that it was not overwhelming. Also important was which UI elements to use so that it is as easy and quick as possible for the user to enter in accurate information.

Old Profile
Solution:
  1. Moved Administration and Billing under the Settings menu and promoted Profile to be even more important than Menus in the nav hierarchy.
  2. Grouped different attributes of the business so that it's easy to navigate. Followed the same structure as that of the Menus tab where each panel contains one group, the controls are at the top and secondary navigation is to the right (long scrollable page with shortcuts).
  3. Each field is validated so that we can be sure the information is correct: address, phone, etc. so that publishers can trust the information and wil publish the business listing. This was particularly important since many businesses are rejected because of bad data (criteria varies per publisher).
New Profile
New Menu
Publishing
Challenge:

Get Found had a feature where menus can be hidden. Essentially, there can be menus in "draft" mode that are not published so they are "hidden". With each save, changes are automatically published to distributors for non-hidden menus. The language doesn't quite fit with other models where you can edit information in, save it as a draft before publishing it, though it behaves similarly. How do we make it clear and remind users that the product automatically publishes changes for them?

Old Publishing
Solution:
  1. Moved seldomly used menu controls (reorder and delete) under a dropdown to de-clutter.
  2. Change the hide/unhide toggle to Publishing ON/OFF (3 variations were tested and the best one was chosen), which makes the concept also consistent with the business profile being published.
  3. Added a Publishing indicator to the header to remind users that the product automatically publishes updates for them. Although it seems unnecessary, when tested, it was the one that communicated most clearly to users what the product does.
New Publishing
Onboarding

Design Goal: Create and streamline the onboarding process for maximum user completion rate, data quality and by extension, maximum publish rate. It was important to figure out when to ask users for certain pieces of information and narrowing it down to the minimum amount possible to decrease the likelihood of dropoff.

First Iteration
Challenge:

In the initial product, users could sign up for a free account (email and password) and once that was done, they were dropped into the Menus tab with minimal guidance. In order for the product to support other verticals beyond restaurants, it needed to collect information such as categories and basic business information in order to publish to various distribution channels.

Old Onboarding
Solution:
  1. Separate the onboarding process into 3 steps for a directed experience to make each step clear and be explicit about what information is necessary for publishing.
  2. This is the page that users landed on once logged in to remind them of the remaining steps before they can publish their menus / price lists.
First Iteration
Second Iteration
Challenge:

The initial version was good enough to get started in collecting other business information. However, when the product switched focus to distributing accurate business data to publishers (once GoDaddy acquired Locu), it became even more important to collect and verify the accuracy of the information. The challenge now was how to onboard users after they've bought the product on GoDaddy's main site.

Solution:
  1. The steps in the onboarding process were now mandatory and must be done before users even get into the product in order to get their business listed as quickly as possible.
  2. Users needed to verify their affiliation with the business (so that listings can't be hijacked and incorrect information distributed).
Second Iteration Edit
Second Iteration Verify
Third Iteration
Challenge:

Two major problems that arose (as seen in usability tests and in product user behavior tracking): many were not aware that there was more to the product than just distributing their business information (they could add menus, check for insights about their business, etc). The verification step (although required for security reasons) was confusing.

Solution:
  1. I created three different versions of an improved onboarding flow to test which alternative would best solve these problems. A product tour was added after the Publish step to inform users that there are other functionality. In one version the entire flow is on a modal in the product to make it supremely obvious.
  2. The option that worked best in usability testing was the in app onboarding modal, with the added product tour.
  3. We added more succinct, explanatory copy to help SMBs understand why verification is required. First Option
    Second Option
    Third Option
Fourth Iteration
Challenge:

Other issues that became obvious in the product were: it did not work well for users whose businesses did not have a physical location and users who did not find an exact match for what they think is their business category often dropped off.

Solution:
  1. Certain publishers only published listings for businesses with a physical location or service-based businesses so we ask businesses to self-identify before they even buy the product so that online-only SMBs aren't frustrated later on to find out that they've bought a product that is not for them.
  2. There were many possible solutions to a business owner not being able to find their exact category. The option that we chose did not require a major UI fix —we expanded the category ontology significantly and added hints to help users understand that they should not be looking for specific products or services that they offer. It was also separated out to its own step to reflect its importance.
  3. Users wanted to see what their listings would look like on various publishers so a preview was added. This gave users a sense of gratification after having done some data entry, to help them understand why it was necessary.
Fourth Iteration Type
Fourth Iteration Category
Fourth Iteration Edit
Fourth Iteration Preview
Search Engine Visibility

SEV

A search engine visibility tool for SMBs.

SEV

From Scratch

Summary

The project was to create a tool that would help SMBs optimize their websites for search engine visibility. GoDaddy had an old product that helped SMBs improve the search engine visiblity of their websites. However, the product just gave users a checklist of tasks that told users to modify site elements such as title and header tags. This required changing the source code, which was scary and unfeasible for most. The new product would make all these changes automatically with a little bit of help from users so I created that interface to guide users through this process.

Design Goal:

Create an unintimidating tool that helps SMBs who are not technical to easily and quickly improve their website's search engine visibility.

Challenge:

The old version of the product was incredibly unhelpful to SMBs since it required some knowledge of HMTL, which is unfamiliar to the majority of business owners. We needed to create a product that required zero technical knowledge to use.

Old SEV
Solution:
  1. Created the intial iteration where a wizard guides users through each step so that at any point, they understand what they need to do and why.
  2. Use very plain language that explains what is needed. Usability tests showed that any words that are too technical (even 'keyword') intimidated users.
  3. Provided visual cues in each step for context so that users know why the step is needed and what it does.
  4. At any step, we needed to tell users what to do instead of giving them options and asking what they'd prefer because most don't know what they're doing and wanted us to be the authority on the subject.
Description Step
Insights

Insights

Visualizing insights for SMBs.

Insights

Info Viz
From Scratch

Summary

Get Found is a tool that helps businesses publish their listings and menus / price lists, but that is usually done once and seldom updated. To increase engagement and retention, Insights was added to give users more information about their business, to help them make decisions. The beta version focused on menu data.

Design Goal:

Figure out the types of insights that is most valuable to users.

Challenge:

The product collected a lot of menu information so the challenge was in figuring out what type of information would be valuable to restaurants and how to present the information such that users an garner insights from them.

Solution:
  1. We visualized information such as: cuisines served, the number of menus offered, price range per menu, the number of items offered per menu, ingredients of common dishes of similar restaurants, ingredients of common dishes for the user's business as well as pricing and item counts per section and item name length and description length. Even if certain information didn't seem useful, we included it to get user feedback.
  2. Usability tests showed that businesses loved Insights for two reasons: figuring out how they currently stack up against restaurants in the surrounding area, but they also wanted to explore what leading restaurants in cities like NYC and LA did to include in their own offerings to be competitive. The ability to explore other cities would also give an advantage to those thinking about opening another branch in evaluation potential opportunities.
  3. Information that we didn't think would be useful (e.g. item name lengths and description lengths) tested really well. Unbeknownst to us, menu design is extremely important and information about what others are doing informed users' decisions.
  4. Most high-end restaurants already what they are doing so they saw using Insights as a way to validate their decisions or for chefs and GMs to justify their decisions to restaurant owners.
Insights
Pivotal Analytics Workbench

AWB

The landing page for Pivotal Analytics Workbench.

AWB

From Scratch

Summary

Pivotal (at the time, Greenplum) was building out one of the largest Hadoop clusters available. I worked with them to design and build a responsive landing page that respresents that project to attract interest from potential users. This was a short consulting project and a foray into landing page design.

Design Goal:

Create a landing page to attract potential users of the AWB.

Challenge:

The Analytics Workbench is highly technical (even for someone technical like myself) and specialized. The challenge was how to accurately communicate what it does in everyday terms for ease of understanding.

Solution:
  1. I interviewed its project manager to figure out the salient characteristics of the cluster that potential users would be interested in then figured out how to present that information to lead them to express interest in using it.
  2. The website is also responsive down to the smallest mobile device screen.
Analytics Workbench
Trōth

Trōth

A tool to search for startups.

Trōth

From Scratch

Summary

This was a personal project, a tool I created from scratch some years back before the existence of AngelList Jobs. I love working with startups and found it difficult to just find out what startups are out there. The information was available in CrunchBase, but was not browsable. So I designed and built this tool to make it easier to explore the data in CrunchBase.

Design Goal:

Create an product that helps people who are interested in startups find the ones that are right for them.

Challenge:

This project stretched my skills as a developer—I dug into the bowels of the DB and had to learn how to optimize queries in order to make the site respond quickly enough to be usable.

Solution:
  1. Allowed users to search for specific startups, but also to browse, narrowing by location, industry and funding round. Funding rounds are important since seed stage startups have a very different work environment (and expectations) from Series A or the later stages. I also employed infinite scrolling since it was suitable for this type of usage.
  2. The UI presented a quick way to browse through many startups, but also allowed users to dive into details by showing who current works there and how users are connected to them. Information about founders were also displayed since founders are very important in startups (they determine the culture). Also listed are funding rounds (to estimate runway) as well as competition (other potential employers).
  3. I had fun exploring colors and typefaces with this project since I did all the visual design myself. The styling that I used for buttons, etc. was popular at the time of creation. I also tried to create some simple illustrations.
Homepage
Browse View
Personality Test

Personality Test

A fun tool to discover your personality type.

Personality Test


Summary

A project I worked on in re-designing a site to account for new functionality and emphasize sharing. The site initially had a single screen after logging in that contained information about a person’s WorkType. I restructured the site so that it emphasized sharing and changed the experience from a solitary to a more open one that encourages interaction.

Design Goal:

Add structure to the website and design the interactions to facilitate and encourage sharing.

Challenge:

The product was a fun personality quiz that was exciting, but all the sharing happened outside of the product. The challenge was to increase engagement by capturing those interactions in product.

Old WorkType
Old Compare
Solution:
  1. Restructured the IA so that when users login to the product on subsequent visits, they'd land on the Compare page that would prompt them to invite others to find out their WorkType and compare.
  2. Updated the visual design of the entire website so that it has a cleaner, friendlier and elegant feel. The visual design style for this project is representative of my taste: clean, simple and elegant.
New Compare
New WorkType
Applicant Tracking System

Applicant Tracking System

A recruiting tool.

ATS

From Scratch

Summary

For this consulting project, I redesigned the UI for an applicant tracking system. At the time, there was a working prototype with screens for the major functionality.

Design Goal:

To create a more full-fledged, cohesive user experience so that it became a full product, instead of a functional prototype.

Challenge:

Design the interactions so that users can process candidates quickly and surface the stars for fast-track consideration. The UI must also take into account the various user roles and accommodate different functionalities.

Old Foundry
Solution:
  1. Restructured the information for easy processing.
  2. Explored various ways of visualizing candidates in the pipeline as a reminder / progress bar of the hiring funnel.
  3. Created the first cohesive visual design for the product.
Applicants
Jobs
Milo

Milo

An inventory auto-upload tool to Milo.com for SMBs.

Milo

From Scratch

Summary

I led the design for Milo Fetch—a tool aimed at helping SMBs get their inventory online to Milo.com, eBay and other partner sites. I performed the user research, designed and built the initial versions of the UI based upon insights garnered from talking to SMBs. I worked with a visual designer who created the look-and-feel and illustrations.

Fetch
Design Goal:

To design a tool that allows small business owners to automatically upload their inventor to milo.com and to keep it updated without any additional effort on their part.

Challenge:

Since our users are not tech-savvy and afraid of their own computers (which host their POS system and has their inventory info), we needed a tool that is easy and quick to setup to relieve their anxiety.

Solution:
  1. The whole sign up and install process took only 15 minutes (via a desktop installer). From then on, the software runs on the SMBs POS system and transmits their inventory information to milo.com.
  2. I designed the landing pages to address potential concerns and communicate the value prop of the product.
  3. I also designed the dashboard pages so that SMBs can manage their inventory online (by adding additional information for such as images).
Dashboard
Catalog
Retailer Page
Design Goal:

Create a page that displays a retailer's real-time inventory and provide users the necessary information to make a purchase.

Challenge:

To create a presence for SMBs on milo.com to compete with larger retailers. Even though their prices might be competitive, their lack of visibility puts them at a great disadvantage.

Solution:
  1. Show up-to-date inventory along with detailed product information. Knowing what SMBs offer, product pages on milo.com could show them as a retailer stocks the product helping customers be aware of other options.
  2. SMBs tend to thrive on word-of-mouth, so add in reviews from Yelp and Facebook page information for social proof.
Milo Retailer
Lifelines

Lifelines

An visualization of family trees.

Lifelines

Info Viz
From Scratch

Summary

I designed and developed a family tree visualization. Classic family tree visualizations display generational relationships well, but obscures other patterns and lack temporal context. For this project, I attempted to make certain patterns in families obvious.

Design Goal:

Visualize information in such a way that certain patterns and secrets in families can easily be seen.

Challenge:

Figuring out the type of visualization best suited to uncover insights with this information.

Solution:
  1. Each line represents a person that begins when a person is born, ends when a person dies. Marriages are occur when two lines join together. Children are born as offshoots from their parents lines.
  2. This time-based, interactive visualization of family trees facilitates discovery of family patterns and secrets by making obvious various information: re-marriages, divorces, children born out of wedlock, twins, polygamy, generation overlap, etc.
    Lifelines
    Lifelines
    Lifelines
  3. Hovering over each lines reveals a tooltip with more detailed information about the person.
  4. The visualization can toggle the coloring of the lines to show by gender or show by generation. The latter is suited when there is abundant generation information and will show the overlap of generations where aunts and uncles are in the same age range as their nieces and nephews.
Lifelines
ChairLift

ChairLift

Improving public transportation for wheelchair users.

ChairLift

Physical Design

Summary

A multi-disciplinary project for the Extreme Affordability class at Stanford’s d.school aimed at improving accessibility to public transportation for semi-mobile wheelchair users in Ethiopia. The low-cost, easy-to-use, device would hoist a wheelchair and secure it to the back of any minibus.

Design Goal:

Wheelchair users had to pay extra to store their wheelchair in a minibus. The prototype we built allows the wheelchair to be attached to the back of the minibus, thus not taking up any space inside and not incurring additional charges.

Challenge:

Minibus drivers often do not stop to pick up wheelchair passengers because of the long time that it takes to help them onto the bus. Time is critical to them since the amount of money they make depends on the number of passengers they pick up so the solution must satisfy this need.

Minibus
Assistant
Solution:
  1. Minibus drivers often work with a teenage assistant responsible for getting everyone onboard. The prototype includes a pulley system reducing the effective weight of the 50-lb wheelchair by a 1/4 so that driver’s assistant can safely secure the wheelchair the back of the minibus.
  2. The cost of the prototype is $25, which would be reduced at scale and could be covered by corporate sponsorship/advertising.
ChairLift
BoxBuddy

BoxBuddy

A tool for efficient packing and retrieval.

BoxBuddy

Physical Design

Summary

A multi-disciplinary project to create a more efficient method of packing and retrieval. I was responsible for the design and development of the web interface.

Design Goal:

Create a system that allows users to quickly catalog all their belongings during a move to make it easier for later retrieval.

Challenge:

Designing an end-to-end solution that includes hardware and software.

Solution:
  1. A webcam is connected to a computer so that users can take pictures of their items before packing to facilitate its finding later on.
  2. 3 modes of input: automatic, pedal-based and weight-based. By default, the camera senses when a new item is deposited into the box and takes an image of it. No additional effort is required by the user (beyond turning it on). The pedal-based trigger allows users to stand farther away from the camera to take full-length pictures (for clothing items). The weight-based trigger allows for clearer images to be taken in cases where text is important (i.e. book titles).
    Auto
    Weight
    Pedal
  3. Each box has pictures of all the items inside. Users can then label, categorize, tag and add notes to each box to remind them of its contents for easier retrieval.
BoxBuddy