Haydle Enterprise Q&A

Problem

Haydle‘s Q&A page lacks visual hierarchy, layout of where questions and answers go is confusing

Solution

Help users locate best answer clearly and quickly. Create more discoverable elements within UI (ex. hovering over elements) create more visual engagement

Role

I was the Lead UX Designer for this 3-week design sprint, conducted several meetings with CEO of Haydle, prioritized project goals, spearheaded user testing sessions, shot the video and video edited for final deliverable.

Team

Tradecraft: UX Designer Molly Anderson

WHAT CAN USERS DO?

First, doing design stories task flows allowed us to connect where there could be missing interactions and when we were to experiment with layouts, to be able to see the most important tasks users can do. This helped us scoped all the features on the page.

COMPARATIVE ANALYSIS

What exists and makes them successful? We looked towards other Q&A/Discussion boards like Quora, Reddit, Github, Product Hunt, Discourse, Qhub, Yahoo!Answers, Confluence, Stack Exchange, etc to look for common UI patterns and terminology. Not only looking at Q&A board, but sites like Youtube, Disqus, Linkedin, Facebook, NY Times, MSNBC, for column layouts, comment sections, social engagement buttons (likes), etc.

We were able to find common UI patterns and discuss with the CEO of Haydle what important decisions did they make when creating the initial Q&A page. We were able to clarify problems, discuss our ideas, and Haydle’s business goals to help us move forward to the next steps.

A/B TESTING

With trying to figure out what users understand about Haydle and what they didn’t, we took proposed ideas from what Haydle, patterns from our comparative study, and UI screens to make two different tests with several different interaction states and layout placements.

Test 1: http://invis.io/4R1MW2QKD
Test 2: http://invis.io/HQ1MXD1YX

Through testing with 5 users, we found the reaction to similar questions was positive and should be next to the question for comparative reasons. Another user input was the preference over the “endorse” word rather than “like” because of the professional setting.

HAYDLE 2.0–COLLAGING/ITERATE/REPEAT/SKETCH

After the feedback given and evaluating our results, we realized we needed to move at a faster pace. We were a little stuck working in the existing UI, so we started over in a new light by going into collaging and looking our comparative analysis again, this time focusing on columns as key components.

We gained valuable insights into interaction states with the collaging method and why columns could be helpful for future Haydle in breaking up chunks of text by cutting up paper and quickly wireframe sketching.

2 Columns vs 3 Columns: MSNBC, NY Times, TechCrunch, Washington Times, Guardian
Features: Disqus, Yahoo Answers, Quora, Wordpress templates

After discussing what worked and didnt work on our quick iteration rounds, we quickly sketched a ton of different layouts and interaction states individually, then discussed the best course to take for our prototype into the computer. It was clear to us why specific layouts and placements of key elements like the answer box were put at the very top on most sites.

Molly and I used Sketch to make the visual assets of the new Haydle 2.0 screens, then combined ideas together after creating our own layouts.

HAYDLE 2.5

After a ton of iterations and pair designing, we finalized our screens. The decision was made to make the question have a “read more/read less” to not interfere with being able to read answers. Many interactions were well-thought of to ensure unnecessary buttons and such wouldn’t interfere with being able to quickly find answers. Ex: Answer box with formatting appears only when you want to answer.