Haydle UX Projects

Overview

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.

Note:Below are two tabs with separate projects completed for Haydle

  • Q&A Page Redesign
  • Design Recommendations

Untitled drawing

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

tara site- haydle process

Process

Q&A Page Redesign

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.

Haydle 1.5

With our discussion with Haydle, we thought we would try working within the existing frameworks for Haydle’s current layout and then another version an experimental approach for further exploration using our comparative analysis as a base point.

A/B Testing

With trying to figure out what users understand about Haydle and what they didnt, 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 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.

Problem

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

Solution

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

Role

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

Team

Tradecraft: UX Designers John Ferrigan and Ben Ronning

Copy of tara site- haydle process 2

First Steps

The first steps was to get caught up on what Haydle is and figure out what path Haydle needed to take to move forward. A team member had previous 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. A team member created an amazing design brief found here.

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 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

Process

Design Recommendations

Personas/Storyboard

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.

download

Sketches/Wireframes

I created wireframes of user profiles and account settings

Pivot

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

 

Below are the design recommendations I completed for the final deliverable

Deliverable

Check them out!
View the PDF

Finalizing

View the design recommendations made here.  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.

This is a unique website which will require a more modern browser to work!

Please upgrade today!