top of page

CBoard Redesign

4 month Bootcamp Certification

imac-mockup-standing-on-a-solid-color-room-a20674.png

Timeline: 3.5 months | September 2022 - December 2022

Role: Lead | Project Manager

Responsible For: Timeline, V.1 Wireframing, Onboarding, Music Feature, Standard Colors, Tooltips, Settings Page

What is Cboard?

CBoard is an open-sourced aided AAC device also known as augmentative and alternative communication. This device is another way of communicating instead of talking. According to this chart, CBoard would be considered a communication board, using a speech generating device with picture-based systems.

Classification-of-AAC-Systems-AAC-augmentative-and-alternative-communication-Source.jpg

Problem Statement

Our 1st Problem Statement focused on only one type of diagnosis

So why this Problem Statement? It's more open to several diagnosis for research purposes and time constraints

How might we help individuals who have trouble communicating as a result of or due to medical diagnosis converse with family on an intimate level?

Initial Research

During this phase, the design team individually did our own research to gather as much information as we can that resonates with our problem statement for our first design. 

What We Found...

  • AAC devices are expensive through insurance which led us to discovering CBoard because it's open to all through a website.

  • Lack of inclusivity in regards to Black, Indigenous, American Indians was also an issue we noticed.

Competitive Analysis

The key features that users of similar AAC apps wanted were...

  • A-Z word search

  • Can be used in emergency medical situations

  • Edit and add phrases and fringe words for natural speech

  • Easy to change tense of words

  • Consistency

  • Music, Books, or something similar

  • Dark mode to prevent migraines

Miro

We used Miro to collaborate and decide on the main solution.

Copy of Copy of CBoard Redesign - MMC Team Natural-2.png

Our main focus started with only African American Vernacular English (AAVE) icons, but I still felt like a music import was just as important based off the findings I found. 

Solutions (My portion is in bold)

  1. Music Import for more inclusive conversations

  2. Inclusive Icons to allow for more diverse conversations

  3. Update Design system to modernize the overall look

  4. Update Settings Page that minimalizes the pages

  5. Update Standard Colors with something more welcoming and accessibility friendly

  6. Create a Minimalist and Modern Onboarding Process for straightforward understanding

  7. Add a Mobile Version to gain more users

Copy of Copy of CBoard Redesign - MMC Team Natural.png

We met with the actual CBoard Design Team over Zoom...

and they loved what we had so far!

Design Process

Cboard V.1

During our version 1 design, we weren't focusing on what was in front of us. We were rushing to get a design put together for our researchers to test due to time constraints. Our main focus was about the aesthetics of the solutions. When in actuality, we needed to refocus on the functionality of our solutions. How can the user get to point A to point B smoothly? We didn't want it to be worse than the original product, so we regrouped after our meeting with CBoard. We knew okay...if we don't have enough time for our users to use a fully functioning design, let's see how they enjoy what we have already... the aesthetics of our solutions. Are we even going in the right direction?

While the research team was already testing this version, I decided that we needed to begin concentrating on the functionality as we know it should be on version 2. If any adjustments needed to be made after the research, then that is what we will do. 

Cboard V.2

Onboarding

From the data the research team gave us, the onboarding needed to be better. It's literally the first thing that a user most likely will navigate. So I placed a lot of focus in this area. I modernized it with the pagination for the mini tutorial. All in all, I created a smoother transition from one screen to the next.

Screen Shot 2022-12-26 at 11.13.26 AM.png

Music Import

The research showed that the users didn't even know where to choose on the sidebar to get to the music import. That resulted in me creating the tooltips. They also had trouble with knowing if they did the task correctly. That being said, I ended up adding a pop-up screen letting the user know that they successfully added their music.

6 screens of the music screen for UX design project

Settings and Close up of Tooltips created

Settings Page of UX design project

Color Chart w/ Mobile Screen Color Scheme

While my team member focused on the mobile design, I had also added the color scheme here. My main focus for the color choices were accessibility and encouragement for the users to engage with their devices.

Timeline

As the project manager for my design team, I wanted to ensure that we stayed on top of things. Though I was unfamiliar with a UX design and research timeline, I asked around while also doing online research. This was a timeline displaying weekly milestones for both the research and design team. I made adjustments along the way for any changes. My right-hand man added our meeting notes for both research and design team into the bottom portion.

Learnings and Takeaways

  1. Definitely learned about managing a team with all different skill levels and personalities all while collaborating with cross-functional teams.

  2. I learned that I prefer more research findings done before designing. 

  3. At least 3 rounds of testing should be done. If we had the time, that definitely would have been needed.

  4. I would have loved to connect back with the CBoard team to show our v.2 design.

  5. Lastly, understanding that having research back up the decisions being made is important. It cannot be just how I feel it should look or be. Transitioning from a visual mindset into a UX mindset was different, but needed. I've had to make many transitions in my life so it's second nature now.

bottom of page