Jamie's Mad Scientist Lab

Home / Spring 2016 / E Commerce: Adventures in Toyland

E Commerce: Adventures in Toyland

This project was as much an adventure in information architecture as it was in learning Axure! Fortunately both proved to be worth while endeavors.

Screen Shot 2016-02-21 at 10.59.28 PM

 

After reading the brief for Little Einstein Toy store, the first order of business was figuring out how to categorize and search the inventory. It is, after all, an information architecture exercise. After reading Don’t Make Me Think and glancing at the User Personas, I knew that not everyone searched a site the same way. We wanted it to be clean and easy to use, but also take different potential users into consideration.

First we started brainstorming user flow. We did not want anything to be too many clicks away, but there needed to be more ways than one to get to a product. It occurred to me that the one factor uniting all of the users was the fact that these are educational toys. The concept of learning runs through to the core of DIY products so I thought a good way to set up the main page would be to categorize the products by topics you learn. All of the verbiage needed to be active and exciting so I came up with six fun categories: Build Robots, Launch Rockets, Tinker with Gears, Create in 3D, Create Pictures & Sounds and Make Circuits. My partners loved the idea so we sketched out a first version of the home page.

 

Image1

 

We knew it couldn’t be the only way to search the site, but it was a good way to bring the educational theme visually to the forefront and give customers who might not know what they’re looking for an easier way to search for their options. The fact that some users always simply look for a search bar and Bev — one of the user personas — had trouble seeing it on many sites led us to place it front and center. Then we thought about other ways people might choose to shop, Best Sellers, Deals, New Arrivals (What’s New) and a Product menu that is a little more traditional than the learn to categories. This lead to our site map below.

 

SiteMap

We knew users would definitely want to filter options by difficulty since they could be shopping for different age kids or children who have a lot of previous experience verses new DIYers. We also wanted to make sure the categories we came up with fit neatly into the different search options so we put together an Excel spreadsheet for all of the items that in turn influenced our site map. The product menu search changed after our user test which I’ll explain further later, but this is the spread sheet for the final iteration.

 

Screen Shot 2016-02-21 at 10.57.15 PM

After studying all of the projects and the user personas, we designed the user flows for the three different personas, Bev, Charlie and Linea.

UpdatedFlow

It all seemed to work quite well so we built the first prototype. We made the first two pages together and then divided up the work for the other pages. When we reconvened, put together all of the pages and designed the first clickable prototype. I must admit, in our battle with Axure — not that it was difficult, but we were all pretty knew to it — with neglected the product category. We came up with some general categories for the user test because we wanted to see if it was even a common way to search the site. Here’s the first layout for the product page below:

 

Screen Shot 2016-02-21 at 10.55.27 PM

 

Then we each tested the site on two people each. My first test subject, a 40-year-old Corporate lawyer, loved the Learn to categories, but was very disturbed by the prototype having the billing information already written in. One of our team members had only done this for the prototype, but it still reminded me also of Bev who said she was nervous inputing her personal information. He also found the filtering and sorting categories confusing and reversed as to which should be called sort and which filter. This had been a point of contention within the group so it confirmed to me that it needed to be simplified — simply sorted by price, low to high or high to low, and filtered by difficulty. Another point he brought up was  the fact that you can’t put in a search item and hit return. Is there a way to do this in Azure?

 

My second test subject, a 46-year-old Content Strategist, had similar problems. He was completely hung up on the check out seems. He felt there needed to be a third page. Basically a cart page, a shipping/payment page and a confirmation page. He also mentioned that it bothered him that there were three products already in his bin when he clicked one — again this was a team member’s choice on the example cart page, but I felt that needed to be changed for any further user testing. He also brought up the weak product groupings if if you searched it that way. I knew that needed to be fixed. And we had made our example category pages — list of products — say the word “Category” as a holder. It would be the category name you searched by for example Best Sellers or Learn to Build Robots.

 

IMG_2142 UserTest2

Kathleen’s test subjects struggled most with the check out pages so when we met up to discuss, I knew these pages would be the ones that needed the biggest changing. Melisa emailed us her results since she couldn’t make the meeting:

Test 1: Confusion in the Search Results page:
– He thought the results were the bottom similar products, rather than the “best product ever” and he would have liked to see titles of the images in the similar products section. (The lesson I learned from this one was be careful having a sense of humor with the prototyping. This one was totally my fault because I designed the screens that said “best product ever” and it only led to confusion.)
Test 2: Confusion in the Cart page:
– She did not see a “continue to checkout” button right away in this page (since it’s in the bottom and you have to scroll to see it) so she instead clicked on one of the products. Then she finally went back to the cart and found the button to continue –> Change would be to add a continue to checkout button on the top of the page, just like we have in the checkout page.
This led to our redesign of the prototype. Most of the time was spent redesigning the final check out page — that at least was the part that required the most Axure changes, but we also spent some time working out the changes to the product menus. I looked through all the products again — after all this was an information architecture assignment and I feared we were neglecting the biggest part of that! Almost all of the toys were kits, but there were a few parts. Within the kits, if you were not going to sort them by subject matter, the only other way that made sense to me was to sort them by difficulty. All of our users were shopping for gifts and the would weigh in heavily based on the age and background of the kids. I figured if you were looking for parts, you were already more advanced — at the very least you knew what you were looking for – so we changed the product menu to drop down to two choices, kits or parts. If you choose parts, it filters into three categories, beginner, intermediate and advanced.
The check out cart went from two screens to three screens. There is the cart page, the shipping and billing information page and the confirmation page. On the shipping and billing page, we added the login button. It made most sense here. For users like Charlie who wanted to check out fast, he can press the button, autofill his answers and be done in a few fast clicks, but for Bev who is wary of giving out her information, she can type it in as needed only.
    Screen Shot 2016-02-22 at 10.43.08 AM
If you hit the login button:
Screen Shot 2016-02-22 at 10.42.36 AM
And then filling the name and password, it automatically populates. If not you simply type it in.
Screen Shot 2016-02-22 at 10.43.08 AM
Then you continue to the next screen which confirms all of your information.
Screen Shot 2016-02-22 at 10.43.22 AM
And then when you click confirm, you get this final screen:
Screen Shot 2016-02-22 at 10.43.37 AM
We also spent some time playing more with Axure for the final clickable prototype embodying all the changes. Although I learned a lot in this process, it also led me to many questions. How finished should a clickable prototype be? I know this is only wire frames and built for user testing, but the amount of information that we add makes a difference for people using the site.  These are really my thoughts on UX Design for the week. When user testing, how far do you really go for the clickable prototype? How much real copy should you include? How many pictures? How many products? We ended up adding in some, but I was truly not sure how much it should be. This is something I’d really like to know as I proceed forward.
Screen Shot 2016-02-22 at 10.51.25 AM

To get the latest update of me and my works

>> <<