JustAnswer. Mobile strategy and mobile web experience

JustAnswer is the leading Expert question and answer website. It allows to chat with 12,000+ verified Experts on demand, 24/7. Since 2003, JustAnswer helped more than 10 million people get instant access to professional help.

Role

Led a redesign process and established a design strategy for the mobile experience. Collaborated closely with product managers, UX writers, analysts, and engineers. Worked on user research, conducted user interviews, and moderated user testing sessions.

Year

2022–2023

Problem

In 2022, the number of mobile users on JustAnswer was increasing and had reached around 70%.

By that time we already had a list of problems we wanted to solve:

  • The web and mobile app experiences have been in use for over seven years and were not optimized for mobile use.

  • Both the web and app are inconsistent and provide entirely different user experiences.

  • The lack of a mobile-first approach could have affected user retention and product stickiness, especially as more users switched to mobile devices. Ultimately, this could have impacted primary metrics: LTV and Retention.

  • The mobile web experience had been developed using outdated technologies, which made it difficult to implement and test new ideas quickly. As a result, one of our objectives was to migrate mobile web to React.

Legacy web mobile and mobile app

Business objectives

1

Establish a comprehensive mobile strategy that could be applied to both the mobile web and mobile app. This involved creating a North Star vision that would serve as a long-term strategy for mobile experiences across various platforms.

2

Enhance the user experience on the mobile web dashboard.
That will provide members more confidence in the service, and drive retention.

3

Focus on primary metrics. Improve primary metrics LTV35 and Retention.

Mobile North Star vision

Research

Once we had collected all the feedback from our internal stakeholders, we started with user research in order to identify the main pain points and areas of opportunities. We conducted moderated user interviews with 8 users who have asked at least 2 questions in the last 3 months.

During user interviews, we provided our customers access to the test account so that they could navigate through the app and share their thoughts and feelings regarding their experience.

Once we had collected all the feedback from our internal stakeholders, we started with user research in order to identify the main pain points and areas of opportunity. We conducted moderated user interviews with 8 users who have asked at least 2 questions in the last 3 months.

During user interviews, we provided our customers access to the test account so that they could navigate through the app and share their thoughts and feelings regarding their experience.

Testing script and some user's feedbacks based on the experience with the legacy app

Some user's data and heatmaps analysis

After completing all the interviews, and documenting all the insights, we used the affinity mapping technique to categorize the pain points and potential areas for improvement. This approach allowed us to identify the product areas that need the most attention.

Affinity mapping of user's insights

So, what we learned so far:

  • Favorite Expert function is popular despite low awareness Users had trouble navigating between different pages (i.e Home & My benefits)

  • The dashboard is too crowded. So many CTAs fighting for attention

  • The breadth of question categories is popular despite low awareness

  • Past questions are lower on customers' priorities but occupies valuable above-the-fold space

  • Users often didn't scroll down past My questions

  • Favorite Expert function is popular despite low awareness Users had trouble navigating between different pages (i.e Home & My benefits)

  • The dashboard is too crowded. So many CTAs fighting for attention

  • The breadth of question categories is popular despite low awareness

  • Past questions are lower on customers' priorities but occupy valuable above-the-fold space

  • Users often didn't scroll down past My questions

Mobile strategy

Once we had a clear picture of user insights, business objectives, and all the information from the stakeholders, we organized a series of workshops involving the product managers, designers, and developers to ideate on how might new experience look.

Using low-fidelity wireframes we’ve built a user journey that showcased a shared vision of the future user’s end-to-end mobile experience.

End-to-end user journey. Mobile strategy low-fidelity wireframes (final version)

Wireframes & user testing

One of the main goals in the scope of this project was to build a consistent experience for both mobile web and native app platforms. Generally, our product was divided into 3 meaningful parts: Pre-conversion, Waiting room, and customer's dashboard. In the scope of this project, we focused specifically on the customer's dashboard experience.

First of all, we started with the information architecture and the navigation. The navigation has been completely reworked on the mobile web. The hamburger menu was deprecated and all important features were moved to the bottom navigation bar. For the mobile app, we just had to shuffle some modules around, as the mobile app already had a bottom navigation bar.

The most significant improvements were made to the home page:

  • From the interviews, we knew that our users are interested only in their active questions, so all the past questions were moved into a separate tab. That helped us to reduce the page scroll by 2.5 times.

  • The question card was simplified and now takes 3 times less space. By that, we freed up some vertical space to give user access to the additional value-added features like experts, benefits and category-specific features.

  • In addition to that, we have incorporated a category filter to educate users about other available Experts. We had this learning from customers' interviews, where they mentioned that they are not aware of other question categories.

  • From the interviews, we knew that our users were interested only in their active questions, so all the past questions were moved into a separate tab. That helped us to reduce the page scroll by 2.5 times.

  • The question card was simplified and now takes 3 times less space. By that, we freed up some vertical space to give users access to additional value-added features like experts, benefits, and category-specific features.

  • In addition to that, we have incorporated a category filter to educate users about other available Experts. We had this learning from customers' interviews, where they mentioned that they are not aware of other question categories.

