User Experience Design - TrueSpirit e-commerce
44
E-commerce for UXDi: Student Project Team: Deepa Dhupelia, James Feng, Sara Michelazzo SARA MICHELAZZ0
-
Upload
sara-michelazzo -
Category
Design
-
view
702 -
download
4
description
General Assembly UXDi Summer 2014 Sydney Student Project n.2 - ecommerce TrueSpirit is a new internet retailer for schools and parents who want a modern school uniform for K-12 children.
Transcript of User Experience Design - TrueSpirit e-commerce
E-commerce for
UXDi: Student Project Team: Deepa Dhupelia, James Feng, Sara Michelazzo
SARA MICHELAZZ0
As part of the team who did this project what I have done is:
- Realize sketches - Realize wireframes in Omnigraffle for John and Sara’s
flows - Realize a prototype for John’s flow in Invision - Realize the mockup for the home page - Designing Scenarios for all the 3 personas - Improving and updating user flows and site maps - Being an active part of the team during design iteration - Providing innovative ways to communicate our design
TrueSpirit is a new internet retailer for schools and parents who want a modern school uniform for K-‐12 children. It offers updated uniform fashion including pants for girls and zip-‐up hoodies, provides a “must-‐haves” checklist from the school’s administrator for each school year, and recommends accessories allowed by the school’s dress code. Unlike tradiLonal suppliers, True Spirit encourages visitors to express their tastes—with some limits.
About the project
*required from the project
TrueSpirit is a new internet retailer. The TrueSprit team was looking to create an appropriate experience for their target customer that could be delivered via web and mobile channels. The team was given the constraint of targeLng ipad as primary delivery channels.
About the product
*required from the project
Brainstorming
Brainstorming helps to clean my brain from all ideas I have about the design. I leave them there so I can forget about them while analyzing persona’s needs and take them out later in the process where they are not anymore a threat but a resource.
Best idea: providing a lable where you can write your kid’s name so she/he wan’t swap it by mistake
Competitor analysis
What are they not doing? What are they doing that you can do beTer? What do your website need to do… go back to personas!
Concept Model
*required from the project
Card Sorting Defining categories for TrueSpirit site navigaLon
Rough Sketches SeXng out ideas on paper, keeping the funnel wide
Scenarios Scenarios help to understand beTer user flows
Site Maps We have considered all of the user flows to have a well structured site map
Site Maps Site Maps realized in Omnigraffles are easier to keep up to date!
Meet the business needs & style
About the brand Fresh, modern, lighthearted, open, appealing, friendly, curated, there when you need us but not in your way
*required from the project
we believe in service easy returns! we only sell quality products our sizes are true to size we foster community support educaLon through our scholarship program
Get to know Persona Personas were given as part of the assignment.
Our role was to keep them in mind, understand what they need. Building out personas as much as possible
Personas: Sarah
*required from the project
Goals & Features specific URL and login required to purchase specific secLon required clothes school buTon on the home page in case she doesn’t have the URL materials and importaLon add to favorites “She likes to save items while browsing and purchase them at the end of the day” care, comfort and fit in the descripLon quality page
User Flow
*User flow realized by James Feng and updated by me
Wireframes
School Home page
School Category Page
School Shopping List
Personas: John
*required from the project
Goals & Features quick buy mode in category page dropdown menu and filter (colors, prices)
User Flow
*User flow realized by James Feng and updated by me
Wireframes
Category view-‐quick buy
Category view: gallery
Product Page
John’s Scenario
John’s Scenario helped to understand beTer his needs in order to privide an effecLve navigaLon system.
Navigation
This map helps to understand how to navigate the website and where there are shortcuts to reach one or more pages.
Global Navigation - Header
GIRLS BOYS SHOP BY SCHOOL
SIGN INREGISTER
GIRLS BOYS SHOP BY SCHOOL
SIGN INREGISTER
Girls > T-shitst and tops > polo shirtTOPS BOTTOMS ACCESSORIES
Formal shirtsT-shirtsPolo shirtsTank topLogo shirts
JacketsHoodiesSweatersLogo Hoodies
SkirtsPantsShortsGymshorts
SocksHeadbandsGlovesBeltsLeggings
iPhone casePlush toy
SALES >
SIGN INREGISTER
Girls > T-shitst and tops > polo shirt
GIRLS BOYS SHOP BYSCHOOL
▼St. Luke’s GO
SIGN INREGISTER
Girls > T-shitst and tops > polo shirt
GIRLS BOYS SHOP BY SCHOOL
Search GO
Global Navigation - Header
SIGN INREGISTER
Girls > T-shitst and tops > polo shirt
GIRLS BOYS SHOP BYSCHOOL
▼St. Luke’s GO
SIGN INREGISTER
Girls > T-shitst and tops > polo shirt
GIRLS BOYS SHOP BY SCHOOL
Search GO
Global Navigation - Header
SIGN INREGISTER
ITEMS ADDED TO BAG
GIRLS BOYS SHOP BYSCHOOL 2
Polo shirt $15Pants $12
SUBTOTAL $37
GO TO BAG
SAVED ITEMS
Global Navigation - Header
ABOUT USSERVICESCompany infoOur QualityJobsScholarshipsContact us
Shipping & trackingSizes & ConversionsEasy returnsHow to wash
Term of use | Privacy and Cookies
Feeling stuck?+61 5647 474637 [email protected]
Copyright 2014
GET HELPFOR SCHOOLSAdmin areaFind your school
Navigation - Footer
Home> Girls > Tops > Polo Shirt
Navigation - Breadcrumb
Filter
How the group arrived at the final decision? 1) A funcLoning team -‐ finding strengths and weaknesses -‐ building trust with our users and stakeholders 2) using PERSONAS and Best PracLce UX PRINCIPLES to take our decisions
Find the other people strengths and use them!
Refining and decisions
We were able to find beTer results as we could merge many ideas into one. Then drew larger, more detailed sketches for consideraLon Considered and chose those that best fit the personas
Wireframing Discussed as a team Created first versions (low fidelity) individually in Omnigraffle Reviewed as a team Finalised as a team in Omnigraffle
More refining of wireframes and process = less time to prototype !
Examples of design iteration
Navigation Menu on the leg side
The navigation on top allows ro display more items and the relation with the contextual menu is easier to understand!
Menu on top
Design iteration:
Product Page First sketch
The button to swith view moved to the right (best practice iPad). The add to bag button become smaller.!
Design iteration:
Second iteraLon Final design
Home page Wireframe A
Design iteration:
Wireframe B
Brand look&feel business needs: sales show prices and comparison with sale quality and care easy returns
What problem on the page is everything
solving?
Wireframe B solves more problems
Pushing the home page to the next level
Imagine the
website
Home page Mockup
Imagine the
website
User testing We expect picture to zoom.. but user expected to go to details page One user would have saved his profile if it didn’t include credit card User went to sales buTon to find polo shirt rather than top navigaLon bar. (we could perhaps re-‐do these links to boys and girls). One user said he’d prefer just to use images rather than navigaLon menus 2/3 users could not find the alternaLve views (eg gallery vs list). Check out works well!
The person I have tested asked not to be photographed
Storytelling
In order to communicate our design effecCvely we have played a role game. Where one us was playing the role of one of our persona using a prototype. Wealso had an external narrator to explain our design choices based on the acLon of our persona.
Do you want to see more about this
project?
Prototype in Omnigraffle
WATCH IT LIVE
Design Spec
READ DESIGN SPEC
SARA MICHELAZZ0
Thank you Special thanks to Deepa Dhupalia and James Feng. Working with you was a pleasure.
