Personas

Three personas were developed to focus the design. Two of the personas (Sarah & John) were parents who wanted to buy uniforms for their children. The third persona was a school administrator (Jess) who wanted to make it easier for parents to buy the right uniforms. All users need clear information to buy the correct clothing based on a school dress code. 

Competitive Analysis

Looking at the competitive landscape, I was beginning to understand that while all of the competitors were very strong in visuals, checkout flows, and organization none of them seemed to adequately solve the problem of really helping users find what they were looking for. Even with uniform websites such as TrueGrit, French Toast, and Landsend with their school policy number feature did not fully address the issue of helping school administrators like Jess search for the items they needed. If anything it looks like the process was done via email or phone call to develop the school dress code. While I incorporated some of the design patterns from each website, I became more determined to find a better solution for Jess in order to help John and Sarah.

Discovery:

Users needed much more robust selection without creating too much ‘noise’ from clouding the important information.  

Hypothesis:

By providing clear information, users will be able to buy the correct clothing. 

Vision:

Focus on solving the issues facing the admin, which would in turn solve the problem faced by the parents. 

USER FLOW

Based on the three users, I developed 3 different user flows to accommodate each of the users need. I broke down their essential goals. John was an experienced user who could easily navigate through the website. Jess was a school administrator who was just as skilled at online browsing but she needed tools to help her showcase content to parents. Sarah was the least comfortable with navigating with websites so I took extra care to insure that her user flow would highlight important content pieces that she would need to buy.

SKETCHES

I sketched out all levels of wireframes for possible screens in order to get a better sense of what would be possible for the website.  I kept the sketches low-fidelity in order to allow the users better focus on specific features I wanted users to interact with. As I started combining elements it was clear however that it would be difficult to maintain a more simple, elegant wireframe with each additional feature addition.  Bringing the designs to fellow classmates was invaluable to get immediate feedback about what features were or were not working. Once I felt like I had enough response about the design, I took the next stop to create higher-fidelity wireframes through digital products. 

SITEMAP

The step taken to build out the website architecture would be to use a card sorting technique with fellow students to get a better sense of how to organize the website. Overall things were pretty straightforward with how to organize the girls and boys categories but it was much more difficult to figure how to organize the unisex items like accessories and school-branded shirts. In the end, I made the decision to place the accessories and school-branded shirts together into one category called school spirit since many of user tests didn’t quite know what to put them but put them in this category usually referred to ‘other.’

WIREFRAMES

Based on the strategy to build the ability for the user to have specialized content, I wire-framed a few iterations to explore the idea. As I tested with paper prototypes with users, it became clear that there would be necessary elements to better clue in users to provide them with better understanding with the context of the e-commerce experience. I started looking back to e-commerce websites used during the competitive analysis to attempt to borrow the best elements and adapt some of those ideas into the organizational structure of the website to provide greater clarity to the user.

Prototype

After a few design iterations and multiple tests with users, I finished a final design that took into account removing too much visual clutter while skill keeping in tune with the goal of providing clear choices based on the school dress code.