High-fidelity wireframes with some improvements after user testing sessions

User testing

We had couple of rounds of user testing, gradually improving wireframes based on user’s feedback. The bottom navigation bar allowed user’s quickly jump into asking a new question, category picker worked well in educating about additional categories. At the same time benefits section was treated as ads and user’s didn’t like that, complaining we are trying to upsell something they don’t want to. So we tried to explore alternate versions for showing benefits, as they’ve been already included in customer’s membership.

We had a couple of rounds of user testing, gradually improving wireframes based on user feedback. The bottom navigation bar allowed users to quickly jump into asking a new question, category picker worked well in educating about additional categories. At the same time benefits section was treated as ads and users didn’t like that, complaining we were trying to upsell something they didn’t want to. So we tried to explore alternate versions for showing benefits, as they’ve been already included in the customer’s membership.

User testing sessions and some user’s feedbacks (one of the first versions of low-fidelity wireframes)

User testing sessions and some user’s feedbacks
(one of the first versions of low-fidelity wireframes)

Final designs

After a couple of design iterations we've finalized the final solution and approved it with the leadership.

After a couple of design iterations, we finalized the final solution and approved it with the leadership.

New

Old

Mobile web customer's dashboard before and after redesign

Home page

We introduced completely redesigned Home page with a new view of the benefits and personal AI assistant.

We introduced a completely redesigned Home page with a new view of the benefits and personal AI assistant.

Home, Inbox and Experts tabs

User testing sessions and some user’s feedbacks
(one of the first versions of low-fidelity wireframes)

Bottom navigation

One of the most significant changes we introduced was a new bottom navigation. The home page would have active questions, benefits, favorite experts, and questions from the community. The customer's previous questions now have their own tab Inbox.

Category picker

We introduced category picker to educate users about other available categories and Experts.

We introduced a category picker to educate users about other available categories and Experts.

Filter your questions by category and easily ask a new one

User testing sessions and some user’s feedbacks
(one of the first versions of low-fidelity wireframes)

Membership benefits

During user sessions, we tested a lot of different designs for the benefits cards, as some of them users treated as ads.

The benefits card design that received the most positive feedback from users

User testing sessions and some user’s feedbacks
(one of the first versions of low-fidelity wireframes)

Personal AI assistant

We have also introduced a personal AI assistant as a long-term strategy. The AI-powered assistant has been already in use on the pre-conversion flow and we wanted to introduce it to the post-conversion experience. But that's completely different story :)

We have also introduced a personal AI assistant as a long-term strategy. The AI-powered assistant has been already in use on the pre-conversion flow and we wanted to introduce it to the post-conversion experience. But that's a completely different story :)

Personal AI assistant has been introduced to the customer's dashboard as one of the long term strategies

User testing sessions and some user’s feedbacks
(one of the first versions of low-fidelity wireframes)

Inbox

The Inbox tab is the place where users can find both active and past questions. Also they are able to filter questions by category.

The Inbox tab is the place where users can find both active and past questions. Also, they are able to filter questions by category.

Inbox is a place for all customer's questions

User testing sessions and some user’s feedbacks
(one of the first versions of low-fidelity wireframes)

Question cards

The question cards have been designed in a way that they can fit all the important information, like question category, time stamp, Expert's name, rating, status, Expert's reply and additional actions "Favorite" and "Rate."

The question cards have been designed in a way that they can fit all the important information, like question category, time stamp, Expert's name, rating, status, Expert's reply, and additional actions "Favorite" and "Rate."

Onboarding

In order to educate existing customers and onboard a new one, we designed a short onboarding with some introduction of new major changes.

Short user onboarding for the new experience

User testing sessions and some user’s feedbacks
(one of the first versions of low-fidelity wireframes)

MVP and prioritization

The scope of moving from legacy design to a new design was huge. So we sliced a new design implementation into 4 phases, moving with gradual changes first. That allowed us to quickly test and learn, instead of spending months on the whole redesign.

The first phase included changes to the home page for the mobile web, without moving to the bottom navigation yet. We had a lot of additional pages to redesign in case of moving to the bottom nav.

The scope of moving from a legacy design to a new design was huge. So we sliced a new design implementation into 4 phases, moving with gradual changes first. That allowed us to quickly test and learn, instead of spending months on the whole redesign.

The first phase included changes to the home page for the mobile web, without moving to the bottom navigation yet. We had a lot of additional pages to redesign in case of moving to the bottom nav.

Mobile North Star vision (left) and first MVP release (right)

User testing sessions and some user’s feedbacks
(one of the first versions of low-fidelity wireframes)

A/B test and results

During the first phase of the redesign, we launched an A/B (50/50) test to assess its impact on key metrics. After a period of 2 months, we discovered a significant improvement in our primary metric LTV35, with a notable increase of 6%. At the same time, Retention was up by 4%. These results were highly encouraging. Additionally, we observed a noteworthy decrease of 11% in the refund rate.

6%

LVT35

4%

Retention

11%

Refund rates

Taking into account these findings, we made the decision to normalize the new design and roll it out for all of our users. The next phase would include moving to the bottom navigation and redesigning all additional pages.