Storyboard

Narrate Coco’s story with Etcheve

Based on the design goals, I created a story to narrate the user’s needs, emotions, and the interactions she’s going to have with the Etcheve.

Key pain points dissection & Design proposal

When I dug into each pain point, I find that phase 1 - initiate a community and phase 3 - community growth are sharing similar pain points that closely tie to the high-level information architecture. So I first looked at them together and explored possible solutions.

1. "I didn't aware of it."

Lack of awareness about the value of NFTs as a membership card and obscure flows is leading to low engagement with membership-related features.

Low engagement on membership-related features

3. "Why and how should I keep using it?"

There is a lack of long-term engagement and operation within the community.

User consider "member" as an information back end

Solution 1.
‍Build-by-step, centralized management

Old user flow - build & management all in one place
The flow of building and managing the project was intertwined together, and neither of them is coherent. Thus it was hard for users to recognize if they complete the task, what's the value of each section, and how do they support each other.

New user flow - build-by-step, centralized management
When users use the platform for the first time, walk them through the building project flow with clear navigation and contextual guides. Bring membership-related features (purple color) in front of the user. When users management the project, integrate correlated features to help users better manage the projects info, perks, and campaigns

Action-driven tooltips to onboard users
This tooltip is highly specific and contextual that guides the user to each feature as they progress through this product. By having this, users are encouraged to engage with more community features that benefit them.

Tooltip showing when complete adding NFTs

Tooltip showing when complete project creation

Solution 2.
‍Restructure & simplify the information architecture

The existing information architecture is nested and complicated, some key features has low discoverability and some pages only include a stand alone button. Users feel confused about the interdependency and are easy to lose focus.

How did we made the design trade-offs?
Remove redundant pages/functionalities, and integrate related ones
• What sections don’t require independent pages?
• What sections needed to be centrally managed?

Rearrange Hierarchy. Place key functions in more noticeable/relevant areas
• What sections have low discoverability, and low visiting rates, while play important role in community engagement?

At the current stage, manage NFT & Perk only by project
• Which IA is technically reasonable to be built out at the MVP stage?Which IA can be a base for future growth?
‍

Refined information architecture
• Reduced redundant pages and functionality by over 30%
• Clarify the interdependency
• Manage the project with a “page” pattern

Current IA v.s Improved IA

After solving the high-level problems, we started diving into the more detailed problems that occurred along the journey

2. "I don't know how to use it."

Technical terms and complicated mechanism are hindering novice from getting started.

Solution 1.
‍Two pathways to help users choose the right perks

Pathway A - An instant & brief term explanation
This pathway was designed for user who tends to explore and learn new areas by themselves

Which UI patter is better to show term explanation?
‍In order to help creators capture the meaning of terms, I explored 3 UI patterns of representation, and decided to go with accordion pattern. ACCESSIBILITY is the primary consideration, option 3 is not friendly to keyboard-only users / mobile users. The other consideration is PROXIMITY, terms and explanations in option 1 are placed farther than option 2, which weakens the visual correlativity.

Accordion pattern term explanation

Pathway B - Personalized recommendations
Many artists would rather focus their efforts on creating art than spending time sifting through the details of various perks and trying to determine which ones are most appropriate for their needs. To help minimize the learning curve, we have created a simple questionnaire that consists of just two questions. By answering these questions, creators can quickly get the perks that are best suited to their needs.

Solution 2.
‍Offer templates to help users easily promote perks

Contextual input hints
The input hint changes contents according to the specific perk type user selected and assist them to fill the form.

Reusable assets
The system will automatically save the records for users so that it can be easily extracted and reused. Or user can easily clone a historical perk to build upon it.

Design system

Analysis of research led us to consider the potential of Etcheve as a brand. The research revealed an interesting point: user thought we are not that much "web3." Thus we firstly conducted an internal discussion around these questions:
• What kinds of impressions does user has of the current product?
• What values and tones do the product intends to embody and instill in the users?
• As a NFT product, do we want to strength the Web3 atmosphere, or weaken it?

In order to find the most appropriate visual style for the product, I identified some keywords that represent the tones or moods the product will convey.

Based on the description, I started creating the mood board, putting together inspiration from various platform, and grouping them by similar looks and feels, and showcasing across the team.

After collaborating with the team, we finalized the design guidelines for Etcheve. The image below displays only a portion of the components, my primary focus was on the critical elements andI want to ensure that the guidelines were a dynamic document capable of adapting to future needs.

Testing & Improvements

Over the span of 2 weeks, we ran a couple of times internal team discussions and conducted usability testing on target users to validate the design solution. Based on various feedback from users and engineers, I continually iterated the design. The following are major improvements:

Improvement 1.
‍Started with options and clear directs

In the previous design, a full list of perks will be shown to the users.Surprisingly, the majority of users went to the path at the bottom that help them find the best-fit perks. These are the reasons:
• Some users stated they had no idea about how to choose the right perk
• Some users explained that they were too lazy to go through the meaning of each perk
• The others were just curious about the way through which Echeve will help them.

The iterated design provides two options and defaults to the “Recommendation” option, which we believe most users might choose (and beneficial to them.) We want to make decisive moments easier.