Designed by: Michael Iseri Student Project. GA. UXDi. Winter 2013.

About the product:!

The TrueSpirit website is a modernized site designed to help busy parents who are comfortable with technology find and purchase their child’s required school clothing more quickly and easily. It is useful because it utilizes a shopping list to ensure they know what items they still need to purchase and also keeps track of their child’s sizing information so they don’t need to constantly fill in certain fields.

About the project:!

TrueSpirit is a company who believes that children’s uniforms should be created with a bigger focus on modern fashion. They wish to cater to a younger generation of parents who are very computer literate.

The constraint of this project was to create a website that could fulfill the needs of multiple personas while also keeping the shopping experience fast and simple.

Features:Global header and navigation stay in static positions at the top of the page

Prototype

!

!

Research:Method: Create user flow charts and conduct competitive analysis of other online retailer sites. !Findings: People can reach school landing pages in many different ways. Navigating through products can be unnecessarily difficult. Sizing can often be confusing. !Opportunities: Make a homepage that can be utilized by multiple audiences. Make navigation clear and easy. Help shoppers find the right items.

User Interviews:Method: Look at other groups’ site maps to identify what they felt would be a good organization method. Read through personas to identify needs. !Findings: Items may sometimes be hard to categorize, which may make them difficult for a buyer to find them. Over-categorizing can lead to unneeded “fluff.” Checkout process can often be much longer than expected. Easily identifiable return process creates confidence in buying. !Opportunities: Creating broader categories may simplify the user’s experience. Shorten checkout as much as possible to not discourage buyer. Make returns simple and easy so people will return for more purchases.

Site maps cont:Method: !Created site maps to decide how the website should be organized. Created a wireframe from this to get a more physical experience of how this organization would work.!!Findings: Many instances, including search, navigation, and finding items required too much input. Some items were too hard to navigate to without using search.!!!Opportunities Identified: !Shortening “distance” traveled to bring browsing customers to items faster. !!

Checkout Site Map:

Personas:

Spirittrue

JohnJohn is a single dad of a teenage daughter, starting the 6th grade. He is comfortable with online shopping & likes it because it is easy. Now that his daughter is getting older, she is having more input into outfit choices.

MONEY MATTERS

John like to keep things organized, and to live within his means and budget. He has two main credit cards and a debit card, which he uses the vast majority of the time. He prefers to bank with his community credit union. He is very practical in his approach to finances and purchasing.

CLOTHES PURCHASING BEHAVIORJohn tries to do as much of his clothes shopping online in an effort to avoid large department stores, where he doesn’t feel at home. He tires to stay with certain brands (Gap, and Hollister) because he is familiar with their fit and sizing, and this is practical.

TECH-LIFEJohn refreshes his system every few years, usually when his old technology is no longer efficient. As a single dad, he has to keep to a budget.

He has a PC desktop at home which he shares with his daughter. He is considering buying an iPad for his daughter as he sees it as a valuable educational tool.

“I like the efficiency of online shopping.”

“I want to have enough information so that I know I’m buying the right thing.”“Clothing should be reasonably priced.”

DRIVERS

CONCERNS

EXPERIENCED

WEBMOBILETABLET

Make the process efficient.

Leverage existing relationships with retailers.

Ease of return/exchange process is really important.

TECH AVERSE

TECH SAVVY

SPENDYFRUGAL

He works with a large, stable company, as an accountant, and uses a Windows laptop and phone at work. Although his days are pretty busy, he works independently quite a bit, and can usually find time to take care of small tasks throughout the day.

SAVVY SPENDERPRAGMATIC PURCHASER

Spirittrue

Sarah is new to private schoolsSarah and her husband work hard to make a great life for their family. Their oldest son, Gabe, is about to attend St. Luke’s, the best Pre-K-12 school in the city, which also happens to be a Catholic School. Sarah went to public school and is a little overwhelmed.

MONEY MATTERSSarah and her husband have two main credit cards they use to get airline miles and separate checking accounts as they divvy up bills.

They have some school loans to finish paying but have been fortunate to not have any credit card debt.

CLOTHES PURCHASING BEHAVIORSarah shops online for convenience when possible, but loves a good brick and mortar experience. She shops for Gabe (3 1/2 years old) once every 4 months, buying a bunch of basics that he’ll likely outgrow within 6 months. Within reason, she likes to be in-the-know about kids fashion and seen as a hip mom.

TECH-LIFESarah is a digital project manager and is in meetings all day. She doesn’t have much time to browse for online products except for her lunchtime. She likes to save items while browsing and purchase them at the end of the day.

She uses a MacBook Pro for home and work, an iPhone, and an iPad for late night games and news reading.

“I want our family to fit in.”

“I hope I’m ordering the right things.”

DRIVERS

CONCERNS

NEW TO UNIFORMS

WEBMOBILETABLET SAVVY SPENDER

PRAGMATIC PURCHASER

TECH AVERSE

TECH SAVVY

SPENDYFRUGAL

Provide clear way to find son’s required clothing.

Educate about care, comfort and fit.

Provide a clear way to make returns.

Kim

Spirittrue

JessJess is an administrator at a private school. She has been working at the school for 3 years & has gotten to know the kids & parents. This year she has been tasked with finding a range of vendors who are able to meed the parents’ demands as well as provide uniforms which are reflective of the school vision, goals, and spirit.

