Increase user engagement with multimedia (e.g. images, videos, livestreams, etc.) on the Cooleaf platform while keeping accessibility at the forefront.
Our team was excited for this research prompt because of our shared interest in accessibility and the opportunity for an open-ended exploration of multimedia. After initial conversations with stakeholders, we realized the need to divide our exploratory research into two areas of focus: current user engagement and accessibility.
In order to understand user engagement with multimedia, we needed to consult current users of the Cooleaf platform. Then, to make sure we are considering all aspects of accessible multimedia, we decided to consult accessibility experts to guide our research and design decisions.
This lead to establishing the following central questions to guide our research:
To tackle these research questions, we employed the following methods:
Process: The audit was done in order to understand the current state of accessibility on the Cooleaf platform. The stakeholder statement, to include accessible multimedia, is only viable if there is baseline accessibility on the platform already. Thus it was important to formally assess the website with the WCAG EM Compliance report.
Findings: Out of 50 checks for the WCAG 2.1 Level A and Level AA, Cooleaf Platform’s home page passed 9, and failed 24 criteria, with the other 17 being not applicable or hard to discern. Of particular concern was the fact that the platform was not keyboard accessible, which was immediately relayed to our stakeholders as a high-priority issue. To help contextualize these findings for our stakeholder, we compared their platform's keyboard accessibility to that of another social media platform, Facebook:
Conclusion: This audit informed all of our future investigations and design considerations, and helped us gain an understanding of the scope of the objective: accessible multimedia inclusion.
Process: We conducted a cognitive walkthrough of the platform in order to examine the current usability of the system and pinpoint any usability issues to consider in our future designs. For this method we identified three tasks based on the most used features of the Cooleaf platform according to our stakeholder: logging in and recognizing a teammate, joining a group activity or challenge, and viewing reward history to redeem points for rewards.
We then asked the following questions on each screen during the walkthroughs:
Conclusion: This was a great exercise for our team to complete together as we were still familiarizing ourselves with the platform. We were able to put ourselves in the users' shoes to experience interactions that worked well and those that could use improvement.
Process: We spoke with 4 different accessibility experts, all of whom had varying levels of visual impairments and used assistive technology in some capacity. We used these interviews to gain more in-depth information about the behaviors, needs, and preferences of individuals using assistive technology to navigate websites and multimedia asking questions such as:
In what ways do websites fall short in accessible design for people with various disabilities? In what ways do websites succeed?
Conclusion: The perspectives of our interviewees both as experts in the realm of accessibility and as users of technology were invaluable in providing us knowledge of accessible technology as well as how to advocate for accessible web design and incorporate it into our design decisions moving forward.
Process: We spoke with 3 current Cooleaf customers to learn more about their day-to-day experiences with the platform, including how they currently engage with multimedia. Our goal was to identify any common thread pain points as well as look for opportunities to increase engagement with the platform. To do this we asked questions such as:
What is your primary goal when using the Cooleaf platform? Are there any ways in which this platform could better serve your needs?
Conclusion: The perspectives of current Cooleaf employees gave us much needed insight for the direction of our project going forward. We decided to focus our energies on the "Activities" page, as that was where users across the board demonstrated the most interest, thus it presented us an opportunity to increase in-platform engagement in our designs.
After gathering the notes from our 7 interviews onto Miro, we worked as a team to create an affinity map of our findings. Once we created our affinity map we "walked the wall" to brainstorm potential design interventions that informed our sketched concepts in the next phase of the project.
We then created personas to describe Cooleaf users with varying goals, pain points, and abilities.
We also formulated empathy maps to understand Cooleaf users' needs and frustrations.
Using our research findings from our accessibility audit, cognitive walkthrough, and interviews with stakeholders, users, and accessibility experts, we generated the following sketched concepts:
Concept 1 - Photo Albums
Features like albums, voting, leaderboards, and grid & carousel views for post submissions.
Concept 2 - Video Inclusion.
Features like "story-style" short video recognitions, redesigning video upload mechanism, and captioning for videos.'
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.
Concept Feedback Sessions: We ran these concepts by our stakeholder and Cooleaf users. We found that the Photos concept received the most favorable feedback and was the most feasible for our stakeholder to implement. We used this valuable user input to develop wireframes reflecting this design direction.
The wireframes were made for the "Challenges" page on the platform specifically. On this part of the platform, employees can sign up for challenge prompts (e.g. a Reading or Step challenge) and post images or descriptions of what the did to fulfill the challenge. We found that while users enjoyed the challenges, they didn't interact very much with the content other employees had posted. With this in mind, we designed the following features:
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 Sessions: We then solicited additional feedback on these wireframes from our stakeholder and Cooleaf users. We found that the Photos concept received the most favorable feedback and was the most feasible for our stakeholder to implement. We used this valuable user input to develop wireframes reflecting this design direction.
We then developed a high-fidelity prototype in Figma keeping in line with the branding of their current platform, and used this prototype to evaluate our designs with current Cooleaf users.
Process: To evaluate the efficacy of our prototype and uncover any usability issues, we conducted 3 heuristic evaluations with UX experts. The heuristics used were specifically chosen to effectively measure our prototype. We were particularly interested in ensuring that the alt-text feature was simple and self-explanatory, and that the user flow for the prototype was as expected.
We had our experts complete the following tasks within the app and provide a heuristic evaluation score of each task:
Process: Upon completing and analyzing the feedback from the heuristic evaluations, we iterated on our prototype and then conducted 5 remote think-aloud task-based usability tests with Cooleaf users. Our main goal with conducting the usability tests was to assess how well users could complete key tasks within the application.
We also had users complete the same tasks as the expert evaluators. We also asked users to complete the single ease question (SEQ) survey following each task, where users rate the ease of completing a task on a scale of 1 (very difficult) - 7 (very easy).
Findings: The task of uploading a picture to the challenge feed had the lowest average SEQ score. Upon further examination of the qualitative feedback, it appears this was likely the result of confusion surrounding the wording and format of the alt-text prompt during the photo upload process.
We gathered a lot of helpful feedback from our heuristic evaluations and usability tests. Based on this, we formulated the following design recommendations to our prototype.
At the conclusion of the project, we presented our findings to the Cooleaf founders, software engineers, and other stakeholders within the company. We gave them an overview of digital accessibility and why it’s beneficial for their business. We presented our research process and prototype, and we provided actionable recommendations for improving the accessibility of their platform. Within these recommendations, we discussed incorporating ARIA labels, alt text, fixing the color contrast, adding a high contrast mode, and some do’s and don’ts of accessibility solutions, such as avoiding "shortcuts" like accessibility overlays.
Our stakeholders were eager to learn how to make their product more accessible, and we were beyond thrilled to have helped inculcate an accessibility-first mindset within their company.
This was my first UX Research project as a Master's student in the Human-Computer Interaction program at Georgia Tech. It provided an excellent opportunity to put into practice the concepts and research methods we were learning in class. I found it extremely valuable to work on a multi-disciplinary team with colleagues who have varied backgrounds and complementary skillsets. In addition, having the opportunity to work with an industry partner made the experience a lot more realistic and impactful.