E-Commerce Design & Information Architecture


Design a new information architecture and content strategy around an online shopping experience for existing users. The design should meet the goals of the 3 personas provided by the website, the goals of the business, and the goals of the brand. The designs should be tested by users and follow IA heuristic best practices.


Site Visit/ Contextual Inquiry

Site visit/ Contextual Inquiry: I visited the Brick and Mortar and conducted a contextual inquiry with the employees of the store they suggested that people enjoyed searching the store by its current layout which is by pattern & color. They all knew the history of the brand and believed the stores success was due to the fact that the it has stayed true to the brand identity.

From Left to Right: Open Card 1, Open Card Sort 2, Information Analysis

Open card sorting: I had users breakdown 100 product inventory items into categories. Through this process and the analysis of information I was able to identify that users broke items down by use, then material.

Closed card sorting process from left to right

Closed card sorting: Based on the fact the users broke down the 100 product inventory items by use, I began performing closed card sorts based on how you would use the item ie: Eat, Drink, Decorate, Give, Do, and Store. Through iteration I was able to narrow down the categories to 4: Eat, Drink, Serve & Give. Through testing this proved to be a success.

From left to right: User flow for current site & User flow for competitor site.
3 personas provided by the client.

User flows based on comparative analysis: I researched the competitors sites, analyzed features and site navigation based on product discovery and the adding/editing of the shopping cart.

Affinity mapping: Based on the Research conducted so far, and the needs of the personas I created affinity maps to narrow down the “must haves” and “won’t haves” for the new site.

From left to right: First version of site mapping, Final version of site mapping.

Site mapping: This stage allowed me to lay out the navigation for the wireframes based on all of the research done prior to this step. You can see the iterations process that occurred within this part of the process.

Design Studio

Design Studio: I set the timer for 5 minutes and began sketching out feature ideas, navigation ideas and layout ideas for my wireframes. This part of the process was extremely helpful. I was able to show this step to my classmates and get there feedback and move forward with the sketching process.

Sketching: This is where I began sketching out the main 4 pages to start the wireframing process. I started with the homepage, product page, product detail page and shopping cart. From here I moved on to putting my design into the program Sketch. You can see the first round of iterations below.

First stage of wireframing done in Sketch

User Testing: I did user 4 user tests for the way the user navigated through the competitors site. I then did 4 user tests for my prototype with the following scenario:

Scenario: Your friend is starting a new job, you want to buy her a coffee mug as a gift. You know that she loves cats, so you are hoping to find her a cat themed mug. Please navigate to the product and then purchase said product.

User testing
web wireframes with annotations
web wireframes with annotations
Mobile wireframes with annotations

Click here to check out my prototype

Business Benefit

Based on user testing, I found that by reducing the amount of categories on the homepage you would increase accessibility and optimize the navigation throughout the site which will increase site traffic and sales, therefore increased profit for your business.

After thoughts:

I enjoyed working on the prototypes the most. I really liked working in sketch. I thought it was hardest to determine what was most important to include in the presentation and what to leave out while still getting my point across. I was most surprised when I made a few small changes to the categories during the closed card sorting and the results were unanimous. If I had more time I would have spent more time on the presentation. I would have made it look a little more cohesive and practiced my talking points before presenting. All in all I was pretty happy with how the project turned out.

The 5 most important things I learned from this project are:

  1. Start working on the presentation & retrospective ASAP, don’t wait.
  2. Outlines help with EVERYTHING.
  3. Sketching before hand for everything makes a world of difference.
  4. Time management is tricky, but making time outlines is so helpful.
  5. Pay more attention to the needs of the persona that you intend to focus your project on.
One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.