Tina Nguyen Design + Product

Projects

Flare

Flare

Flare—share business ideas.

Flare


Summary

On a team of 2, we came up with the idea to help aspiring entrepreneurs to quickly and easily vaildate their ideas beyond just family and friends (who kindly lie). I created and designed the initial mobile prototype and as the project grew, my role evolved into both product and people management as I oversaw the app and the team's growth. Flare was featured by both the App Store and Google Play Store and the highest rated app for GoDaddy.

Product Management

PM Goal: As part of the Emerging Products team, create products / services that would be helpful to SMBs whom GoDaddy serves and, thus, strengthening GoDaddy's reputation as a tech company that helps SMBs.

Challenge:

Increase GoDaddy's user base.

Solution:
  1. Launched an app that engaged aspiring entrepreneurs long before they become target GoDaddy customers; aid them in validating, refining and executing on their business ideas.
  2. Used React Native 3 months after it was public released to quickly build a functional prototype to get buy-in. The fast development cycle enabled the release the iOS and Android versions of the app much more quickly. Proved it as a reliable tech for the mobile team to adopt for other product lines.
  3. Improved internal and external perceptions of GoDaddy as the company continued its evolution as a serious tech company that serves SMBs.
Design

Design Goal: Create a mobile app that: helps aspiring entrepreneurs post their ideas, get impartial feedback within 24 hours, connect them with potential "advisers" who can help them refine ideas that have merit and get them executing on the idea.

Post an Idea
Challenge:

Make it dead simple to post an idea and get feedback in 24 hours. It's nerve-wracking enough for aspiring entrepreneurs to share their ideas with the world so we aimed to make it as easy as possible...and it was.

Solution:
  1. Posting an idea consists of 3 parts: image, headline and short description.
  2. The layout is as similar as possible to what other users would see viewing the idea so that the idea creator knows what to expect (removes the need for a preview before submitting the idea).
  3. Since the app is image heavy, the idea creator needs to add a picture for the idea, but we make it easy by providing high quality stock images.
  4. The process can be completed in a matter of minutes and is anonymous so relieve the user's anxiety as much as possible about sharing their idea with the world.
  5. The feedback window is limited to 24 hours so that idea creators can get the quick satisfaction of knowing if their idea appealed to others and also to encourage posting of other ideas as well.
  6. Although the app went through 5 iterations, this process largely remained the same due to the ease-of-use and high completion rate.
Post an idea
A brief headline
An image is required
We provide good quality stock images
All filled in.
Idea creators receive feedback in 24 hours.
Give Feedback on an Idea
Challenge:

The experience of giving feedback must be easy and fun because, ultimately, we want idea creators to get feedback from many people; if it's fun, more people will use the app. The experience of receiving feedback must be positive (as much as can be even if the idea doesn't garner much interest) so that idea creators are encouraged to try again with other ideas.

Solution:
  1. All ideas are presented equally: image, headline and short description. There's nothing extraneous to sway a decision. Ideas are judged based on their merit. There's absolutely no information about the creator to remove any possibility of unconscious bias.
  2. Users can easily swipe right and left to make a decision on an idea. This interaction went to multiple iterations and had its challenges. Users were too familiar with the like / dislike model that using snooze / skip didn't always match up with their mental model and caused some confusion.
  3. The feedback options: love, snooze or skip. Even when an idea doesn't appeal to a user, they could indicate that with a gentle "skip". Idea creators can see how many people saw the idea and how many loved it, implicitly telling them the results without the harsh dislike. Ideas are like babies, kindness is encouraged.
  4. Ideas need to meet a 10 "loves" threshold for it to continue to exist—this was to ensure that the idea has enough followers to give feedback in the refine stage; otherwise, it disappears even if a user has loved it.
Flare home screen.
Feedback is required.
Snooze an idea.
Skip an idea
Idea details.
Loving an idea.
Refining an Idea
Challenge:

How do we continue to help aspiring entrepreneurs after helping them quickly validate if an idea is worth pursuing?

Solution:
  1. Flare connects the idea creators with followers who loved their idea so that the followers can continue to help the idea creators on their journey and give unbiased feedback.
  2. Idea creators can ask detailed questions, create polls and send updates to engage the idea's followers. This stage is not anonymous. Everyone has to sign in with their real identity because we wanted to encourage continued kindness and anonymity does not do so.
    A user's ideas.
    An idea's activity stream.
    Polls, updates and questions.
    Quantitative data via polls
    Idea progress.
    Possible activity types.
  3. Followers and idea creators can see all related information about the idea and message one another.
    Answer a poll.
    Supporters of the idea
    Idea details.
  4. The app automatically posts a poll for every new idea that passes the threshhold to encourage idea creators and followers to connect.
    First poll.
  5. Areas for improvement: activity in this stage is buried behind another tab and under the individual ideas. The IA needed to be changed so that new activity is surfaced to encourage more interaction.
Found Onboarding

Onboarding

Onboarding flow for Get Found.

Onboarding


Summary

As Get Found grew from a tool that focused on distributing menus for restaurants to one that distributes both business information as well as menus / price lists, it became important to guide users into the product so that all the essential information could be collected for publishing. The onboarding process went through 4 iterations of design with multiple prototypes, usability testing and feedback and development.

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
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.

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
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

UX Design Process

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

About

I've been a UX designer, product manager and software developer. Sometimes two or all three at the same time. These days I focus on UX design and product management. Building is something I do once in awhile for fun.

UX Design + Product Management

Whether UX or product management, I'm less concerned about what the role is called and more interested in the responsibilities involved. I am happiest taking concepts from the idea stage (informed by user research) and making them tangible by creating mocks for functional protoypes and testing. Once built, I enjoy running experiments to increase engagement and retention to grow the product.

I've managed designers, software developers and nurtured products from idea through go-to-market. I've enjoyed all of these and believe in doing whatever it takes to deliver delightful, useful products.

Contact