PROJECT #2
UX Design Case Study for True Spirit UXDi Project #2 Prepared for: Patricia Davila
Statement of Confidentiality This document and supporting materials contain confidential and proprietary
Version 1.1
information of Patricia Davila. These materials may be printed or photocopied
Document issued:
for use in evaluating the proposed project, but are not to be shared with other
March 23, 2014
parties.
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
BRIEF
What are the key requirements? The creative brief is the first step on the project. This information will help us create a quick and effective overview of the project. The purpose of the brief is to clarify the goals and needs of the users and to define any of the special resources and/or constraints to the project.
Company
· Encourage users to express their tastes
TrueSpirit is a new internet retailer for schools and parents who
· The visual design to complement the brand
want a modern school uniform for K12 children. It offers updated uniform fashion including pants for girls and zipup hoodies, provides a “musthaves” checklist from the school’s administrator for each school year, and recommends accessories allowed by the school’s dress code. Unlike traditional suppliers such as Lands End and True Grits, True Spirit encourages visitors to express their tastes—with some limits.
Specifications The website needs to: · Offer updated uniform fashion including pants for girls and zipup hoodies · Include a “must-haves” check list · Include a school administrator area · Recommend accessories allowed by the school’s dress code
Project overview True Spirit is seeking to create a new online web presence. This web presence will provide customers with the ability to reseach and purchase products online, as well as other services and benefits available through the company.
Deliverables A sitemap A navigation schema Wireframes for key pages User flows & forms for check-out process Clicklable prototype
Timeframe Project starting date (Week I) :
10/03/14
Project ending date (Week II):
21/03/14
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
BRIEF
About the brand. We paid thorough attention to establishing a strong and cohesive visual identity for True Spirit that will cross platforms effectively and ensure that the brand essence does not get lost amongst the noise of competitors.
Brand attributes
Brand promise
fresh
We believe in service: Easy returns
modern
We only sell quality products: Our sizes
lighthearted
are true to size
open
We foster community: Support education
appealing friendly
through our scholarship program
Project approach
there when you need us but not in your
This project is about executing a full
way
2-week design process while applying
Market insights
Principles:
Main competitors analised were:
· The homepage should provide a clear
Land’s End, John Lewis, The
snapshot of the overall content and
Schoolwear Company, Matalan.
support the brand consistently
Other e-commerce sites that we have
· Users should be able to easily locate
looked at were: Gap kids, Harrods,
and use the navigation schema
Amazon, H&M, Urban Outfitters, Zara,
· Checkout flow and forms to be designed to keep the customer focused
We kept a special focus on the
on the purchasing process.
checkout analysis and navigation
Source:
schema, researching on best practices from UI Patterns and Android Design
timeframe, we presented an interactive prototype of an e-commerce website and explained to the class how we got there. We used an agile approach that has a great focus on rapid collaboration and validated learning. Iterations of the product are seen as hypothesis that can
curated
Victoria Secret.
fundamental UX skills. At the end of this
http://ui-patterns.com http://developer.android.com
be tested with users.
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
PERSONAS
Who are our users? User Personas Personas are documents that describe typical target users. Personas can provide insights into “real” behaviours of “real” users, definig a very clear picture of who is using the site and how they are using it.
John, “experienced online
Sarah, “new to school
Jess, “school administrator”
CHARACTERISTICS
CHARACTERISTICS
DRIVERS
Savvy Spender
Pragmatic purchaser
DRIVERS
DRIVERS
“I like the efficiency of online shopping.”
“I want our family to fit in”
TASK
TASK
John visits the website to purchase a
Sarah is sent an email from the school
buyer”
uniforms”
white polo shirt and blue trousers for his
administrator with a list
daughter.
of acceptable clothing for the school
NEEDS
NEEDS
Flow through the process quickly
Find required items easily
“I want to make sure the parents’ needs are met, alongside admin goals.” CONCERNS “Giving parent choice in their purchases, while meeting quality and price goals.” “Making it easy for shoppers to find items.”
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DESIGN PROCESS
What is our approach? We started designing the user experience from strategy level to the concrete user interface. Firstly, we develop ideas (create early solutions based on existing understanding and beliefs.) Then, we test hypotheses (assess desirability, efficiency, effectiveness, satisfaction and iterate ideas based on learning (increase the fidelity of design in line with the fidelity of knowledge or ideas).
Iterative design process
Card sorting Card sorting is used to classify the products into category labels.
Sitemap The objective of the sitemap is to reflect pages hierarchy.
Navigation schema The navigation schema is a snippet of each navigation element of the site.
Task analysis Task analysis is used to understand in detail how users perform their tasks and achieve their goals.
User flows and checkout flow The optimal path that users follow through a website interface to accomplish a task.
Wireframing Wireframes are a visual guide that represent the skeletal framework of a website
Clickable prototype Prototypes are used to measuring the practicality of a design concept.
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Information Architecture: Sitemap A sitemap is a chart defining the structure of the information of the site. The objective is to reflect the pages hierarchy and main content buckets. The sitemap also communicates the relationship between the different pages on a site, and how a user would navigate between pages.
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Information Architecture: Navigation Schema The navigation schema is a snippet of each navigation element of the site. The navigation represents the site’s organization based on the sitemap, and act as a visual tool for users to move around the site effectively.
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
User flows and checkout flow We design these flows to figure the optimal path that users will follow through a website interface to accomplish a task. JOHN USER FLOW
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
User flows and checkout flow We design these flows to figure the optimal path that users follow through a website interface to accomplish a task. SARAH USER FLOW
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
User flows and checkout flow We design these flows to figure the optimal path that users follow through a website interface to accomplish a task. CHECKOUT FLOW
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Digital Wireframes Wireframes are a visual guide that represent the skeletal framework of a website. HOMEPAGE
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Digital Wireframes LISTING PAGE
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Digital Wireframes PRODUCT PAGE
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Digital Wireframes SCHOOL SEARCH
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Digital Wireframes SCHOOL LANDING PAGE
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Digital Wireframes SHOPPING BAG
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Digital Wireframes CHECKOUT 1
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Digital Wireframes CHECKOUT 2
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Digital Wireframes CHECKOUT 3
True Spirit Case Study | Patricia Davila | dizzypaty@gmail.com
DELIVERABLES
Clickable Prototype A clickable prototype is a great tool to test interface screens for user feedback. We have built a clickable prototype with InVision and here is the link where you can find it:
http://invis.io/VMPZ3SD4
UXDi Project #2 Prepared for: Patricia Davila dizzypaty@gmail.com
Version 1.1
07903 37 46 32
Document issued:
uk.linkedin.com/in/patriciadavila
March 23, 2014