The takeaway

As the sole designer, I took an engineer-generated UX & UI and delivered a low-complexity, high-fidelity and fully digital experience. Even with a limited budget and tight timeframe, I produced a visually striking and easy-to-use product.

I took the product from it's early stages to securing a spot with the accelerator Outlier Ventures and $50,000 in initial seed money.

The problem

When I joined the GoldFish team, parts of the basic flow were already developed but not usable or approachable. I was brought on to "just make it work" without changing the current flow.

The site was not intuitive to use and difficult to understand.

There was a very small budget, which afforded minimal developer hours, so we had to prioritize the most effective changes in the small time window available.

My role

My role on this project was to make the site simple, inviting, and easy to use, including focusing on the user and their experience. It was also my responsibility to brand the project from colors and fonts to language and tone (not including the name).

I was the only designer working on this project.

Process Summary

Click any step to see the details. Check out the steps with asterisks: 4, 6, and 8, for the most insight to my thoughts and problem solving.

1. Understand the user base. The site's audiences vary— some are tech-savvy while others are not, and I need to design the site for both.

2. Rebrand. Using the already chosen, "GoldFish," I developed the brand, including logo, colors, fonts, and tone to communicate that this product is for everyone— it’s friendly and easy to use.

3. Rewrite. Using the brand guidelines outlined in #2, I focused on writing approachable and whimsical text, without losing trust or creating distractions.

4. *Sketch. Rethink basic page construction and flow to solve problems (e.g. asking ‘How do we best organize data?’ ‘How do we clarify certain actions?’).

5. Prototype. With feedback from my sketches, I made wireframes to further develop the flow of this quick, easy experience without worrying about colors or contrast.

6. *Prototype, but better. Using the detailed wireframes, I fleshed out the branding and style, paying special attention to accessibility. I added features whose need became obvious during the original prototyping process.

7. Work with developers to execute vision. I gave detailed feedback and direction to the developers working on the project to make the finished product match my designs more closely and work properly for users.

8. *Continue exploring & developing UX improvements. After the initial phase making the site usable and approachable, I continued to add pages and make small changes to help the narrative and make the experience simpler.

If you’re crunched for time, check out what I learned.

GoldFish's target audience is a technologically diverse group, ranging from blockchain enthusiasts who know all the shortcuts and jargon, to business owners who aren't very tech-literate and just want to keep tabs on their competition.

To address the wide-ranging technical skill level of the people we want to serve, we brought attention to simplicity and focused on creating certain features that could have two modes: one that is simple for everyone, and one that could be highly specified with the right technical background.

With the name GoldFish, I played up the friendliness and approachability of the brand. I wanted the product to be fun without losing reliability. Walking the tightrope of playful and trustworthy, I incorporated on-theme colors without an onslaught of brightness that would overwhelm the viewer.

