E-Commerce Website: Unicorn Kids Shop

Project Overview.

The second installment of project coursework was to work in small groups to develop the user experience of a prototype e-commerce website – The Unicorn Kids Shop. We were told that the site originally sold all sorts of DIY kits, but recently pivoted to focus entirely on innovative learning kits for children, with the intention of becoming the “#1 resource for parents that want to incorporate hands on STEAM education into their kids everyday learning experience.”

The project required us to take a list of the top selling products and three user persona’s and develop a sitemap, user-flows, wireframes, and an interactive prototype in a two week timeframe. So without further adieu, I give you our process:

The Process.

1. Sketch a Site Map

Similar to my last project – we all found it a good idea to meet up and just get our ideas on paper. First, we sketched out potential site maps and the pages needed for those layouts. We also began to look through the list of products to develop some categories (this would later require a card sorting technique).

Img. 1 - Sketch of potential product categories.
Img. 1 – Sketch of potential product categories.
Img. 2 - Sketch of Site Map
Img. 2 – Sketch of Site Map
Img. 3 - Sketch of HomePage
Img. 3 – Sketch of Home Page

After a few iterations of sketches, we had a good enough idea to start developing our site map – but this could not be finished until we had fully finished categorizing the products, which would require some card sorting.

2. Card Sorting

We all felt that one of the most important parts of a users experience on an e-commerce website was the ability to find particular products, which almost came entirely down to the categorization of the products themselves.

In order to develop the categories, we researched each of the top selling products given to us and tagged each of them with 2-3 words we felt that the product fit into. Each product and its tags were written on a card.

Img. 4 - Card Sorting
Img. 4 – Card Sorting

We then went through several iterations of sorting them into groups, and naming each group. Eventually we settled on the following:

If you didn’t catch that, we decided on the following categories:
  • Robotics
  • Electronics
  • Microcontrollers
  • Aviation
  • Green Energy
  • Chemistry
  • Audio
  • Visual
  • Games

From this, we could then complete our sitemap:

Fig. 1 - Sitemap
Fig. 1 – Sitemap

3. User Flows

Next we needed to work on our user flows. A detailed description of each user was given to us, ranging from an elderly woman who didn’t quite understand the internet – but wanted to seem young and hip to her granddaughters, to a tech-savy younger man, who felt that college degrees were overrated (they were quite in depth). For each user, we were given a task that they wanted to complete, and had to outline how the user would navigate through our website given their personalities – we could then test this on other users later.

  • Bev needed to buy a gift for her grandson (she likes sales).
  • Charlie (who had visited the site before) wanted to by a gift for his niece who likes bugs.
  • Linea was visiting the site to find a return policy.

With the persona’s in mind, we developed the following three user flows:

Fig. 2 - User Flow Diagrams
Fig. 2 – User Flow Diagrams

4. Build Wireframes

Next, we needed to develop a set of wireframes of the site. This was entirely done in Axure.

We wanted the site to be easy to navigate, intuitive, and call upon the standard e-commerce experience (we felt it best to stay away from anything to new, and hence – unfamiliar). Products needed to be simple and easy to find, and we needed the site to be accessible and usable to users of all ages – considering the target audience was quite large.

5. Clickable Prototype

An interactive prototype was developed based on user persona Beverly and completed using Axure.

Unicorn User Beverly

To experience our interactive prototype, please click here (password: ecommerce).

6. User Testing

Next, we ran through a few tests with fellow students at NYU.

Img. 5 - User Testing
Img. 5 – User Testing
Img. 6 - User Testing 3
Img. 6 – User Testing 3

Generally, the users were able to navigate the site well, nothing was too confusing or new, but there were a few things that were suggested in order to improve the experience. Some of the feedback we received included:

  • Adding an option to create an account on the page a guest enters their information (users don’t tend to want to sign up, when confronted with the option to check out as a guest).
  • Adding more images of “Best Selling” and “Sale” boxes on the home page.
  • Having the “Featured” banner on the home page be on a timed scroll, rather than on user click.

For each user test, we gave the user one of the persona’s and prompted them with questions such as “Where would you click now?, If you want to see the sales items, where would you click?” etc.

Overall, we were happy with how our prototype performed, and felt that with the help of the feedback we received, we were able to create a great prototype for the client.

Client Presentation.

Finally, we had to present our site to the client, and walk them through one of our user flows on the interactive site.

We outlined the goal of the site, the user persona’s we scoped around, and finally the interactive prototype itself.

The presentation slides can be seen here.

Advertisements

Transportation Problems

This post is about commuter transportation issues. Via paper prototyping, I learn the UX design process of developing a transportation app to help my friend Janneisy improve her commute from Yonkers to NYU in Brooklyn, a 2 hour commute!

My first and last inclination is to tell her to move lol. But since she has no plans of moving…I went ahead to develop what I think would be a great app to help her through her morning and evening commute.

My friend’s main problem with her commute is that the bus she takes on her initial embarkment is never on time. My solution is to integrate live GPS data of the Bee-Line with the NYC MTA transportation system to better time her departure and arrival so she can decided whether or not she needs to hurry up or can take her time getting to the bus.

Talking more with Janneisy, I learned that she is really into music discovery probably from being on the bus and train 4 hrs a day…so I thought what if the app pulled in the soft data from her favorite apps to stream songs thru a one stop shop. Then, there’s no need to get out of this app and open another. If Spotify can stream iTunes, then my app can stream both and more with further development.

Lastly, the weather of New York is an ever changing thing. It could be raining one minute and sun shining the next, so with further discussion, we decided to add a weather page to quickly know what the weather will be like for the day. Once again adding this page into the app saves time from having to go into another weather app and as they say…time is money!

IMG_0015IMG_0019IMG_0027

After several iterations, I took my paper prototype to the app POP to demo a tappable simulation to verify my workflow.

IMG_6719IMG_6713IMG_6717

Please review my presentation and POP simulation link below.

Powerpoint:

Transportation Problems UX

POP (Prototyping on Paper):

https://popapp.in/projects/5415facd167d5e8b4e89ed55/preview