B2B • Social Platform • WEB
Enhancing Engagement and Accessibility on Cooleaf
ROLE
UX/ UI Designer
TOOLS
Figma, Miro, Google Workspace, Zoom
YEAR
2022
Project Overview
Cooleaf is an employee engagement platform that empowers colleagues to connect, recognize, and reward each other.
Goals
Cooleaf aims to enhance platform engagement by integrating multimedia features, shifting from a primarily text-based experience to a more dynamic and interactive one.
The goal is to encourage more frequent use and create a more inclusive platform that accommodates a diverse range of users, including those with varying accessibility needs.
My Roles
[User Research]
Organized and conducted interviews, analyzed data to identify key insights.
[Plan and Management]
Facilitated design workshops, updating progress regularly, and developed interview scripts to guide discussions.
[Design and Prototype]
Designed wireframes, refined through testing and feedback, culminating in high-fidelity prototypes that enhanced user engagement and accessibility.
Results
The proposed features aligned with the leadership's vision and were developed and implemented in the following quarter. The enhanced accessibility style guide also influenced the company's rebranding efforts.
01/ Increased Usability
The heuristic evaluation received low severity ratings, averaging 1.1 out of 4.0, indicating only minor usability issues.
02/ Positive User Feedback
All users in the testing group found the new features easy to use, with an average SEQ score of 6.4 across tasks.
Design Solutions
Enhance Community with Photo Albums
Usability testing showed that users found it easy to navigate and participate in activities, with an average SEQ score of 6.8 out of 7 (7 being very easy).
Some of the feedback can be easily addressed, for example:
Users had difficulty finding the 'View Album' button
I proposed to move it above the fold to improve visibility.
Readability issues were identified due to small font sizes and low-contrast text.
These will be addressed through accessibility improvements.
Photo Upload & A11y Guide
User surveys showed an average score of 6 out of 7, indicating that completing the task was relatively easy. However, while users noticed the accessibility guide, they struggled to understand its purpose and recommended providing examples on how to use the ‘alt-text’ field.
Vote, Like and Leaderboard
This feature received an average score of 6.6 out of 7, indicating ease of use. However, users expressed a desire to access the voting and liking features without needing to enter the photo album.
Accessibility Recommendations
Process
This section outlines the step-by-step design process, covering research, planning, design, development, and testing in the project.
Research Methods
We followed the interpretation, affinity diagram, and walking the wall methods in order to find patterns and relationships among the qualitative data we collected in this phase of the project.
Findings and Insights
03/ Understandability and readability
From accessibility audit and interviews, I identified problems that it was difficult to understand verbiage and icons. Low contrast was another issue.
04/ Increase in-platform engagement opportunities
Upon stakeholders request, I focused on the challenge page, where most interactivity happened.
Multimedia features should be accessible to VIPs (Visually Impaired Person).
Ideation
Brainstorming
My team drew inspiration from the Disney Creative Strategy for brainstorming, generating a wide range of ideas while keeping the design requirements in mind. We then affinity mapped these ideas into clusters, critically evaluating the more outlandish ones and identifying features that could be transformed into practical solutions. This process resulted in three key design concepts
Concepts & Feedback
With our concept sketches, made in low-fidelity prototype to mimic basic features, we sought out Cooleaf stakeholders and a competitor app user to test the concept.
Goal
We organized our feedback questions on three main considerations:
Feasibility of Cooleaf to implement the idea
Appeal of feature to user
Comprehension of feature to user
Results
The photo concept was the most appealing to reviewers, who ranked it as "most satisfied" during interviews.
The photo concept generated the highest user engagement.
Voting was the most popular feature, as Cooleaf employees and current users felt it directly addressed the issue of needing to leave the platform to engage with uploaded content.
Reviewers also felt that the features in the first concept were the most feasible for Cooleaf to implement.
Next Step
We applied our findings from the design concept sessions to inform the wireframe.
Wireframes
The combined feedback from stakeholders helped lead us towards making decisions for subsequent wireframes and prototypes. We further developed the Photo ablum concept and broke down the concept into 3 different features. Under each feature, we developed two formatting options and polled participants’ preference. Below are the categories under which we created the wireframes.
Feature 1 Photo Albums
This feature introduces a photo album feature that allows users to view all the media associated with an activity in one consolidated place. This alleviates the user from having to scroll the entire challenge feed to find a particular post.
This feature is displayed on the side panel of the activities page. It’s a consolidated view of thumbnails from each post from an activity. The “View Album” button takes the user to a list of all media/ posts. We designed the album layout in two ways - “Option A”, a wall of posts, and “Option B”, a carousel of each post with thumbnails of other posts on the side panel.
Feature 2 Photo Uploads
Wireframe for uploading images for recognizing colleagues with added accessibility guide as two different layouts — popup and static text.
This feature prompts users to enter alt text when uploading an image and helps them learn more about accessibility on the web. Here we present the same “pop up” and “static text block” options for the accessibility guide for users. These are the screens for uploading images while recognizing someone, a heavily performed task on the platform.
Feature 3 Boosting Engagement with Multimedia
For users to be able to vote and interact with the posts, we had to redesign the “post” itself. The current version of the post feature does not allow for other users to comment on or interact with the post apart from “liking” it.
Based on concept feedback and findings from user interviews, we devised a new post system that would allow users to have interaction capabilities for each post, comment, reply to comments, have @ mentions, and vote. Once the user votes on a post, it changes to indicate that the post has been voted on. The user has freedom to undo their vote as well.
Wireframe for redesigned post to include multiple comments and voting feature:
Wireframe for two different layout options for leaderboards - on the right panel and under challenge description on center panel.
Design Evaluation
We conducted heuristic evaluation and usability testing to assess the prototype’s effectiveness, identify usability issues, and evaluate accessibility.
Usability Testing
5 moderated think-aloud usability sessions were conducted to solicit feedback on our Cooleaf prototype.
(1 = very difficult, on a scale of 1 to 7.)
Heuristics
I led 3 rounds of heuristic evaluation with usability and accessibility experts.
(1 = cosmetic issues. need not be fixed unless extra time is available on the project)
Findings
Using Miro, we analyzed qualitative data compiling from usability testing and the heuristics, and organized these into categories such as Visual, UX Writing, Discoverability Issues, Feature Ideas, and Positive Feedback. This allowed us to identify patterns and common pain points, which informed our design recommendations:
Increase color contrast for better readability and navigability.
Move the “View Album” button above the fold to improve discoverability.
Provide an explanation and examples of “alt-text” to guide users.
Allow users to access the “Vote” and “Like” functions without entering the photo album.