Shoplique

Designed using Adobe XD

The Challenge

Design a multi-device e-commerce service for people who are blind.

Research

I sought to understand what  challenges  people living with visual disabilities face while using technology, what  assistive technologies  were readily available, and what  guidelines  were in place to help  make the internet more accessible  to people living with disabilities. 

Web Content Accessibility Guidelines (WCAG)

Developed by the World Wide Web Consortium (W3C)

"Defining requirements to improve accessibility for people living with disabilities".

According to the WCAG:

     "Across one million home pages, 21,379,694 distinct accessibility errors were detected-- an average of 51.4 errors per page".

THIS MEANS THAT

     "Users with disabilities would expect to encounter errors on 1 in every 17 home page elements with which they engage".

 

My design decisions were guided by the categories the W3C found had the greatest conformance errors:

Component-2-–-1-1

Empathize and define

Personas

happy-gfa2e49ed2_640
jacksonDemographics

Jackson Montoya

 

"I'm grateful for technology, as it has opened up a number of opportunities for me, and those like me, that are living with full or partial blindness."

Background

Jackson is a social worker who has lived with partial blindness since he was an infant. 

He lives in Washington state with his wife and two kids, and depends on assistive technology to aid in utilizing the internet. 

Frustrations

When a website is not compatible with the assistive technology he relies on in order to successfully navigate and fully utilize the site.

Goals

Buy wife anniversary gift online.

Buy daughter birthday gift online. 

Problem Statement:  

Jackson is a 32 yr old married social worker who needs a website compatible with assistive technologies to shop for gifts because he has lived with partial blindness from infancy and needs to buy gifts for his family. 

person-g123bd992c_640
KwamDemographicsWhite

Kawm Maive Ntsuab

 

"I never realized how dependent I was on my kids to help me use the computer. I want to learn how to use it on my own so I don't need to rely on the help of others so much."

Background

Kawm is a Vietnamese native who immigrated to the United States several years ago with her family. She is newer to using technology, and gets encouraged by her daughters to use it. 

Kawm has always been independent, so it's important for her to be able to maintain that independence as she ages. 

Frustrations

Language barriers, small text,  and overly cluttered websites that make it hard to see the content that's important to her.

Depending on her kids to help her order gifts such as clothing and jewelry online.

Goals

Improve her english. 

Learn how to navigate the internet.

Problem Statement:  

As an individual living with age related macular degeneration, I need a website that I can use to browse for clothing so that I don’t have to depend on my grown kids to do it for me. 

Ideate

Competetive Audit

compAudit-1

Paper wireframes

3-1
5-1
2-1
4-1

Digital wireframes

digitalWireframeTrio

Mobile web

Home-–-1

Tablet

homeTablet-1

 Computer

HomeComp-1

Mobile app

homeAPP
Low-Fi Prototype
flow
Case study

Unmoderated remote usability study.
Date: 12/15/21 & 12/19/21


Five participants will go through the steps to browsing for and purchasing goods using the prototype. 
Each participant will privately verbally communicate their experiences using the prototype to the author (researcher) after completing various tasks. 

Participants are individuals 16-65 who have made a purchase from an ecomeerce site in the past six months.



noteTakinglo-FiPrototype
Mock-up-Vertical-Scroll-PASTEBOARD-–-4

Mid-fidelity prototype

Changes such as page titles, and clearer navigation options were incorporated to reflect on the insights gathered from the first case study. 

Mock-up-Vertical-Scroll-PASTEBOARD-–-21-1
Mock-up-Vertical-Scroll-PASTEBOARD-–-26-1
Mock-up-Vertical-Scroll-PASTEBOARD-–-18-1
Mock-up-Vertical-Scroll-PASTEBOARD-–-6
Mock-up-Vertical-Scroll-PASTEBOARD-–-4-1
Mock-up-Vertical-Scroll-PASTEBOARD-–-3

High-fidelity prototype

Changes such as clearly labeled buttons, icons with text, and a new color scheme were incorporated to reflect on the insights gathered from further case studies and research.  

Sign-in-password-–-1
Create-Account-–-1
Sign-In-–-1-1
Home-mobile-site-–-NEW-1

Mobile web 

Samsung-Galaxy-Tablet-Home-–-NEW-1

Tablet 

Desktop-Home-–-3

Computer

Home-mobile-APP-–-NEW-1

Mobile app

Reach out to  discuss further plans for the project, to see a working prototype, and to chat about challenges and takeaways.