DO YOU
Design flow to order personalized T-shirts
Project overview
The product:
DO YOU is website or platform for commuters, workers and groups easily personalize t-shirts for their activities and events. Knowing more
Project duration:
February 2020 to April 2020
The problem:
Organizations, workers and commuters cant have t-shirts personalized enough for their activities and events
The goal:
Design a site to help personalize and order personalized t-shirts
My role:
UX|UI designer designing the user flow for personalization of t-shirts for the website "DoYou"
from conception to delivery
Responsibilities:
Conduct interviews, paper and digital
wireframing, Low and high fidelity prototypes,
usability studies, accounting for accessibility,
and iterating on designs
Understanding User
● User research
● Personas
● Problem statements
● User journey maps
summary
Carried out some interviews in trying to understand and design based on our user needs. that lead to a couple of empathy maps and some personas. One particular persona being that of event planers
Also, the research showed some users weren't just interested in personalizing for events or personal activities but for commercial(sales)
pain points
Can't afford to higher a specialist or get personalization from an established
Finance
Platforms that personalize are not equipped with assistive tech
Accessibility
many personalization steps are often difficult for users to follow through
IA
Persona: Bessie Njong
Problem statement:
Bessie is a hands on event planner for a community church and needs to order personalized t-shirts for the church anniversary because the events wont run accordingly
User journey map
Penjo’s journey map helped
me visualize how useful it’ll
be for users to have and
use Caresto
Starting
the design
● Paper wireframes
● Digital wireframes
● Low-fidelity prototype
● Usability studies
Site map
with the user in mind, had to come u with a structure with accessibility and ease in user flow. I designed multiple responsive screens following this site map to guide structure on the various screens and ensure cohesion and consistency across the screens
Paper wireframes
helped me
quickly iterate on different
layouts, elements and
navigation for best possible
user flow/accessibility and
navigation to get user need. I
prioritized easy access to
build which takes user directly to personalization process
Button leads
directly to building or personalizing t-shirts
Users can easily access custom made designs to help them with ideas
Digital wireframes
With initial design stage still
on, I continued to make sure
the digital wireframe is
designed with respect
feedback from research
Digital wireframes
Easing navigation was a priority and also having elements with icons and text to help assistive
technology
Hamburger
dropdown menu for easy access
and navigation
Ease navigation
by giving the user the accessibility of going back at any moment
Low-fidelity prototype
Using digital wireframes, i was
able to create a low fidelity prototype of the principal user flow. From selecting t-shirt type ,personalizing to ordering. So that it can be used for usability study
View Do You low fidelity
prototype here
findings
I conducted two rounds of usability studies. Findings from the first study helped guide the designs from wireframes to mockups. The second study used a high-fidelity prototype and revealed what aspects of the mockups needed refining.
Round 1 findings
users need color pallets to choose from
users need more t-shirt options
Round 2 findings
Users need more flexibility with t-shirt sizes
users need to be able to retouch design before ordering
Refining
the design
● Mockups
● High-fidelity prototype
● Accessibility
Mockups
Early design gives room for some customization. After usability studies and some insights, I added options like Share feedback to help users share with their doctors for follow up
Mockups
Second usability study had some frustrations from users because
once at review they couldn't modify if they felt like having some changes
Mockups
High-fidelity
prototype
The final high fidelity prototype is clearly detailed with elements
and components, and visual design to ease user flow and
navigation. It also has more customization and accessibility
View Do you high fidelity prototype here
Accessibility considerations
Added text to imagery
and hierarchy to help with
screen readers for users
who are vision impaired.
Used icons & text to help
ease navigations and also having elements help assistive
technology
Takeaways
Impact:
Responsive
design
Designed for multiple screens. mobile and Desktop. i
optimized so it meets user need across the screens
Young adults are too engaged with school, jobs and social life they
forget or miss
taking medications
Time
Platforms for ordering
food are not equipped
with assistive tech
Accessibility
Lack of customization,
for scheduling and
reminders to increase
chances of promptly
taking medications
IA
Going forward
● Takeaways
● Next steps
Takeaways
Impact:
Users feel "DoYou" is easy use. So actually help users with need to personalize t-shirts
The goal:
With designing "DoYou" I realized e usability study is very important because we sometimes focus on what we have already ideated on but still miss out on little but important aspects which really enhances the product or service
“I like the design as in what I see, its simple to use. i would use it but il like more options for sizes"