Design,
Your way!
Project Overview
This is a fictious website that focuses on busy organizers charged with customizing items for group events. The goal of the project is to create a responsive website utilizing insights from user research, competive analysis and prototype testing.
Roles and Responsibilities
My role includes both UX Researcher and Designer. In addition, I created the logo.
My responsibilities include: developing interview questions, conducting user interviews, creating personas, problem statetements, user journey maps and competitive analysis for the basis of product creation. Then I created iterations for paper and digital wireframes. Low fidelity prototypes and moderated usability studies followed. Next, iterations on the low fidelity design incorparted the results of usability studies. The project concluded with a high fidelity design using Adobe XD.
User Research Summary
User reseach was conducted to illuminate the problems users encountered while customizing an item. Preliminary research inspired Personas that embodied frustrations with a perscribed path that included minimal opportunites for revision and complex design tools that required some users to seek technical assistance to complete their order.
"Customization requires too much thinking!"
Steven Persona
Steven is in charge of creating customized clothing and needs an online company that has simple customization tools with options for collaboration so that he can create and revise a product that reflects the input of the group.
Journey Map
Ideations: Paper Sketches
Sketches feature large design space with customizations presented with three steps: Product, Text, Image. Design fuctions contain both icons and labels.
Ideations: Digital Wireframes
See what users in the study had to say.
Low-Fidelity Protoype Link: Click picture above to view.
https://xd.adobe.com/view/e7b28820-5196-42db-9aee-68a1a1d7c08a-b2e1/?fullscreen
Usability Study Parameters
Study Type
Moderated Remote
Time
40 Minutes
Location
User's Home
Participants
5 people ages 26-58
Usability Study Findings
The study revealed that product customization is a collaborative process. Revision opportunites throughout and process are of high value and users revise many times before purchasing. Also, users do not all pay with a credit card. Purchase orders are a popular method of payment particularly among non-profits. Printing options are a highly requested feature since approvals and reciepts are part of the purchasing procedures.
"The route to the MAKE PURCHASE screen is a unique journey for each user."
Research Plan
Click image to view.
Research Notes
Click image to view.
High Fidelity Mock-Ups
Updates to the high-fidelity design include the select product option first followed by text and images. A chat feature is added. Review screen includes revision options. Confirmation includes a track order and a print screen. All additions were in response to the usability study.
View high-fidelity prototype: Click on picture above to view.
https://xd.adobe.com/view/0668934b-a690-458f-bdab-11a87c9e550b-533b/?fullscreen
Accessibility Considerations
I see it! I can find it! I know how to do it!
Typography
Large, simple text makes it easy on the eyes.
Labeled Buttons
Main user flow has labeled action button so users know what to expect.
Hierarchy
Headings help users know where they are and aids screenreaders.
Hover States
Hover states give mico-interactions to assure user of their actions. (non-touch screens)
Key Take-Aways
During the usability study 80% of the participants asked if they could complete the study using their phones. Mobile and smaller hand held devices are becoming an appendage. People expect high function low cognitve load applications available anytime and anywhere. With smaller screen sizes typography, heirarchy, and strong labeled visual elements are essential to good design and good user experiences.
If a user cannot see it, find it or engage with it quickly and easily, they will abandon it.
Next Steps
With the high-fidelity prototype complete, it is time for a second usability test. The goal this time is to evaluate the overall appearance, functionality and micro-interactions.
