Stefano Tirloni

How can we improve the app navigation and filtering for the user?

The user experience plays a pivotal role in the success of any eCommerce platform. It's a make-or-break factor that can turn potential customers into loyal patrons or drive them away.

The challenges are poor UX browsing experience, particularly focusing on navigation difficulty and basic filtering options.

The implications of a frustrating UX that lead to users dropping off, is because they can't find the specific products they're looking for.

Design debt is also another issue, as the product doesn’t have a design system in place--while many design and UX inconsistencies need to be fixed.

Improve the app experience for two types of user personas

The app has two different types of personas, identified as “New User” and “Expert User.” Each of them has different needs, so the biggest challenge was to create new app structure and layout that can accommodate both users.

Another challenge is to create a better, more flexible, and scalable UX/UI layout foundation that will allow the future capability to add more features.

Discover

This phase helped us define project milestones, conduct a competitive analysis, and consolidate the final product vision. The first step was to understand the current state of the app and how users interacted with it. To achieve that, we conducted a mix of qualitative and quantitative research.

After an extended analysis, we had a clear idea about the type of users that were using the product daily. We identified two of them:

• New users - using the app for the first time.
• Power users - successful drop shippers recurring daily on the app.

The final project outcome had to accommodate both.

Define

At the end of the discovery phase and before jumping directly to the solution phase, I wanted to involve the team members in creating principles to follow closely for the new design.

I created user journeys for both personas to highlight how the experience differs based on their needs.

Here are the final principles:

• Our approach should be based on helping users get more relevant results, and make decisions between trade offs
• A less cluttered search area is better
• New and unsure users are better directed to a category than a search
• We should push users towards categories where our inventory and conversions are higher
• Showing supplier locations is a strategic advantage
• We don't want most of our users to over filter (while we have less products), so any advanced filtering should probably be expandable or not immediately visible
• When users show an interest in an area, we should encourage them to continue on instead of going back to the beginning and starting again
• Category landing pages should be clear, helpful, and encouraging
• Having locked filters can encourage sign ups
• Giving users an indication of category popularity may make choosing one easier for them, and filtering should be based on contextual information
• Pricing, margins, and shipping costs are key considerations for merchants

At this moment I revisited, and decided to update the categories structure as the old hierarchy wasn’t very logical at times. We identified that some sub-categories could be moved to the top of the structure, and we also kept the most successful categories in mind with the goal to have them at the top of the structure. During this process, I was collaborating with back-end engineers too to see how easy as to update the architecture.

Design

After conducting research, I utilized the gathered insights to develop initial flows and low-fidelity mock-ups for desktop designs. These mock-ups incorporated all the principles mentioned earlier and included flows from the homepage to different categories. During this exploration phase, I utilized various approaches for visual UX and content information. After presenting my designs to the product team, I incorporated their feedback and we voted on the best screen approaches. Finally, I presented the mock-ups to project stakeholders for review and approval.

Below another round of iterations followed by team reviews on Miro.

After collaborating with the team for several rounds of iteration, we agreed upon the best flow, and I began creating high-fidelity mock-ups.

Top Header

One turning point to heavily feature the most important categories at the top of the homepage

Here's the final update on the homepage top bar and top categories. This layout was designed to cater to the needs of both new users and power users. As part of the homepage revamp, we also improved the "Quick filters" feature, which was loved by our users. We decided to display the most important search criteria upfront to make it more convenient for our users.

Filters

We have added a new feature called "filters modal" that provides a powerful way to refine searches. We aimed to display the most important filtering criteria that would give a good number of search results. We have also labelled the most popular filtering options as "Pro" to highlight their effectiveness and encourage users to upgrade to the Pro Plan.

Text search bar

We analyzed the last major feature of our product which is the search bar. It is a commonly used method for users to narrow down their search and find the desired items. Our team aimed to build a smart and contextual search bar, but due to its complexity, we have moved this idea to the next release. For the first version, I laid the foundation of what we had in mind and developed a simple version of it. 
In version one, we have decided to provide two main search cases:

• The generic search from the Homepage
• Specific search when inside a category/subcategory

Generic search from Homepage

In this case user can type anything and the app will show all the related items as a result

Now we run the final review with the whole team, the layout got approved💥 Everyone was excited to bring the design to live!

Deliver

Prototype / Usability testing

We tested the flows internally with the team, we decided to don’t make usability testing with external people, as part of Spocket culture, we prefer release the feature to the public and carefully track all the metrics gathered by then.

Implementation

Before proceeding with the implementation, I conducted meetings with the customer success team and the copy team to align on the content to be showcased on the homepage during the launch phase. Following these discussions, I focused on developing the necessary creative assets for the page. I also assisted the front-end dev team over some QA sessions.

Split deliverables

Due to the big project scope and with the goal of delivering the features on time, we decided to decrease the scope of the filtering modal. The final solution was to move some advanced features that required heavy back-end work to Phase Two. My work was to update the filter modal by showing the features agreed upon for Phase One and be mindful of the value provided to the user when releasing them with the Phase Two filters missing.

Next steps

• Initiate a heatmap analysis using Hotjar to assess the click rate, the items added to the store and the bouncing rate for new users. Simultaneously, keep one eye on Hotjar video recordings to see how users are interfacing with the new layout.
• To further optimize the homepage, conduct A/B testing. Experiment with small different content variations and content hierarchy to evaluate their impact on user engagement and conversion rates.

Insights

An interesting discovery from the first release was the heavy use of the top search bar, having such a big search box input increased the engagement about text searches. This insight gave us confidence about the planned next step of building a smart contextual search bar for the next phase!