1-minute Overview

01

Wanderflow is an innovative content platform product (web app for now), focusing on reshaping the way users interact with information through AI. It was at the very early concept stage when I joined and my role as the first UX/UI Designer was pivotal in shaping the MVP from the ground up.

Roles

The first UX/UI Designer; Collaborate with the founder, 2 designers, and a front-end developer closely

Responsiblities

Heuristic evaluation; UX design; UI design; User interviews; User testing

Time

May 2023- Oct 2023
~5 months, part-time

Problem

1. Traditional platforms lack focused curation, overwhelming users with irrelevant content and limiting deeper interaction.

2. Conventional discovery methods promote superficial engagement, leaving users' specific questions and curiosities unaddressed.

The product aims to create a more engaging and personalized user experience by allowing various granular levels of interaction within the content.

At this stage, our goal was twofold: to craft a MVP that would not only resonate with users but also attract potential investors.

Outcome

We designed a chatbot experience that enhances user engagement by allowing them to interact with high-quality content at different levels of granularity. The platform enables users to click on specific sentences for explanations or ask questions for further exploration.

Impact

While it's too early to provide hard metrics, initial user interviews and testing have been promising, showing increased user engagement and satisfaction.

30%→75%

Daily Active Users

15→30

Shopify Users

Background

02

Data intelligence is essential to the success of e-commerce businesses. ‍BotNot is a startup who runs a platform that analyzes online purchases in real-time for e-shops. We enable trust of inbound data by ensuring all business decisions link back to the actual consumers.

Before I joined, BotNot didn’t launch their product. Their initial interfaces had lots of usability and visual issues. As the first and sole designer, I need to redesign all the screens and create a great user experience.

Project Goal

Create insightful and easy-to-use data dashboards to ease the pain of data analysis for e-shop owners and employees to make informed business decisions.

Success Metrics

Growth in user base and daily active users. As we didn't launch the product officially before, user growth is our top business metric.

Problem Discovery

03 Heuristic Evaluation

I choose heuristic evaluation to identify problems in their initial interface. After conducting heuristic evaluation based on Neilson’s 10 usability heuristics and accessibility, I found lots of problems in content, information architecture, user flow, and UI.

1. Usability Problems

‍1) Inconsistent color usage and component design
2) Redundant and inconsistent information
3) Not accessible for colorblind people

2. Incomplete User Flows

Lack of customer overview, recommendation overview, and individual pages. Users cannot finish the actions in a full cycle.

3. Too Many Numbers Without Actionable Insights

The interfaces looked like an excel data dump, which is challenging for less data-savvy users to digest.

User Interviews

I chose user interviews as a way to gather user input, in order to avoid making decisions based on assumptions. Although the founders didn't support user research initially, I actively advocated for user research and conducted 3 interviews with e-shop team leaders recruited from my own network, which was later proved to be very insightful to the company.

Work Flows

Data Analysis

Order Processing

Data Trust

Users want to know meanings behind data

If they see the changes behind the data, they would like to know what it means and what they should do next.
‍
“If I see a periodical change in sales data, I want to what caused it. Is that because of my actions or because of market change?”

Building user trust is essential to a business

Similar to e-commerce businesses, as a small startup providing unique data insights, building users’ trust with our data is critical.
‍
“I am wondering if I can trust the data I see.”

Unmet need for individual customer analysis

Most dashboards only offer insights for customer overview. Providing analysis for individual customers can help shops target certain segments easier.

“We built a database and analyzed the persona of each loyal customer.”

Process Overview

Interviews

So-whats

HWM Questions

Hour Observation

Diagrams

Design Iteration

04 Structure Planning

Information Architecture

To make data more actionable, we created recommendations and prominently placed them at the top of the sidebar for easy access. To keep the structure consistent, I followed a similar structure for each section. I put overview at the top to give users a glanceable view, and then user can go to the individual pages for details or action items.

Layout Sketches

I explored the tradeoffs of different layouts and different options for visualization.

Iterate Based on Design Principles

I designed 10 main screens and dozens of components in total. Below are three example components or sections that I designed iteratively based on design principles which are synthesized from user research.

1. Scalability

As a data dashboard website, it's crucial for us to ensure that our visualizations can adapt and keep pace with the growth of fast-growing e-commerce businesses, for the benefit of our users.

