Haydle Enterprise Q&A

ClientHaydleYear2015 during TradecraftServicesUX


Haydle is a Q&A platform for businesses to retain knowledge easily in one location. It saves companies time and effort when onboarding new employees, training, or when any employee has any important question.


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


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


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.


Tradecraft: UX Designer Molly Anderson

Video Recap of Haydle Q&A Redesign


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.


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.


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.


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.


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.


Many usability problems were found in a previous usability study by a team member. Our next steps were to synthesize the results and figure out the best possible visual design recommendations


Offer small visual design recommendations the engineer team can take one that could improve & engagement for Haydle users


UX Designer for this 2-week design sprint, participated in discussions with CEO of Haydle, proposed several UI design recommendations


Tradecraft: UX Designers John Ferrigan and Ben Ronning

First Steps

The first steps were to get caught up in what Haydle is and figure out what path Haydle needed to take to move forward. A team member had previously conducted a usability study with users to find flaws in the user flow. Our first meeting delegating tasks to everyone and having a client meeting with Haydle to understand their needs and creating a design brief to keep us and the client on track.

As a team, we initially agreed to focus our efforts on these:

  • User Experience recommendations focusing on extending the functionality of topic tagging systems and user content curation will be provided, taking into consideration the project timeline and cost of implementation.
  • Explore and propose a redesign of the current question and answer (Q&A) interface. with recommendations regarding content layout, information hierarchy, and user activities will be provided as the output of this objective.
  • Recommendations on the design of a platform to implement user profiles and/or avatars to increase awareness and identity of Haydle users



One teammate created these personas as a way for us to include all roles of the company. This helped create a framework around causes and effects of Haydle’s features. It was valuable to help us get more insight on how Haydle effects users from top to bottom.


I created wireframes of user profiles and account settings


We had focused on user profiles up to this point, this was more of an additional step and consideration for Haydle for their future implementation. We decided to pivot to then go back to zeroing in on the design recommendations from the usability study given. There were 9 places we split up and tackled in Sketch. From our discussions, we trusted each other to work in Sketch separately then meet again to check-in for consistency measure.

Design Recommendations

1. Ask Button
2. Dashboard Readability
3. Bar Icons
4. Question Resolution
5. Splash Page for First Time Users
6. Entering Question Topics
7. Feedback on Post Entry
8. Q&A Dashboard Readability
9. Clarification on Experts

*bold is where I contributed


With 9 solid design recommendations, the next steps would be to conduct further usability study to mark the improvements. Talking to their current client base right now to better understand what their needs are and then continue iterating the existing or exploring new layouts based on those needs would be viable next steps. for Haydle.