COLLAB
The product:
Collab is an app for grandparents to bring them closer to their grandkids while doing an activity together along with a video chat. They can share their feelings, their emotions, and their excitement during these fun interactions. This simple and easy to use app appeals to the hearts of individuals of all ages.
Project duration:
September 2021 - October 2021
The problem:
Grandparents want to spend quality time with their grandkids even though they’re apart. They feel like they can’t have any together activities with their grandchildren and they can’t see them in real time.
The goal:
Bring grandparents closer to their grandkids by creating a simple to navigate fun app that has accessibility features and will allow both parties to see each other and engage in a fun activity together.
My role:
Lead UX designer
Responsibilities:
User interviews, understand user needs, paper & digital wireframing, storyboarding, site maps, conduct usability studies, conduct competitive analysis, UI, understand product specifications & user psychology, low & hi fidelity prototypes
Understanding
the user
- User research
- Personas
- Problem statements
- User persona
- User journey maps
User interviews helped me understand that grandparents needed a way to connect with their grandkids, especially if the grandkids lived in a different city or country. Children these days are so into their gadgets that they fail to establish personal connections with older adults. The grandparents I conducted interviews with wanted to be relevant with their grandkids while still trying to establish one on one bond with their loved ones. They are cautious when using their phone because they are not familiar with it and do not want to mess up or do anything wrong with the phone. They also want to an easier way to understand the phone and a simple way to connect with their little munchkins. This research was really eye opening as it informed me of the user pain points and the actual areas where my potential user group was having issues.
No Apps
Currently there are no game apps that will connect grandparents to their grandchildren in a simple and user-friendly way.
Need Simple Cues
Older adults do not understand complex game systems with many features and multiple steps.
Low confidence
New and unfamiliar words are difficult to comprehend and decreases the confidence of older adults while using the phone.
Dry Skin
Older adults occasionally have dry skin which makes their touch to the screen more difficult and less accurate.
Suhan is a busy software manager with a family who needs a faster and easy way to order snacks in the theatre since his family is always late & he doesn’t want to miss his movie.
As a grandpa who lives away from his grandkids, I would love to have a way to connect with my grandkids while doing the things they like so I can bond with them regularly.
Sandra is a 73 yr old retired teacher and a grandma of 3, who needs a simple and convenient way to way to connect with his grandkids using the desktop so that they can have fun together remotely and she can teach them something new everyday.
As a grandmother who lives away from his grandkids, I would love to have a way to connect with my grandkids using the desktop while doing the things they like so I can bond with them regularly.
Walking in Vinod’s shoes made me understand his user journey even closely and understand his emotions while he is trying to accomplish his goals.
I believe that if an app exists for older adults that will allow these individuals to connect with their grandkids in a relatable and easy way it will make their bonding experience more fun and intimate. I will know this is true when, during a usability study, these individuals report satisfaction after participating in an activity session with a grandchild.
During the define and empathize phase of my design process, as I was coming up with the features and the elements that will make my app easy to use and navigate, I stumbled upon these value propositions of my app. I will know this is true when, during a usability study, these individuals report satisfaction after participating in an activity session with a grandchild.
- Easy to use
- Simple to navigate
- User will be in control of the interface
- Comfortable for the user to use
- Will reduce cognitive load
- Has a consistent UI
During the competitive analysis I assessed the features, the experience, the user flow and accessibility features that were offered by my competitors. I came with the conclusion that my app should have features that will allow users to navigate smoothly and easily and have accessibility features.
To challenge the creativity of my brain, I used crazy 8s and how might we exercises during my sketching phase so I could come up with ideas to assist me with creating the best user experience for my user base. I placed red stars besides the elements that addressed the user pain points most effectively and included those elements in my final draft.
Starting
the design
- Paper wireframes
- Digital wireframes
- Low-fidelity prototype
- Usability studies
Before coming up with a final version of the main screen, I was able to play around with the layout and see what will make the user flow easy and help the user accomplish the goals most effectively. I tried out a couple versions and highlighted the features I wanted to have in the final version.
01.
Going from paper wireframes to digital wireframes is an important step to help me to get closer to the final product and use low fidelity prototypes for usability testing.
02.
Increasing simplicity in the user flow was a primary goal to increase confidence in older adults and increase user engagement
Low-fidelity wireframes were connected to make a low fidelity prototype usable for testing
Usability study: parameters
After conducting a usability study with sample size of 6 individuals from my user pool, I observed the following findings.
Study type:
Unmoderated usability study
Location:
United States, remote
Participants:
6 participants
Length:
30-60 minutes
After conducting 2 rounds of usability studies for the low fidelity prototype, and after note taking sessions, the following themes were noted which were then turned into actionable insights to make the app more functional and easy to use.
Round 1 findings
1. Users wanted the video chat, activity and the entire session to end at different points and wanted ability to control it.
2. Users could see the video chat option in the Pass N Play option selection.
3. Users did not respond well to having only 3 activity options to choose from.
Round 2 findings
1. Users responded positively to consistency in the app when the activity page resembled the home page.
2. Room number could not be copied or shared and users found that frustrating.
3. Room number screen changes to the activity screen and no way to return to access the room number again.
Refining
the design
- Mockups
- High-fidelity prototype
- Accessibility
01.
I made changes to the high fidelity prototype to address user pain points observed from the usability studies.
02.
Increasing color contrast, increasing target size and improving the simplicity in the user flow were my goals while designing for older adults.
03.
During the testing phase, use of voice commands was implemented but removed in the second iteration.
04.
Users reported that they would like to be able to share the room code through their phone or device rather than writing it down.
05.
Users reported that they would like to be able to share the room code through their phone or device rather than writing it down.
The high fidelity prototype helped me envision the final product that my users will experience and get feedback on the usability of the product.
Since most users in my user pool will be using screen readers for mobile or magnifiers for desktop, I made sure all interactive interface elements were labeled and had a visual hierarchy
Contrast ratio of 9.88:1 (Passes WCAG AAA) for the buttons, 6.84 (Passes WCAG AAA for large text) for the tutorial and ratio of 8.34:1 for the connect the activity interface elements. I also used white background and black text since my users are most familiar with it (WCAG 21:1)
Alt text was included for all images to enhance accessibility when a user uses a screen reader and also vital if an image on a screen fails to load, the alt text will indicate what the missing image was supposed to be.
I made sure that the visual elements had increased color contrast, text and button sizes had increased target area (more than 14) and sans serif typeface were used.
Visual cues were provided throughout the app and simple gestures were used for navigation.
Tutorial was added to the second iteration of the high fidelity prototype to aide with memory and increase familiarity with use.
I was able to create a design system to create efficiency, consistency and assist with scaling of the product.
I want to make sure I do my part in making the the developer handoff simple and easy and I took the following steps to ensure a smooth process.
- Improved Designer-Developer Communication
- Used a Design System
- Got Developers Involved Early
- Provided Design Files and All Necessary Assets
- Had a Handoff Meeting
Responsive
Design
- Mobile App
- Tablet version
- Desktop version
The app was created for mobile, tablet and a desktop version was created as well to accommodate different users.
Going
Forward
- Takeaways
- Next steps
Impact:
• 87.5% users found the app easy to use
• 75% users felt that most people would learn to use this app quickly
• 62.5% users found various functions in this feature were well integrated
• 62.5% users were confident using the app during the first usability study but 87.5% users were confident using the app during the second usability study
What I learned:
Following best practices and usability guidelines, go a long way toward making products accessible to all users, regardless of age or any physical or cognitive impairments.
Explore more opportunities to improve user flow and perform usability testing to test new ideas
Explore ideas to merge social media to the app so users could invite their friends and make sharing of the code to join a session easier
Explore opportunity to use voice control to make the navigation for users easy and assist with transition to different screens
Let’s connect!
Thank you for reviewing my work on the Collab App! If you’d like to see more of my work or get in touch with me, give me a call or shoot me an email.
