Enhancing User Engagement and Accessibility on Cooleaf Web Platform

Sponsored by Cooleaf for PSYC 6023 [HCI Research Methods] at Georgia Tech.
Summary & Outcome
Worked with Cooleaf to incorporate multimedia on their platform while keeping user engagement and web accessibility at the forefront of the designs.
Timeline
5 months
Aug '21 - Dec '21
Role
UX Designer
My Contributions
Research: Led user interviews, concept feedback sessions, task based expert heuristic evaluations, and usability testing.

Design:
Concept sketches, Lo-fi Wireframes, Mid-fi screens, refined features and hi-fi prototype, interaction design for hi-fi prototype.

Team: Yugvir Parhar, Madeleine Paulsen, Taylor Bunge, Yufeng Ritz Wang
survey design
visual design
hi-fi wireframes
concept feedback
accessible web design
UX research

Overview

TLDR; you can watch a 7 minute presentation explaining our work here: Cooleaf multimedia accessibility presentation

Background

Cooleaf is a platform that companies use to foster employee engagement. On the platform, employees can recognize each other through posts, participate in team activities & challenges, and earn points that can be redeemed for gift cards or other incentives.

Cooleaf’s mission is to create a company culture where employees are valued for their contributions, hence being accessible to everyone is very important to them.

The Problem

The stakeholder statement was rephrased as a primary research question:
Cooleaf, an employee engagement platform, wishes to integrate additional multimedia into their platform (photos, videos, live, etc.) while keeping accessibility and  user engagement at the forefront.
From this, two goals were immediately identified: 
[1]
Promote User Engagement with multimedia integration.
[2]
Promote web accessibility on the platform, and in all its features.

The Solution

We collated business needs, user engagement, multimedia and web accessibility with the following deliverables for Cooleaf:

[1] Developed high fidelity prototypes for boosting user engagement with images on Cooleaf by introducing features like voting, commenting, photo albums, and multiple ways to view images (grid and carousel views).

[2] Designed new upload mechanism to let users add alt-text for their image uploads. I also used this an opportunity to educate users about alt-text, and reflect on how people with different abilities might interact with the content they upload (reflective HCI).

[3] Finally, I co-conducted an accessibility audit using the WCAG 2.1 (Web Content Accessibility Guidelines) on the Cooleaf web platform. We presented our findings, suggestion, and made our case to Cooleaf founders on how being WCAG compliant will bolster their business.

Process

01

User Research

Understanding the Problem Space

I took a two pronged approach to understand the problem space better.

First, I researched what it means to be accessible on the internet, how people with varying abilities interact with multimedia on the web, and what the current norms and standards for web accessibility are. This helped us address and avoid any accessibility issues with the interactions we design for Cooleaf.

Second, I researched how current users use Cooleaf, how additional multimedia would affect their daily activities, and where on Cooleaf would multimedia incorporation benefit users the most? This helped us identify user pain points.

We used the following research methods to answer these research questions:

Data Analysis

Affinity Mapping was used to find structure in the data gathered. The raw worksheets can be found here: Data Worksheets. We made frequent reports to discus our findings with the stakeholder. This ensured a healthy balance of feasibility, addressing user pain points, creativity and meeting business requirements while we started the ideation phase.


The following were high level themes that were used to distill findings that then informed our design requirements found here: Design Implications for Cooleaf.

02

Findings


TLDR; you can find the design requirements: Design Implications for Cooleaf.

[1]
90 % of user traffic is on the web platform (not the mobile app). This led to us narrowing down our scope to the web app for maximum impact.

[2]
Multimedia inclusion would affect people with vision impairments the most. This gave us direction for making informed accessibility decisions.

[3]
Cooleaf lacks accessible navigability. The platform is not accessible via keyboard, or assistive technology.

[4]
Understandability of content is a pain point. The platform has misleading icons  and low contrast in various sections and due to its branding colors that hinder user experience.

[5]
Users engage in friendly competition, but a lot of engagement is happening off platform. This meant that we shifted our focus to “challenges” page where most of the engagement was concentrated.

User Personas & Empathy Maps

03

Design & Prototype

Ideation & Brainstorming

We worked in bursts of 10 minute periods to come up with ideas, as diverse as could be, and then relate them back to our design requirements. We clustered ideas together and these eventually formed our three main concepts.

Concepts

Concept 1 - Photo Albums
Features like albums, voting, leaderboards, and grid & carousel views for post submissions.

Find full list of associated features and Accessibility considerations here: Photo Albums Concept Features.

