This was my first project at General Assembly. We were tasked with designing an e-commerce experience for TrueSpirit, a company that sells modern school uniforms for K-12 children. The project brief stated that the company wanted to create a site that reflected its unique brand and appealed to its user base.
I started the project off by looking at the competitors: Land's End, True Grits, and Macy's. I looked at each company's branding, use case, product lines, pricing, and business models. Based on my research, Macy's was TrueSpirit's primary competition due to the fact that they both carry the same product lines. I then thought of ways that TrueSpirit could use its boutique size as a major point of difference from Macy's.
We were given personas along with the project brief to guide the design process. John, a working single dad, wanted efficiency, an easy way of making returns, and a lot of information about products to ensure that he was buying the correct items. Sarah, whose family was new to private school, was concerned about her family fitting in. She wanted a clear way of finding the items that her son's school requires and a clear way to make returns. After learning more about what each persona wanted, I began to think of features that could be included in the site.
After gaining an understanding of the users, I did a card sorting exercise to group the products that TrueSpirit sells by similarity. The card sort led to a whiteboarding session to place the similar products into categories in the main navigation of the site.
Having created a navigation schema, the next step was to create a site map linking together the pages of the website.
With the site architecture figured out, I created user flow diagrams for John and Sarah's shopping experiences so that I could visualize how each of the users might browse through the site and navigate through it to complete the checkout process.
As I began sketching, I made sure to keep in mind the personas and the site architecture. For Sarah, I designed a "School Lookup" feature so that she would be able to see the items recommended by her son's new school. John and Sarah both wanted a clear and efficient means of making returns so I added a banner on the homepage explaining the return process so it would be seen immediately upon entering the site. For John, I created filters on the product results page and added a product "quick view" to add efficiency to browsing. I also designed the checkout flow and form inputs to be simple and minimalistic.
I exported the wireframes as PNG files and used InVision to rapid prototype John's user flow. I did usability testing with the prototype and discovered that I needed to make the information buttons to activate the "quick view" more prominent for people to notice them. Another discovery was that users needed to have context as to how many steps to expect in the checkout process.
I did some sketching to think about ways to solve the usability issues that came up during user testing and made updates to my wireframes. I concluded this project by putting together a design specifications document including a site map, navigation schema, user flow diagrams, and annotated wireframes.
Back to TopWashington, DC
heyjeannakim@gmail.com
