TRUE SPIRIT UNIFORMS
[ case study ]
TrueSpirit Uniform Company is a mock retail website for parents who want a simple and efficient way to order a school uniform for their children. Over the course of two weeks, my goal was to develop an ideal online shopping experience for a father to buy his daughter a school uniform.
competitor research user flow sitemap sketches proof of design iteration wireframes prototype user testing navigation schema presentation
post-its magazines sketchbook Typeform Illustrator Excel whiteboard OmniGraffle InVision Google Slides
Since TrueSpirit offers a large selection of clothing and accessories, my first step was to explore the best way to group each item through card sorting and idea mapping. Every product that was offered by trueSpirit needed to be categorized into a sensible hierarchy. There are several ways to approach this task, but I decided to separate the items into 3 main categories: girls clothing, boys clothing, and extras (backpacks, water bottles, phone cases, etc).
SKETCHING & IDEATION
These sketches show the early stages of the homepage layout, persona brainstorming, and a theme map connecting TrueSpirit's brand and promise to the needs of our persona, John. In order for the site to be a success for both John and the TrueSpirit company, I wanted to highlight the common themes between their branding guidelines and John's ideal user experience. For example, TrueSpirit has a friendly and open brand, and they sell quality products to the customers. John values a straightforward website with detailed product information. Therefore, I thought it was important to prominently display each item with full product details.
WHO IS THIS FOR?
Digging deeper into John's persona information, I discovered that he was a hardworking, single parent raising a 6th grade daughter. His main concerns were making practical and frugal purchases, and he values efficiency and organization. Given his daughter's age, I wanted to include an element of participation for her during the shopping process. It was essential that John knew he would be ordering from a company that is aware of his budgetary constraints and respects his busy and diligent lifestyle. My main goal was to make this process simple, straightforward, friendly, and cost-efficient. Therefore, the focus of my design was to explore a frugal parent/child online shopping experience.
I researched other school uniform websites to study what the competing companies were offering their users, and the ins-and-outs of their user experience design. I looked at a variety of well-known retailer sites (Gap, JCrew) as well as larger discount retailers (Target, French Toast, Walmart).
Since John is concerned with cost efficiency, he would begin his shopping experience by receiving a letter and coupon from the school's administrator. I also wanted to highlight the required items for his daughter, so make the shopping process as transparent as possible. Here are the Initial wireframes of how I visualized the welcome letter, homepage, product page, and detailed product view.
This diagram shows the path John will take throughout his entire shopping experience, beginning with a letter from his daughter's school that allows him to enter the TrueSpirit site through a discount coupon. If another user does not enter the site through a coupon, they would go directly to the homepage and be able to login or browse the items. John will enter his personal information to create an account, and from there will browse through the products and clearly see which items are required or his daughter. Once John finds all of his items and adds them to the cart, he has the option of sharing the cart with his daughter via email before he checks out (the price of products are hidden in the child's view). John's daughter can view and make suggested changes to the products in the cart, and can send her feedback to John for approval. While his daughter has the opportunity to make suggestions, John will be able to accept or reject any of these changes before they are applied. From there, he enters a simple checkout process of shipping, paying, and reviewing.
This was our first major project that had a clear problem, persona, and goal. I learned that I should not underestimate the importance and power of user testing. It is easy to assume that a user would follow the steps you have built, but everyone is different, so what is obvious to you may be completely confusing to someone else. So in the end: test, test, and test again!
Another notable takeaway is to justify your design choices in how they are valuable to both the user (client) and the brand (or the company). Presenting your idea is an essential part of the UX design process, and you should be prepared to explain why you did what you did.
Lastly, I learned to try to stay away from branding and detailed design during the wireframe process. I tend to jump from the initial idea to how I imagine the end-result will look. The wireframe process is primarily about the functionality and intuitiveness of your product, not the colors and fonts. It is great if something looks pretty, but if it doesn't work then no one can use it!