Ideation

Brainstorming possible solutions

Sketches played a vital role in enabling us to explore potential solutions for the minimum viable product (MVP) at an early stage during the brainstorming process. Once we had a variety of ideas, we brought them to stakeholders to gather feedback from both technical and marketing perspectives. This feedback helped us to swiftly prioritize solutions, ensuring that the most feasible and effective options were selected for the MVP.

Storyboard

Narrating Henry’s Story with A-Matcher

To ensure design and development are heading in the same direction, we reorganized solutions and visualized them in Henry’s story. Let Henry (our persona) walk through his interaction with A-Matcher!

Design

Streamline the onboarding flow

We aimed to make the account creation process as effortless as possible, enabling users to achieve maximum efficiency without the need to repeatedly navigate between sign-up and sign-in pages. In addition, we incorporated a transitional welcome page, which not only helps to engage users but also orients them to the product in a non-intrusive manner. Going forward, this welcome page will also serve as a dashboard for existing users, providing a centralized location to access and manage their account information.

Furthermore, to direct different target users to tailored pages right from the beginning, we have refined our approach by providing two separate entrances, which minimize the risk of overwhelming or confusing our users with irrelevant information, and ensure that they can easily find the information that they are looking for.

Low fidelity wireflows

Design critique

In order to refine our design, we organized an internal critique session that involved engineers, product managers, and other designers. Following the feedback we received during this session, we were able to quickly conduct the first round of iteration, resulting in several significant improvements to our design:

1. Switching between different identities

What if the user initially enters our product as an investor, but may later transition to an analyst identity?
A toggle switch is the improvement in response to the two entrances design. To remove users’ concerns and enable them to quickly switch between two different interfaces. This ensures that users can seamlessly transition between identities without experiencing any interruptions in their experience with our product.

Navigation bar - before (left) & after (right)

2. Paving the way for personalization

Based on our research, we discovered that users prefer to see content that aligns with their investment habits. In addition, our company aims to identify our users' needs and deliver content that is relevant and valuable to them. So in-between the sign-in and welcome page, we decided to add a preference collection section to paving the way for future personalization.

Added preference collection page

3. Leveraging Empty State to guide users

The previous welcome page was taken over by a lightbox popup, which was intrusive. In order to empower users, an empty state was added to help users glean product values and actively decide if they want to get educated at this moment.

Welcome page - before (left) and after (right)

4. Help Center - From a page to a side panel

Previously, the help center was an independent page. It is easy for users to lose contexts when they raise questions in one place and search for them in another. In the refined version, “side panel” pattern is more flexible and contextual.

Help center- before (left) and after (right)

Testing & Improvements

Having a refined version of the product, we continued applying the visual language and testing hi-fi prototypes with 6 users and it was encouraging to receive more positive feedback. Based on 3 focused pain points that we’ve got, we did the second round iteration.

1. "I feel confused about the meanings of terms."

• Terms used on the product are professional, not universal.
• There are some users who are unable to comprehend them due to their lack of knowledge.

Solution: Introduce terms as the first step of each tutorial section, presenting them with texts, illustrations, and examples.

Terms explanation as first step

2. "I don't remember where I came from"

• The last version provided instructions with passive voice, which does not encourage actual use.
•  Users didn't realize the elements were clickable, they relied on the next button to move forward.

Solution: Adapt the tone of guides and have users engage in hands-on activities to enhance their memories.

Refined walk-through tour

3. “Hard for me to find what I need in the help center at a glance.”

•  The previous version adopted an expandable menu bar, which was less discoverable.
•  The previous version displayed information only as text, which was not visually straightforward.

Solution: Replace menu bar with visible pattern.

Refined help center