Codologic Forum
A support forum for IT firm
Tools
Invision,
,Photoshop
Illustrator,
Camtesia
Team Members
1 UI/UX Designer
1 Content writer
1 Web developer
My Role
UI/UX Designer
Duration
1 month
Codologic is a software firm that creates intelligent and easy to use communication utility plugins and software for websites . Codologic has its own support forum where customers can post their issues and get a quick solution, Our task as a design team was to review the existing flow, layout and design and suggest a redesign that that provides the easy and engaging user experience to post questions and get answers.
Research And Analysis
User Research
To understand the issues of the current design, We ran a usability test with 10 people (5 developers and other IT professionals). Since all the participants were not physically at the same location, we used Camtasia software to screen capture their movements.
We asked them to complete the following tasks:
User Tasks
-
Create a New topic
-
Find out how many new topics are currently there in the Landing page
-
open the user profile
-
Go to any subcategory topics and review the forum members' answer for that topic.
-
Go to the next page to review more answers.
-
Change notification preferences to "Only mentions".
Feedback
The users were able to complete most of the tasks but one of creating a new topic. Even though they were able to complete the tasks the user experience was not at all easy.
Here is what we learned from their feedback:
-
8 out of 10 users could not find the create new post button.
-
"Notifications icons for new posts and replies are confusing"
-
"I have to scroll up to go to the next page!"
-
"I am confused- I am seeing these topics but where are the answers?"
-
"How would I know that this answer is legit?"
Content Audit
We analyzed the whole website to understand the problems and user pain points. I took the lead in grouping our findings and users' feedback, and summarized all issues into the following problems:
PROBLEM 1
Placement of Buttons and Icons
On the landing page, 'Create New Topic' button was in the top right-hand corner which was almost impossible to find. Moreover, other icons such as new topic icon, tags and reply notifications icons due to their unusual and nearby placement with each other.
PROBLEM 2
Similar Layouts
It was difficult for users to differentiate between the topic list page and topic detail page.In addition, the pagination options were in the top bar on topic detail page. So, the user had to scroll back to the top to go to the next page.
PROBLEM 3
Category options
In the user profile page, the categories were confusing for users. and there was no way for users to keep track of the topic that they have created.
User-centred Design Canvas
To keep every team member on the same page, we created a design canvas, which also helped us in deciding the next steps in the process.
Business
A for-profit organization provides a platform where users can post their issues about the software program that the company provides.
Users
-
Software Developers
-
Project managers who use these software programs in their project.
-
Website owners who have this software integration on their website.
Users' Problems
-
Cannot navigate the website to find the needed information.
-
Do not know how to post their issue.
-
Do not have a way to verify the credibility of the replier.
Motives
-
Post about their issues.
-
Read about any similar issues and their solutions.
Solutions
-
Clear navigation for users to get answers quickly and effortlessly.
-
Make the new topic posting easier
Improve visual design and layout to capture user’s attention. -
Provide a way for the user to check the credibility of other members.
Ideation
User Flow
After understanding the problem and its possible solutions, We created user flows to get the bigger picture of the overall design. This also helped us in understanding entry and exit points for any activity and the system's reaction based on user interaction. Overall, the flow helped us in providing seamless user experience through the website.
Initial Sketching
After getting hold of user flows, we individually created different paper sketches to explain our ideas to the team and stakeholders. Paper sketches made the whole review process a lot quicker and easier.
Profile Page
Home Page
Topic Details Page
Enhancing The User Experience
After finalizing our paper sketches, we started our design process by creating wireframes and high-fidelity prototypes. Here I have explained the main features which we have designed and enhanced to solve the core problems.
Enhanced Side Menu
Based on the user feedback, we modified the side menu for different pages by mainly removing the unnecessary items such as the search bar and tags from the side menu and making the design more intuitive by adding a summary inside the menu. We kept the consistent layout by keeping the same design and placing the side menu on the right on every page.
Redesigned 'Start New topic' and Navigation
We created the easy-to-find button for 'start a new topic' that helps the user in posting their questions. We also added auto appearing sticky navigation with 'start a new topic button' when the user scrolls down to review more topics. This helps users to post their question at any time.
Added Members' Details
The existing design lacked a way to see members' details. We created a small section that shows the credibility of each member by providing the number of upvotes member has received, replies he has provided, and his rank. This information was essential for users in determining whether the reply is reliable or not.
UI Design
Visual Changes Throughout Project
We tested the design throughout the different stages with stakeholders and users. We made the modifications based on the feedback we received.
Wireframes - We met with the stakeholders weekly to get feedback on the functionality, content, and design of the forum..
User testing - We conducted a usability test with five participants and received positive feedback on the functionality and interaction of the product. 100% of participants were able to submit their question to the forum.
Version 1
Version 3
Version 2
Version 4
After many iterations, we settled with last version (version 4) of visual design as shown above.
Prototype
Reflection
Overall, this was a great project to work on. In one month, we were able to follow the whole UX process and delivered an actual website with 12 pages. Due to the short time frame, we didn't have enough time to better understand users and their responses to the website. If we had more time, I would iterate another round of usability test on the high fidelity design.
Selected Work
Capital One: Empath
An intelligent platform experience for help line agents
Canadian Jewish Military Museum
An Interactive Storytelling Of Jewish Contribution
Food Split
A mobile app that lets you split your bills in hassle-free way