Skip to content

QUESTION-AND-ANSWER WEBSITE

Level:

Client project; student training

Timeline:

Three weeks

Team:

4 members

Role:

User Experience Designer, Information Architect

Software:

Figma, Miro, Google Suite, UX Pressia, Gantt, UX Tweak

Tools:

Cardsorting, Data Visualization, Information Architecture, Market Research, Production, Project Planning, User Experience, User Interface, User Interviews, User Research, Wireframing

Prototypes:

Live site:

The Challenge:
The client needs to improve their UX strategy and test their activation funnel for a website build as a freemium business model. They needed to know how their platform can be designed to better deliver value, meeting the pain points of their target users. They wanted new features that would increase user engagement to incorporate into the next iteration of their platform. 

Solution:
The first step was to conduct interviews with users who use competitor platforms. From this, prototyping and usability testing determined an initial information hierarchy that was engaging to projected site users.

Results:
We built a highly engaging and visually appealing mobile responsive website to drive user engagement and value.

User Interviews

We asked seven users about about what their ideal online forum community would look like.

key insights

  • Users want a visually appealing site that is  straightforward, easy to use, and reliable

  • Users see value in responsive customer service  provided by websites

  • Users are more inclined to participate when they  find a community of people with similar interests  being able to search with keywords is important  to users

  • Users like to feel validated when participating in  online forums and communities

  • Users value content that is authentic and based  on their interests

the probleM

Olivia needs to find a trusted online space that provides easy-to-find, immediate, and reliable answers to her web-based questions because she has a limited amount of time to complete her assignments and needs help learning to navigate university websites while studying remotely.

Drew needs a single-sign-on website that allows him to quickly navigate to credible information from transparent sources so that he can easily find answers to work- and home-related questions from a trusted online community.

Peter, a small business owner, needs a website where he can feel comfortable contributing to discussions and creating posts on his own because he wants answers that are personal and specific to his problem.

PERSONAS

User flow

Once we identified the primary persona, Olivia, we proceeded to map out a flow chart of tasks and decisions she would be faced with in using the website.

How Might We

We considered our approach to the important goal of getting users to engage and trust the website and its content.

sketches and wireflow

To further tackle HWM Statement, we utilized a hybrid non-moderated card sorting to map out a site structure that optimized both the unregistered and registered user’s experience. Card sort participants were able to sort menu navigation items unique to ReeVueIt, those found on our competitor sites, and were also able to suggest menu items.

 

Some highlights from the card sort study include that 76.9% of participants placed the Settings menu item within the Utility Menu. We accommodated this with user settings within the ‘Profile’ page. And 84.6% of respondents envisioned the Support menu item also placed within the Utility Menu. We accommodate this with a ‘Contact Us’ page and including some support-related content within the ‘Frequently Asked Questions’ page.

sketches

We explored user interface concepts aimed at prioritizing user engagement and the use of custom notifications, the designation of subject matter expert users, content filters, allowing users to categorize their posts and also designate the post subject type.

Wireframes

In our mid-fidelity wireframe progression, we aimed at reducing options to prevent user cognitive overload while prioritizing elements geared towards expediting user engagement. We also focused on creating visual contrast so that users could readily identify features. Additionally, following a client meeting, we created UI concept for an advanced rating system.

Client Presentation

View our full client presentation below:

Mobile responsive prototype

For the mobile responsive layout, we used 2 approaches. In the column-drop approach the a layout was reduced from 3 columns to a single column. And while the Top Contributor card was displayed as a vertically-stacked list on the desktop version of the design, it was converted into a horizontal scroll on the mobile version.

 

For the sign in screen, we simplified from a pop-over window into its own screen via layout shifting. This approach aligned with our goal to seamlessly transfer the user’s ability to quickly engage from the desktop experience to the mobile responsive experience, and continue to prioritize elements associated with user’s primary goals.

Next steps

Continuing on the goal of creating value by encouraging immediate user engagement, increasing visibility across the web, and creating credible content we recommended the following next steps for getting users excited about ReeVueIt:

 

  • Card expansion functionality – combine chevron and comment icon into one for card expansion functionality.

  • Further development of Menu navigation – provide indication/organization for users to identify pages they are viewing outside of Home Screen.

LATEST POSTS

DRUGGED DRIVING

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

NORTH CAROLINA STATE UNIVERSITY SEASON TICKETS

Adobe Experience Manager vs. WordPress: The Authoring Experience Compared Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam nulla
Read More

Impetus epicurei cu eum, et illud officiis splendide ius, has virtute volumus adolescens ea. 

#tag