MONEY MATTERSPersonally, Jess is a bargain shopper. She only buys what she can afford, and having 2 kids in college, she understand how expensive it is to have kids in school. She pays for many things with cash, and has only one credit card which she uses sparingly, and pays it off immediately.

CLOTHES PURCHASING BEHAVIORAlthough she is very comfortable with technology, and does browses clothes online, she is a very tactile person and prefers to purchase clothing in brick and mortar stores. She loves the shopping sites which can check in-store inventory for items. Target is one of her favorite stores for the house, although she often shops for socks and pajamas there as well. Banana Republic is her favorite when shopping for herself, because it is a good combination of quality and reasonable pricing, especially because during their semi-annual sales. Knowing that it is convenient for many parents to shop online, she has been tasked with finding online uniform vendors. She has a set of price requirements which the school uniform vendors and online retailers must meet, as well as quality and look for the uniforms.

TECH-LIFEShe uses mostly Apple products, although she recently switched to a Samsung phone, which she loves.

At work, she has an iMac and at home she has an older Mac Book. She loves to read using her iPad in the evenings and mornings, catching up of news and some email before heading into work.

“I want to make sure the parents’ needs are met,alongside admin goals.”

“Giving parent choice in their purchases, while meeting quality and price goals.”“Making it easy for shoppers to find items.”

DRIVERS

CONCERNS

ADMINISTRATOR

WEBMOBILETABLET

Be clear about the offering, providing great images and multiple views, as well as detailed description of items.

Wide range of price and quality of items, to meet various budgets and tastes.

Brick and mortar location is a bonus.

TECH AVERSE

TECH SAVVY

SPENDYFRUGAL

SAVVY SPENDERPRAGMATIC PURCHASER

Spirittrue

JohnJohn is a single dad of a teenage daughter, starting the 6th grade. He is comfortable with online shopping & likes it because it is easy. Now that his daughter is getting older, she is having more input into outfit choices.

MONEY MATTERS

John like to keep things organized, and to live within his means and budget. He has two main credit cards and a debit card, which he uses the vast majority of the time. He prefers to bank with his community credit union. He is very practical in his approach to finances and purchasing.

CLOTHES PURCHASING BEHAVIORJohn tries to do as much of his clothes shopping online in an effort to avoid large department stores, where he doesn’t feel at home. He tires to stay with certain brands (Gap, and Hollister) because he is familiar with their fit and sizing, and this is practical.

TECH-LIFEJohn refreshes his system every few years, usually when his old technology is no longer efficient. As a single dad, he has to keep to a budget.

He has a PC desktop at home which he shares with his daughter. He is considering buying an iPad for his daughter as he sees it as a valuable educational tool.

“I like the efficiency of online shopping.”

“I want to have enough information so that I know I’m buying the right thing.”“Clothing should be reasonably priced.”

DRIVERS

CONCERNS

EXPERIENCED

WEBMOBILETABLET

Make the process efficient.

Leverage existing relationships with retailers.

Ease of return/exchange process is really important.

TECH AVERSE

TECH SAVVY

SPENDYFRUGAL

He works with a large, stable company, as an accountant, and uses a Windows laptop and phone at work. Although his days are pretty busy, he works independently quite a bit, and can usually find time to take care of small tasks throughout the day.

SAVVY SPENDERPRAGMATIC PURCHASER

Scenarios: Method: Ideated and sketched out possible user flows. Including arriving from an administrator’s email, navigating to the school’s landing page independently, and browsing for items without guidance. This helped influence the decisions for: !Product awareness !First run scenarios !Site navigation !Opportunities: Make the user aware of what they need to get. Try to guide the user to their “happy path” the first time they use the product. Make it clear on where the user actually is within the page. !

Design Iteration:!Method: Created wireframes to see how well users could physically navigate from one place to another.

Findings: A little unclear on which category user was actually in. Difficult to couple navigation with tabs. Filters seemed out of place. Knowing how shipping was calculated was useful.

Opportunities: Be more clear on what tab goes to the navigation. Let users know how shipping was calculated, or at least give them options.

Design Iteration Hypothesis:!Method: Re-test new wireframes. Testing method of having multiple approaches to reaching and interacting items.

Findings: Linking the tabs to the navigation visually helps clarify the navigation. Quick-view bags made browsing easier. Checklists made finding items much more clear and concise. Ability to edit bag in multiple stages was helpful.

Opportunities: Make editing items through pop-up bag allowed faster changes without having to leave current product page. Make finding items through checklist to allow faster navigation. Allow checkout page to be reached from multiple methods for smoother purchasing.

Prototype:!

Method: Create a prototype through invision prototyping tool.

Experiences: First-run through

Finding your school

Finding required items

Adding items to bag

Purchasing items bag

Other Features:

Optional ability to create a profile quickly and easily during the checkout process. Profile can later be edited by clicking in the top right corner.

Profile creation, editing, and usage allows for parents to

create “bios” for their children. This gives them the ability to

store their child’s school, shopping list, previously

purchased items, and sizing info to quickly and easily purchase new items through an “add all”

functionality when the time comes. The profile page alerts

parents when they haven’t updated the profile after a

certain amount of time to make sure their child’s sizing info is up-

to-date.

Other Features:

Other Features:

Simple and clear pop-up shopping cart which can be used to edit items in cart or proceed to checkout screen

Other Features:

Quickview allows users to add items to their cart from the browsing screen. This, in addition to the pop-up bag allow users to quickly move from browsing large category pages to the checkout process.

Thank you. Michael Iseri

mr.iseri@gmail.com