Concept 2 - Video Inclusion.
Features like "story-style" short video recognitions, redesigning video upload mechanism, and captioning for videos.

Find full list of associated features and Accessibility considerations here: Video Inclusion Concept Features.

Concept 3 - Live streaming.
Features like virtual socializing rooms for after-work or during work breaks while working remotely, and providing accessibility etiquette banners for live streams.

Find full list of associated features and Accessibility considerations here: Live Streaming Concept Features.

Concept Feedback Session
I ran concept feedback sessions with multiple Cooleaf users as well as with users of competitor platforms. The instruments and feedback results can be viewed in-depth here: Concept Feedback Session Results. The feedback was favorable towards the Photos concept, so we used the valuable user input to develop wireframes in that design direction.

Wireframes

The wireframes were made for the "Challenges" page on the platform. Our findings led us to this page as it was the most heavily used. The employers would post a challenge prompt (eg., Reading challenge), and employees would post images and submissions based on that challenge description (say, pictures of what they read). Taking that as the target webpage on the platform, we designed the following interactions.

Feature 1: Improving "Challenges" page UX with a photo album feature offering two different ways to interact with photos posted - Grid and Carousel views.

Feature 2: Prompting the users to add alt-text during photo uploads.

Feature 3: Boosting engagement with images by redesigning the "post", and adding features like voting, and leaderboards to bolster friendly competition that was valued among users of the platform.

Wireframe Feedback Session
I led wireframe feedback sessions with current Cooleaf users to get their input on the proposed features. The instrument for the session, and the findings can be viewed in detail here: Wireframe feedback session design and findings.

High Fidelity Prototype

We refined the wireframes based on user feedback and created hi-fi prototypes. The entire Cooleaf platform (while being within their brand colors) was recreated and the added features were designed carefully to make sure they fit Cooleaf's brand identity.

Feature 1: Prompting users to add alt text during image uploads.

Feature 2: Improving "Challenges" page UX with a photo album feature offering two different ways to interact with photos posted - Grid and Carousel views.

Feature 3: Boosting engagement with images by redesigning the "post", and adding features like voting, and leaderboards to bolster friendly competition that was valued among users of the platform.

The final prototype is presented below:

Further Accessibility Considerations

Our team notices that Cooleaf brand colors were not high contrast and failed to meet WCAG 2.1 Level AA standards, so we developed new brand colors that would provide high contrast and still work well within their brand identity.

Once we replaced the new color scheme in appropriate placed, we noticed and immediate reduction in eye strain and ease of reading on the website further signifying how designing for accessibility offers the best user experience for all.

04

Evaluation

Expert Evaluations

We performed a task based Heuristic Evaluation on the final prototype to uncover any severe usability issues. The heuristics used were specifically chosen to effectively measure our prototype. The instrument and evaluation design can be found here: Expert Evaluation Heuristic Scores and Qualitative feedback.

"...And it looks like I could enter some ALT text which is awesome. I like your information here about what this whole box is about." - Expert 1

Usability Testing

We performed a task based think aloud test with Cooleaf users and offered a single ease questions survey. The users could rate the ease of completing the task on a scale of 1 (very difficult) - 7 (very easy): Think Aloud test scores and Qualitative feedback.

"I like the option of having both grid and carousel views. I think it’s a good idea and people will want to go through both." - Stakeholder

#Represent

We constantly communicated with our stakeholder throughout this process to ensure they were aware of any major accessibility issues with the platform (like being keyboard accessible), and that the designs we developed were feasible for implementation.

We ended our project with a presentation to the entire Cooleaf team - founders and developers, and presented our case on how being WCAG compliant will drive their business to success.

The overall presentation was well received, with the founders actively engaging in discussion with our team about suggestions on making Cooleaf more accessible.

Key Learnings

[1]
Balancing accessibility needs with expectations of the stakeholder. I had to think about accessibility needs of each feature that the stakeholder desired (live streams, videos), and present them with feasibility for development.

[2]
Communication is key when it comes to stakeholders. At one point in the project, it was difficult to convince the stakeholders that video recognitions are not what users want in a professional setting like Cooleaf. I learned a lot while navigating that conversation and making sure we were addressing business needs in a way that also alleviated user pain points.

[3]
Narrowing down the scope. The given prompt was fairly broad, and I learned to focus research questions on what would make the most impact on user experiences.

[4]
Leading interviews and feedback sessions. I got experience with designing feedback sessions and leading interviews, which is valuable because I could implement changes to the prototypes more effectively, and could get impactful information from the sessions.