.gif)
.gif)
.gif)
01
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:
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.
[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.
03
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.
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.
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.
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:
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
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
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
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.
[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.