Loro: Designing for Accessibility — A Case Study
Background
“Loro is a smart, caring, playful, cool, and personalized companion for wheelchair users, that can see, speak, listen and learn by artificial intelligence and machine learning. The system will be able to monitor users’ health status in real-time and provide reminders for medication and tasks. The robot will enhance physical abilities with more than one way to interact with loved ones and how they communicate with others. Loro empowers people with physical challenges with the ability to communicate, see, control, and connect with their environment. to be independent and free.” To read more about Loro go to www.loro.xyz
By: Alice Pan (UX researcher, data analyst, interaction designer, and visual design lead for the website portion.) and Erin Goldstrom (UX strategy, usability testing, visual design lead for the app portion)
Timeline: Two weeks
Tools: Sketch, Principle
Brief
Our goal for this assignment was to create a simple and intuitive website where the product could be purchased and a Loro app. For the website, we were to give special consideration on information architecture with the focus for a smooth purchasing process. For the app, we were to give special consideration to the onboarding process and settings pages. We were also asked to provide recommendations to the client for their transition from Wix to Squarespace.
User Research
1. Surveys and Interviews
2. Secondary Research
3. Affinity Mapping and Card Sorting
4. Competitive Analysis
5. Business Canvas Model
6. Personas
7. Customer Journey Map
We started out by sending out surveys using Google Forms and conducting in person interviews to try and get a general idea of what people look for when they visit a website for a product they’re interested in, especially what they liked and disliked about the purchasing process. 22 responses were provided for the survey and 5 people were interviewed face-to-face. The questions are listed below.
What are your top 3 priorities when you visit a product website?
Through which of these online formats do you prefer to learn about a new product?
What would influence your decision the most in trusting a new product?
Name a product you’ve directly purchased from the company website.
What did you like and dislike about your purchasing experience?
Our results indicated that users valued customer reviews and user testimonials over anything else when considering purchasing a product. Other main points of the results indicate that customers look for product descriptions, photos, and simplicity the most.
We ran into issues gaining access to users in wheelchairs, especially given the short time frame of the project. We had to get more creative with that portion of the research so we watched videos on Youtube* to gain more insight into the daily lives of our users. Please see below for the full list of content, these videos ranged anywhere from 3 minutes — 15 minutes.
Main findings during this portion of the research fell into four broad themes: social, communication, caregiver, symptoms.
*please see the comments section of this article for a full list of videos watched
Affinity Mapping & Card Sorting
We completed 2 affinity maps, one for our surveys and interviews, and another for our secondary research. This helped us decide what content to prioritize. A brief explanation of each of the four themes for the secondary research is listed below
Social — a huge issue for many wheelchair users is that they face social isolation and don’t have enough contact with friends or family
Communication — many users were not able to effectively communicate with the outside world, this also hinders their independence and worsens their social isolation
Caregivers/Family — another theme in many of the videos is the stress that their caregiver endures. Many mentioned that making processes easier for the caregiver directly translates to making the user’s life easier (ex: dealing with insurance, mental health of caregiver)
Symptoms — this is a huge theme for obvious reasons, any way we could use our product to alleviate symptoms for our users was important to us (ex: tremors, quick onset of disease for ALS, muscle degeneration)
Next, we moved on to card sorting to better understand how to present our content to the user. Six card sorts were conducted. The content on the cards was taken from Loro’s current website. This helped us decide on the information architecture of the website
Competitive Analysis
We also completed a competitive analysis of direct and indirect competitors’ websites to gage what content we should prioritize on the website.
Business Model Canvas
We created a business model canvas to help us better understand Loro’s goals, partnerships, and activities. Through this, we were also able to gain insight into who would be purchasing our product, therefore understanding which customers to base our personas.
Personas
To begin synthesizing our research data and key findings, we created three user personas. During this process, our goal was to empathize with each group of potential user, and fully capture and communicate their specific goals and characteristics. All personas are based on our research. We defined the key audience segments as: caregivers, B2B customers, and primary device users.
We defined our primary user as the “Caregiver,” Edna Perkins. Edna is a single mother of 3 children, one of which is a quadriplegic. In addition to being her son, Jake’s, primary caregiver, Edna works a full-time job. While she is consistently selfless and optimistic, Edna struggles to find a balance between providing Jake the care he needs and tending to her other children, career, hobbies, and other aspects of life. Edna is motivated to improve Jake’s quality of life, and wishes to find a tool that will improve her son’s independence and ability to communicate with the world around him.
Steve Lowe represents our “B2B Customer” persona. Steve works as a Medical Director for Neurology, is a passionate patient advocate, and is always looking for tools and methods to improve his patients’ quality of life.
Charlie Graham is our “Primary Device User” persona, and has a diagnosis of ALS. Charlie has a successful Youtube channel, and is passionate about connecting with his audience. However, as his disease has progressed, he has faced more and more communication challenges. While he has help from his wife and CNA, he would love a tool that helps him communicate clearly and efficiently.
Customer Journey Mapping
Next, we created a journey map based on our research findings to visualize Edna’s (“The Caregiver”) relationship with Loro. We wanted to evaluate every touchpoint between Edna and Loro, including the associated feelings, actions, opportunities and moments of clarity. In doing so, we would ensure we are maintaining a user-centered mindset moving forward with our design process. We broke the journey up into 5 stages: observation, research, discovery, purchase, and installation/use. For each stage, we uncovered and explored the associated opportunities and pain points from Edna’s point of view. For example, we identified an opportunity in the purchase stage to provide insurance coverage options directly on the site rather than requiring Edna to search for the information herself. The journey map helped us pinpoint scenarios like these, giving us a more holistic view of the user experience.
Wireframes
Usability Testing
We conducted five usability tests using both the current Loro website and our prototype. For the tests, we asked the test subjects to complete simple tasks like try to put the product in the cart (website), see if they could find all the features for the product (website), complete the onboarding process (app), and try to update the settings for closed captioning (app).
Key takeaways for the current Loro website:
- the gifs on the page are distracting
- the listing of awards and partners lends legitimacy to the product
- the navigation is not intuitive and sometimes repetitive
- there are no customer reviews
- the homepage is very long
- a cleaner page is necessary
- it’s creative and inviting
- users liked the testimonials
Key takeaways for our prototypes & how we addressed them:
App
- the onboarding process was very clear and easy to complete
- use of big letters and contrast made it accessible
- lack of visual hierarchy — we added color differentiation
- lack to text to speech icon — added
- missing global navigation — added
Website
- clean aesthetics
- the feature icons were repetitive — we categorized them by app and tablet features
- the add to bag button is inconsistent with the cart icon — updated button to say “Add to Cart”
- no “suggested products” section on product page — added
- the content was organized in a digestible way
- the checkout process was easy/seamless
Information Architecture
In order to visualize the current website and for us to better understand how to organize its content, we created sitemaps for the current site and our prototype. As you can see, there’s a lot of content coming from the homepage at the top and it’s a little confusing and repetitive for the user. Our prototype uses an intuitive global navigation bar to organize the most relevant content into digestible chunks.
Userflows
In order to show the client how a user would experience our product, we created userflows for common tasks that would be completed on the site and app. Creating userflows also helped us focus on the experience and needs of the customer.
App Prototype (Sketch & Principle)
Website Prototype (Sketch)
How We Designed for Accessibility
- researched 508 compliance and kept it in mind during our process
- considered visual impairments such as color blindness or vision loss when designing the app by giving options to adjust for those settings
- we tested color contrast ratios to make sure they meet accessibility standards (we used https://webaim.org), included options to increase text size, and used visual feedback cues (ex: when you hover over the “register” button on the app, the text gets bolder)
- for hearing impairments we made sure to include closed captioning and text-to-speech or speech-to-text
- we designed with the least amount of clutter possible and prioritized text
Recommendations for Going From Wix → Squarespace
- Suggested templates: Impact, York, Heights
*we based our web prototype on Impact, but any of these would have been good for Loro because of their clear call to actions and clean aesthetic with very legible fonts
- We weren’t sure if If Squarespace could support customer reviews, since this was something that our user research showed to be important
- Choose serif fonts for readability
Challenges
- not being able to find any wheelchair user to research/do testing on
- how to directly translate our research findings into our product, which wasn’t the Loro device, but the website and app for the device
- how much of our research we should focus on e-commerce/marketing vs. how much of it to do on user background (ex: ALS onset timeline, Hoyer lifts, what kind of physical therapy patients go through)
- time constraints, especially for user research (we had around 2–3 days to finish doing this)
- client unavailability
- no access to the actual device to play with it
- having to piece together how the device works/features using the current website since this information wasn’t in the brief
Next Steps
Have comments, suggestions, or questions? Please feel free to post them below, thank you!
