Design by: Roxanne Mustafa Student Project #2: General Assembly UXDI Winter 2013

About the Product:

True Spirit is a school uniform company that offers updated uniform fashions including pants for girls and zip-up hoodies. True Spirit provides a checklist of “must have” items from the school’s administrator for each school year and recommends accessories allowed by the school dress code. Unlike traditional suppliers, True Spirit encourages visitors to express their tastes, with some limits. The Brand was described as light, modern, lighthearted, open, appealing, friendly, curated, available but not in the way.

About the Project:

We were asked to make a website that reflects True Spirits goals. The website needs to reflect the company’s easy returns and quality products that are true to size. True Spirit also wants to reflect a fostering of community by supporting education through scholarship programs. In addition, we were given 3 user personas and were asked to build the website based on these three personas. The website needs to reflect the brand goals of service, quality and community.

CASE STUDY!

RESEARCH METHODS!• Competitive Analysis!

• Card Sorting!• Personas!• Scenarios!

ITERATIVE • User Flows!• Site Maps!

• Wireframes!

Competitive Analysis!Findings:!Some sites had clothes more prominent while others featured children more.!

Clothes-Centric Cites tended to be clean, bold, colorful yet simple design.!

Children-centric sites were minimalist, 2 color scheme, fun design, a lot of white space, school searches were prominent. Assistance was the forefront for all.!

Complimentors: People were Prominent, fun poses, clear, white and black, minimalist design, white Backdrop!

Opportunities Identified:!To blend the fun children centric sites with the simplicity of the clothes prominent sites. Make the website clean, simple and minimalist, simplicity and ease of use in all decisions. This can be done with:!• Direct Product Links!• Clear Fun Design!• Children at Forefront!• Large simple Menus!• Customer Service!

Card SortingWhat is the Global Navigation?!

Personas!

Scenarios!Method: !Sketched out a storyboard for Sara’s user flow, the main user persona for my prototype.

Findings:!Users should have access to checklist. User should have ability to store a profile and have option to add another child to profile.!

Opportunities Identified:!User must be taken through the login process with ease in order to set up child profiles and identify items for each school’s code.!When logged in, user must also be informed of checklist items and notified when non-school code “must-have” items are purchased. !

Design Iteration 1:Site MapUser FlowHigh Level Mock Ups!

Method: !Created site maps, high level user flow, then mockups of wireframes to outline different user paths.!

Findings: John’s Flow was School Code Centric, Sarah’s flow was product centric!

Opportunities Identified: !The website must allow for browsing with school access codes and without. The site must allow for customization for the high tech user and simplicity for the low-tech user. !

Design Iteration 1:(continued)Site Map

Design Iteration 2:High Fidelity Wireframes!

Method: !Created Wireframes for main pages of user flows.!

Findings: Both users ended up browsing items school specific and non-specific items, ie, both users need to be able to access the school landing page and the general product browser page.!

Opportunities Identified: !Create the home page so that a user can access school items and general items from the beginning. Make sure the items have equal weight. Let the user decide which type of customer they want to be.!Do not forget to give the school administrators access from the home page.!

Prototype: http://invis.io/7PLFGTJAMethod: !The prototype was created in Invision software. Main user flows including checkout were traced. I conducted several usability tests.!

AWARENESS Needed to improve upon flow and ease of use. Some lay out issues to make choices more functional.!

CORE PRODUCT EXPERIENCE!User task of picking out a shirt within school code without setting up an account yielded quick results with functional buttons. Comparison to school checklist was convenient and did not interfere with the shopping experience. Logging into account at the end as a guest was not distracting and allow user to focus on path to purchase.!

True Spirit Invison Prototype

THANK YOUROXANNE MUSTAFAmustrock@me.com!