Project: Adaptive For All
Dedicated App and Responsive Website
“Adaptive For All” is designed to be a curated shopping site for people with disabilities. The target audience includes young professionals and seniors with limited mobility, as well as families of people with autism spectrum disorders and medical patients who need adaptive clothes to wear during treatments.
Project Inspiration
While researching ideas for the final project of the Google UX Certificate program, I came across a photo featuring actress Selma Blair wearing a Tommy Hilfiger sweater. Blair has talked about her experience with Multiple Sclerosis and thanked Hilfiger on her Instagram page for keeping adaptive clothing "... so easy. And classic cool." This was a revelation to me, as most catalogs I encountered of the type were intended for seniors and mainly focused on function.
Compilation of Dedicated App and Responsive Web Designs
Project Research
While there are individual retailers for adaptive clothes and accessories on the web, as well as fashion aggregate sites, there appears to be no single resource for potential users to easily find the collective products, brands and retailers available on the market beyond a simple web search.
With more research, I soon learned the new "Tommy Adaptive" line was just one of the growing number of fashion designers (UGG, Seven Jeans, Aerie), store brands (JC Penney, Kohl's, Target) and specialty retailers (Care + Wear, Slick Chicks) that offered adaptive clothes to consumers online. But without advertisements or word-of-mouth knowledge, how did people know where to find these items other than a quick web search?
Competitive Audit
Interviews were conducted with adults who shop or search for clothing online. A preliminary competitive audit was also conducted to see what kinds of shopping aggregate sites were already available on the market. Two user personas and journey maps were also created - one would focus on younger professionals with limited mobility who need work and active wear, and another focused on a senior who needed assistance with dressing.
Design Process
The dedicated app was designed first. Before any sketching could be done, it was important to organize the various product types into more manageable categories. Consideration also needed to be made for how most people might approach a product search. Drawings were organized into key categories and then digitized into wireframes, tested and turned into mockups.
Step 1: Wireframe Drawing
Step 2: Digital Wireframes
Step 3: Mockups
Prototype Connections
Dedicated App Prototype
Participants in a Usability Study were asked to locate a "Tommy Adaptive" women's sweater, add it to their "Favorites," and return to the home page. A new version of the app with suggested changes was then created for the final mockup design. To see the prototype of the dedicated app, please click here.
Responsive Website
The same steps were followed to create the next group of designs for the responsive website. To differentiate between the app and the website, an increased search function was added to add another way for users to search for and find goods. Once again, a "mobile first" design approach was used, followed by the Desktop and Tablet versions.
Mobile Wireframe
Mobile Mockup
Mobile / Adaptive Prototype
This time, usability study participants were asked to try and new path: to find a men's shirt in the "Easy On/Off" category to determine what alternative routes a user might take.
To see the prototype of the mobile site, please click here.
Tablet Mockup
Desktop Mockup
Desktop / Adaptive Prototype
To see the prototype of the full Desktop site, please click here.
(Please note: Site is best viewed under Options > Fit to Screen)
Color, Imagery & Typography
In order to keep the site within Web Content Accessibility Guidelines (WCAG), a simple gray palette was used. Actual product images were gathered from various retail sites, with the idea that the product would link back to the retailer's website for purchase the same way other aggregate search sites do. Additional images to illustrate the various potential users were collected from royalty-free stock images sites. A simple "Inter" font was also used, and a mock logo was also created using Adobe Illustrator as a placeholder.
For more information on this model project, please see the "Case Study" posted above. Click below to view these additional projects:
