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)