Project Focus

This project was mainly focusing on Information Architecture and Interaction Design.

How I accomplished my tasks

• Competitive Research

• Sitemap

• Card Sorting

• Page Blocking

• User Tasks and Testing

• Sketches

• Digital Wireframes

• Clickable Prototypes

• User Testing

Using these tools:

• Whiteboard

• Paper and Pen

• Sketch (app)

• InVision

PROBLEM STATEMENT & Hypothesis

The current shop.mopop.com website has too many categories, leading to confusing site navigation, and has too many filter options, making finding the correct item difficult. I believe that by better sorting categories and removing unnecessary steps for the planful buyer we will achieve a less complex and easier site to navigate.

User Research

Persona

The persona I was tasked with redesigning for was a planful buyer persona. A planful buyer has a set of characteristics

• Matches contemporary popular brands to recipient’s interests

• Plans and purchases in advance

• Seeks discounted shipping

• Abandons purchase if the choices are too complex

• Reads labels

• Sometimes accidentally repeats purchases

Competitive Research

Competitive Research was a main point of research. Looking at what was successful for similar businesses was a great way to figure out what features would be useful in the redesign. I looked at 4 different online stores. The Space Needle Gift Shop and Chihuly Gift Shop were chosen for proximity similarity, SubPop Shop and Hot Topic were chosen for similar items sold. I made a list of features employed by all the sites, and ranked how well these features were implemented on the sites.

Page Blocking

To start, I blocked out some current pages of the website. Along with MoPOPs, I also blocked out Hot Topic’s main page. Through competitive analysis, Hot Topic had the most features that made for a successful experience. From this, I had had a good idea of how I wanted to start laying out pages.

Information Architecture

IA Goals

There was a lot of emphasis on the IA of the redesign. One of the major pain points of the current website was bad navigation, especially the amount of categories, and how they labeled their search filters. In order to create a better experience, the IA needed a lot of work.

Site Map and Navigation

I started by doing a site map of the current website. This gave me a good look at all subcategories they currently had, as well as what they are labeling some of their products as. This was the first step I took in reorganizing and making clearer categories. Some of the main problems with the current website were too many categories, confusing subcategories, and having a mix of category drop down menus with subcategories, while having categories with no subcategories.

Card Sorting

Offline and Online
I listed out all the categories and subcategories onto post-its and did an open card sort to give me a better idea of how to group the categories that would be less confusing to the user. I tested four testers in an open card sort. From there, I moved my results to Trello to try a closed card sort. I had 4 testers do my closed card sort. From these tests I made my decisions of how to update their current sitemap. One of the biggest changes was getting the main top categories down to four from eight.

Updated Navigation

Using the user flow as a guideline, I started to sketch out screens that we would need for a user to complete their task. This was done on whiteboard so I could quickly get my ideas out, and change easily. It also allowed for my team members to add their insights, such as navigation schema. As a team, we also did a design studio to come with an idea for the bulletin board feature. Some of the key features I sketched out was how different elements would look in list items and how the token system would work.

Interaction Design

IxD goals

Now that I had my sitemap and navigation done, I started on interaction design and redesigning the UI. I really wanted to focus on updating the UI to fit my IA better, so I focused a lot on the top navigation, and then the product listings themselves, which in its current state did not have a consistent way of listing products. The cart system also needed updating, as the current layout was blocked out in a very confusing manner.

User Tasks and Testing

I created tasks, based on the planful buyer persona, of how a user would go through the the user flow. I made these tasks in order to test my persona, which would give me some insights of what the most successful layout implementations would be.

Sketches

Keeping my User Tasks in mind, and the insights from blocking out the current site and Hot Topic’s site, I started sketching out some pages. Keeping my persona in mind, I made a few iterations before going to digital so I could start user tests on clickable prototypes of wireframes.

Digital Wireframes

From my sketches I started doing my wireframes in Sketch. I created a wireframe for the home screen, product page, and a checkout page. I focused on the top navigation that would be on every page. Having my digital wireframes allowed me to move into clickable prototypes so I could begin user testing and more iteration.

User Testing

I tested my clickable prototypes on four different users. These users were all planful buyers, so the tasks were made with them in mind, and the feedback I received would be useful in my iterations for the planful buyer.

System Usability Scale

I did two tests with my first iteration. I used the system usability scale (SUS) to measure what the testers thought of the usability. I got a 85 and an 87.5 on my first iterations, which is good usability score, but I also got some verbal feedback for some changes I could implement. I made those changes and did another round of testing. I received SUS scores of 92.5 and 87.5. I received good verbal feedback as well. The testing and scores were a good measure that I had improved the usability of the website.

Adding Fidelity and Beyond

At this point, the project was completed to the specifications I was tasked with. I had created a better IA and improved the usability of the IxD. To continue improving the redesign, I wanted to go back this project after the initial 2 week sprint. The main focus of going back was to add fidelity, such as implementing their brand and colors. Here is a look at the high fidelity mockup screen and video and clickable prototype on InVision. (Note: InVision go bye-bye)