I was approached to review and re-design the user experience of this product to create a more inviting experience for new users and a more user-friendly experience for the existing ones. I was the UX and UI designer and I worked closely with a developer and project manager. Due to the limited amount of time and resources, the re-design could not involve major back-end changes and had to stick to the current framework as much as possible.
I learnt a lot about the product shortcomings first hand while signing up and using the service. Since Askville had an active community, I was able to get customer feedback directly from questions posted on the website. While doing a competitive analysis of Askville, I noticed that even though it was one of the older user driven question answer communities out there, it did not have as big of a user base as some of its competitors like Quora and Ask.com. This had a lot to do with the poor quality of the content. This was due to the fact that the amount of users was very limited because the site was not easy to use, it looked really dated and was lagging behind in using new technological features.
Askville’s community primarily consisted of middle aged users having heated arguments about politics and religion or users with fake account asking questions about illegal activity. All in all, not very inviting to the average user. Askville needed new users and new content. It was time to focus on a wider target audience with a richer sense of curiosity
In an attempt to make the website more browse friendly, the site ended up with dozens and dozens of buttons and functions. They were all treated with the same amount of importance because of which the good features got lost in the mix of the mundane ones. Everything became clickable and almost 90% of the website was either a button or a blue link. The site needed better information architecture and hierarchy. Some of the other issues included a clear question process, better browse and discovery of questions, guidelines for advertisements, allowing users to answer with pictures, setting alerts, the ability to follow and read long threads, making the type more legible and responsive, portraying question and answer scores of each user.
I updated the old color palette to create 2 main colors for Askville – The orange for asking, alerts and reminders and the blue for answering, pivoting points and secondary navigation. The colors had a slightly modified hue and brightness to make the system look more fresh, energetic and lightweight.
I switched the primary typefaces to Helvetica and Georgia since they not only work well together but are also easy to use across different platforms and operating systems. Georgia added a nice editorial touch to the questions while Helvetica was a great sans serif complement because of its neutrality and clarity. Since it is easy to read at small sizes, it made a perfect fit for all secondary and tertiary information.
To create a sense of hierarchy in the layout, I used a light grey and white for the foreground and background to separate the information with “cards”. I also helped restructure and prioritize the various actions, filters and links throughout the site.
The followed tags page was the landing page for all signed-in users. It displayed a feed of all the latest questions from the tags that the user was following. Using the new visual language I was able to separate and call attention to the main content – the questions, with re-structured navigation and actions. Due to the limiting nature of a horizontally scrolling menu, I created a left navigation that could house the tag names and other sub navigation. This also helped decrease the column widths for the text and create a more ideal measure.
In order to promote higher content quality and encourage user participation, the new Askville introduced question-answer scores for all users. I created the following design pattern to clearly portray the 2 different scores while aligning with the visual language of the website.
While keeping the basic structure of the page the same, I changed the scale of some of the content based on user needs. This included highlighting the stats, subduing ‘block’ and ‘report’ while highlighting ‘follow’ and ‘send private message’ and incorporating the new question-answer scores.
To simplify and speed up the process of changing settings, I collapsed all 5 tabs worth of content into a single page sequenced in the order of importance.
The re-designed answers page allowed for easier scanning with the use of colored threads separating each sub-conversation. The re-structuring also included moving the ratings to the right hand side and highlighting the used ratings for faster skimming. The users could also now attach images to their answers with a simple 2-step process.