trueSpirit e-commerce user flow: design specificationsAllison Cooper UXDi Project #2

Administrator Email• both logos (school + trueSpirit) lend

legitimacy

• Personal note with information other than just uniform shopping

• link to uniform policy, which also links to trueSpirit’s St Luke’s landing page

• personalized unique link autofills user’s email and name information in the form on site

Home page• reflects branding in language & emphasis on personal style

• the one main feature of this site is the ability to shop for school uniforms approved at your school, but you can also search the broader inventory if your school is not yet a true spirit partner

• there is an administrator login in the footer of every page in case an administrator finds an error while browsing the site, and there is also information on the school partner program—although that would lead to a different home page which would be sent to prospective truespirit partner schools (with such exclusive partnerships being the main aspect of the business model)

• there is a help button in the upper right corner of every page, and there is animation to explain this on the main home page (in case a user is more comfortable going straight to speaking with an agent) and to remind them once logged in

• experienced users with accounts can go straight to “my account” in th top right to log in

• the nav bar in the top makes it clear that the current scope of the site is the entire inventory; a secondary nav bar appears to make it clear when users are browsing within their school’s approved list.

• Kids grow fast, and always ordering online can be hard. Sarah specifically requested that returns be easy, so there are links on the home page and order ‘thank you’ page, as well as copious information in the receipt/order confirmation email.

Find Your School or Log in• opportunities for the brand to show

its true spirit with the about us and scholarship program links; this leads to an entirely different-looking/feeling site with a personal friendly team blog about new products to build relationships with customers and more information about the American-made nature of the products.

Select your school• Though users must put in keywords in

the city and name field, and ideally this would autofill while typing to allow users to select the correct city and school, in case there are several schools with similar names or this doesn’t work, the search results page allows users to recognize their school by full name, location, and logo/image to ensure they’re at the right school.

• Users can navigate with the top breadcrumbs, and the “next” button only activates once a school is selected.

Save your school information• In the main home page signup flow, users are then asked to save

this information by creating a profile. Through research and competitive analysis, it was deemed necessary to prompt account creation before viewing the school-specific content because an account will be necessary for purchase later on anyway, and this quick and easy one-page form gives us the most basic vital information about the user to be in touch with them later (in case of abandonment) and increases customer loyalty by allowing users to mark items as “favorites”, save an account/browsing/purchase history, and view only content targeted for their students’ year and gender. If user testing finds this type of early-stage account creation to be a deterrent, there could be a “skip this step” button.

• Users are able to add additional student profiles with the link at the bottom, and later they can easily switch between children with the top navigation drop-down menu option to do so that appears after this page

• The signup page also includes the notable feature to be emailed every three months (or however frequent you’d like) to purchase new clothes, reminding you that your sizing may be out of date for your fast-growing child. These notification settings (andothers, like customizable new style alerts) can be changed on the my account preferences page.

School landing page - logged in• once logged in, the school-specific landing

page is always the same (unless updated by the administrator), with large categories represented by strong modern images leading the user into popular product categories based on their student’s gender and age group. The admin message and photo further legitimizes the site and the validity of the approved shopping list.

• After logging in, the secondary top navigation is visible, where a bar makes it clear to users that they are browsing and searching within their school-approved inventory so they never have to worry about buying an incorrect item.

Product Detail• Throughout the product browsing experience, it is

clear

• Product detail emphasizes clarity of information important to our users, namely price and quality (under “Details” and “Fit”).

• The trueSpirit mission—to support students in expressing themselves within the constraints of a school uniform—is also emphasized with the “Personalize it!” upsell area, featuring approved accessories.

• Users can “like” products to save them for later, although a full comments section was deemed to be too admin-heavy; customers can see which products are most popular without the need for comment moderation by viewing how many other customers have “liked” a particular item.

Checkout: View shopping bag• once logged in, the school-specific landing

page is always the same (unless updated by the administrator), with large categories represented by strong modern images leading the user into popular product categories based on their student’s gender and age group. The admin message and photo further legitimizes the site and the validity of the approved shopping list.

• After logging in, the top navigation is visible, where a drop down menu leads users to the entire school-approved inventory, but especially that which is relevant to their student profiles.

Checkout: Thank You• Breadcrumbs/chevron make it very

clear where you are in the flow at all times

• help button is always present and clear

• order summary helps make it clear to users that their order was correct and has been processed, as well as sharing information about trueSpirit’s unique scholarship program.