Simultaneously, I wanted to communicate that GoldFish is easy to use, since many projects like web-scrapers seem complicated (which they are, but using one doesn't have to be). Leaning in to the somewhat cartoonish nature of the colors and fish icons evokes the idea that even kids can use our software!

In later iterations, I added small moments of delight like the moving bubble as a loading symbol to help people find joy in places that can be frustrating.

With rebranding, I rewrote the website text. By exploring different tones I was able to solidify the brand and the approachability we were striving for.

Writing the text also allowed me to craft a smoother UX by making unambiguous labels and clearer options.

When the time comes for creating space on a page, I start with a pencil and make very quick, simple sketches to get the ideas flowing. I took the initial flow and focused on where the process could be faster and easier.

Organizing data

My first idea was to prioritize the data by displaying the likely important data more prominently, and showing other data as secondary.
We could not incorporate this change because we did not have the technology to prioritize data.

Back to the drawing board, I designed a three-option toggle button to distinguish types of data (text, images, and links), making it easy to switch between them.
This edit was incorporated quickly into the design.

Instead of prioritizing data, I created a pop-out sidebar (like a shopping cart) to keep selected data visible while scrolling.
"Shopping Cart" to be incorporated at a later date, not found necessary for the MVP.

Button types

During sketching, I reorganized the options when users decide between methods of delivery and frequency. Originally developed as several individual buttons, I fought vigorously for a different interface. So many buttons on one page makes uses a lot of mental bandwidth to figure out what is the desired action.

After much advocating and explaining, my insights won out and I was able to create a stylized radio button selection.

Changing the options from individual buttons to a clear radio-style selection was one of my most successful changes. It allowed a default option and made it clear that they were selection options, not distinct actions.

Sign up & Log in

The trickiest part about the flow was choosing the right time to prompt the user to sign up or log in. If they don't have an account already, we want to ask for sign up after they get their free test data.

If someone has an account and wants to auto-fill their default settings, we want them to log in before entering all the information for the test data to make their experience seamless and quick.

We struggled with how to reconcile these competing needs without dedicating too much real estate to "Sign up!" and frustrating the user with the repetition.

In the end, we settled on having a static ‘Log in’ button in the nav bar so if someone was already familiar with the process, they could log in at any time. We then prompted sign up after the test data was sent, as a philosophical decision that users shouldn't feel pushed to make an account before seeing that the software works.

I then created a monochromatic prototype to help explain the ideas I developed from sketching, without considering colors and accessibility as it relates to contrast. This step was crucial to understanding the limitations of the project.

Wireframing also helped me to codify some simple details, like showing the site searched and using a skip button to mirror the back button when necessary. Most of the feedback, especially the pushback about the radio selector versus individual buttons came from working with these wireframes.

Though we did not implement all of my ideas, these prototypes helped me to better understand the possible scope of the MVP and led to great conversations about how best to serve our users.

Visual UX decision-making

Using the wireframe and branding work I had already done, and the discussions and feedback surrounding them, I designed a high fidelity prototype of all the pages in the flow.

I worked through several UX problems in the hi-fi prototype, like distinguishing selected, unselected, and hover states for data, and contrasting those with boxes for entering information.

I focused intently on color accessibility with contrast. There were many frustrating moments when my chosen color combination didn't pass WCAG guidelines, leading me to rethinking and designing better for comprehensive access.

Action-oriented decisions: Log in button

Through user testing with a few people during the hi-fi process, we learned even more about the Sign up/Log in buttons (mentioned in step 4: sketch). Having an additional action button on the page with the disabled CTA wasn't working well.

Location-specific error messages couldn't be implemented as I had designed, and eliminating the error altogether is a better solution. So I dug into finding the solution with the fewest distractions.

Eliminating the extra Log in button was key, and the cleanest way was to make the CTA action dependent on account status. If the user is already logged in, the CTA processes as requested. If no account is connected, it prompts the user to log in, with an option to sign up.

Action-oriented decisions: Frequency scheduler

Here we realized we needed a custom frequency scheduler, and a way to specify day/time within the set intervals.

Originally I designed the scheduler only with the intervals (hourly, daily, weekly). I added a "custom time interval" selection, but still required a way to address more specificity that wouldn’t clutter the space.

The solution I devised was a custom tab beneath the selection pane, where the required details change for each option selected. Keeping the details hidden until necessary helped keep the design uncluttered.

Because of the time pressure we were under, the developers' goal was not a pixel-perfect replica but to use my design as a guide. Because of this, there were a lot of visual and usability issues in the first iteration. I worked with the developers to fix (most of) these problems.

I learned a lot about working with developers and how to best communicate with people who think very differently than I do by trying to execute the design as close to my vision with the present limitations.

A designed experience is never finished. After we launched the MVP, I designed the account page that keeps track of all scrapers. There are various tasks (e.g. set, pause, export data) that should be easy in the management system. I developed a series of buttons to communicate clearly and condense space.

A scraper that works with an entire site has a lot of data to manage and display. First, I tried to condense the information on a single page, but there were too many items and it became a mess.

Instead, I split it into two pages, each with expandable dropdowns. More clicks were necessary to make the data comprehensible and make the user's path natural and straightforward.

I faced difficulties creating the Frequency & Delivery Settings page. I try to avoid dropdowns when possible because they can be frustrating. Here I combined disabled inputs and minimal dropdowns to keep the page as clean as possible.

Goldfish was an interesting project with challenging limitations. Because of the time pressure, I had to work quickly and efficiently, which helped me to pursue only the UX explorations that would likely be useful and productive without wasting time.

I learned to prioritize impact: when to keep fighting and when to move on. There were some changes that would have really helped the experience, but were technically infeasible. I had to let those go because no matter how hard I fought for them, we couldn’t implement them.

But there were simpler fixes that I knew would create a significant impact, which I really had to fight for. At first, the CEO told me the original way (his idea) was how it was going to be, and that was final. I argued vigorously for the change multiple times, with multiple arguments, until he saw my side and was persuaded.

From testing I better internalized that, for this type of project, it helps to make things automatic when possible— in this case, prompting the user to log in with a dialogue box instead of making them click a button.

Now that you’ve learned all about how I did it, check out the live site.