Taking this social network graph as an example, this graph aims to visualize the association of one account with other accounts. I started designing from scratch. The first version of social graph I designed would not be scalable if the number of bubbles increase. Therefore, I added segment controls and filters to only show information for highlighted ones.

Before

After

2. Consistency

Consistency is crucial as it can enhance users' trust in our system, which may translate to trust in the data we provide. Otherwise, people might think, "How can I trust data if you can't even keep a simple filter consistent?"

Initially, the components were not treated as a system and they were designed separately, which caused inconsistency issues. Later, I learned atomic design and design system, so I collected filters all together and created a unified design to reduce confusion.

3. Simplicity

Simplicity matters because the complexity of the user flow could add to the burden of processing information and various data flows for our users.

When I was designing a new export flow to other SAAS software, I tried different layouts: 1) pop-ups without preview; 2) a full-page overlay; 3) pop-ups with preview information; 4) sidebar overlay. Considering information density and layout consistency, I finally decided on a sidebar overlay design.

Iterate Based on User Feedback

I conducted 5 tests with current and prospective clients. I chose user testing because it can help us validate our design concepts, find new problems, and evaluate users' satisfaction at a minimal cost before launching the product. Three main insights are:

1. Help users process information faster

Looking at lots of data all at once is tiring for users. I need to add color coding or any other means whenever possible to help them digest data.

Before

After

2. Use colors meaningfully but not distracting

I showed three UI options to users: the first one had colorful cards; the second one didn't have colorful cards; the third one was mono-color with gradients. All the users selected the second one. They wanted some colors to convey meanings but didn't want colors to be distracting.

Before

After

3. Make tabs more prominent to encourage usage

Users primarily used the sidebar instead of the four main tabs on the table, complicating the user flow. One user stated they didn't notice the tabs during testing. To simplify operations, making segment controls more prominent may increase usage of this table.

Before

After

Final Design

05

New Feature 1

Pain point: Lack of meanings behind data

Solution: Make data actionable with recommended next steps

Users can easily take suggested actions to improve their business by reviewing recommendations and implementing them. To emphasize the value of this section, new recommendations are now the default tab on the homepage table, with action buttons highlighted and placed higher in the hierarchy to encourage use.

Before

After

New Feature 2

Pain point: Lack of trust in data

Solution: Build data trust with impact visualization

During interviews, users mentioned they won’t trust the data and recommendations automatically. They will first try it out and see the impact. If it works, then they will trust it. Therefore, I designed a BotNot impact visualization to show them visually how much money BotNot save them.

New Feature 3

Problem: Lack of ways to implement insights

Solution: Design a new export flow to Klaviyo (a marketing email management tool)

I designed this export flow to make user flow a closed cycle so that users can implement the recommendations in other platforms.

New Feature 4

Pain Point: Too many numbers and information which is challenging to process for less data-savvy users

Solution: Make data digestible with visualizations, colors, and tags

I added various types of data visualizations on every page and marked raw data with visual aids, such as colors, to make data more digestable.

Before

After

Reflection

06 Room for improvement

1. Currently, some information on individual pages didn’t get completely aggregated on overview pages. If I have time, I might explore more ways to aggregate information.
2. Continue improving design system by designing different states and nailing down more details with developers.

Reflection

1. During early stages, product strategy can go back and forth pretty frequently, thus following atomic design principle and starting from the building smallest components can save you lots of time.
2. For companies who don’t naturally value user research, when I want to advocate for user research, I need to help them see the value, such as conducting trial interviews in my own network.
3. Working in a startup can be risky, but can also be rewarding and fun. I enjoy making more impact and seeing the impact in a short amount of time.

Wanderflow: AI-native Content Platform

1-minute Overview

01

1. Traditional platforms lack focused curation, overwhelming users with irrelevant content and limiting deeper interaction.

30%→75%

15→30

Coming Soon...

Background

02

Project Goal

Success Metrics

Problem Discovery

03

Heuristic Evaluation

1. Usability Problems

2. Incomplete User Flows

3. Too Many Numbers Without Actionable Insights

User Interviews

Work Flows

Data Analysis

Order Processing

Data Trust

Process Overview

Design Iteration

04

Structure Planning

Iterate Based on Design Principles

Iterate Based on User Feedback

1. Help users process information faster

2. Use colors meaningfully but not distracting

3. Make tabs more prominent to encourage usage

Final Design

05

Reflection

06

Room for improvement

Reflection