Main St. Decor

Home Decor Web Site for the Financially Conscious

Vancouver, British Columbia, CANADA (December 2017)

ProjectE-commerce Web Site
Role: User Experience (UX) Design, User Interface (UI) Design

The Opportunity

While the popularity of shopping local is steadily growing, local shops are predicted to lose $1.6 billion in retail sales to other online retailers and American-owned companies. Reports released by Vanity found the independent retailers in Canada (both large and small) have a poor online presence, making Canada a prime target for foreign e-tailers. There is a growing concern that Canadians will lose interest in shopping local, as people are being drawn online more and more.

The Solution

Create web-based tool that anyone can access in order to build an increased interest in shopping local, supplement the sales of Main St. shops and increase community engagement.

Project Goals

• To create a mid-fidelity, eCommerce, web app for a customized experience for Main St. shoppers.

• To integrate all boutique, home decor shops from the trendy Main St., Vancouver and allow users to purchase item from any/all of the stores from one e-commerce platform.

• And to increase sales, social media & online engagement.

Tools

Pen, pencil, paper, sticky note: Interviews, wireframes & low-fi prototype
Axure RP: User flow, site map
Trello: Feature Prioritization
Sketch: Persona, Wireframe annotations, Mid- & High-fidelity screens
Photoshop CC: Screen/product mockups
Illustrator CC: Logo

Domain Research

To understand a little bit more about the home decor market presence online and to see who the key players were, I did a Domain Research with the following findings:

• Couldn’t find any online home decor markets, specific to Main St.

• Similar organizations existed for other local communities (but mostly listings, not selling)

• Saw some from other cities:
— But it was more of an association and provided links to stores
— Didn’t directly sell on their platform

• Some obvious giants such as Amazon, Overstock, Wayfair
— But they don’t cater to one particular group of shops
— Especially on one particular street

User Interviews

Out of the 4 interviews conducted, I learned that my subjects had an affinity for Main Street, even if they were local or commuters.

100% liked a great deal; 75% liked to find items on sale; 75% would want to compare before making a purchase; 25% found the uniqueness to be value.

Affinity Diagram

Allowed me to gather my interview data and observe different groups and identify patterns.

Primary Persona

A married, female professional in here mid 30’s.

Information Architecture

Once I got to learn about my user’s needs, I set out to plan the solution. I started off with a user flow on how Lavanya would navigate through the interface to complete a certain task and as well as created a structure of the app to show where all the features lived.

User Flow

The flow below, allows Lavanya to log into her account using her bank card, at an ATM machine and lets her allocate funds from her savings into college savings. The system alerts her to let her know that, she has earned rewards for setting aside funds for long-term goals.

Card Sort

I conducted an open card sort to gain user’s perspective with taxonomy and organization before moving on to site map.

Site Map

To get a visual representation of the layout of the ATM interface design, I created a site map. I organized the structure based on key features I identified were important for my target user.

Feature Prioritization

After the learning more about the domain and conducting user interviews, I compiled features to satisfy my user’s goal and prioritized them into 3 categories (must haves, nice to haves and not needed) using the Bucket Method.

Out of the four (4) features that stood out, I asked my interview subjects to rank features according to what was important to them.

1 being the most important to, 4 being the least.

User Story

As someone who is new to managing finances, I want to learn how to properly set up my budgets and learn how to save for the longterm, so I don’t have to worry about my financial future.

Scenario

“Q is sitting on the floor of her new place, looking online for ways to furnish it. She wants to throw a house-warming party with her friends, before furniture arrives. But because she spent most of her savings on downpayment, she is looking for something on sale. She saw an ad on Instagram for Main St. Decor and knows she can compare products and get a really good deal.”

Story Board

The story board shows the story of Q as (1) she just bought a new condo; (2) She wants to have a party before furniture comes in, so she sit on the floor and looks for party stuff; (3) she is particularly looking for serving trays; (4) because she spent most of her savings on down payment, she she wants stay within budget and find a a nice deal, so she compares with another item; (5) she found what she liked and bought it; (6) she uses that tray to entertain her friends at her new home.

User Journey Map

Q’s emotions through various stages, as she buys a serving tray for her house warming party.

Design v1.0 (Low-fidelity, Paper Wireframes)

My design started off with sketching wireframes on paper, based on the user flow and the sitemap. Learning about my user’s goals, frustrations and pain points allowed me to heavily rely on the research phase to support my design decisions.

Usability-Testing v1.0 (Low-fidelity, Paper Wireframes)

I hypothesize that users will … become frustrated when trying to compare products, because they need to add the items to a board, where I’m forcing them to register.

The biggest fear of my design is that, I think users will have a tough understanding of the board concept to compare items and leave, unless they open subsequent products in new tabs/windows to compare.

The task I assigned in this phase of the user testing was to: Find a serving tray [for Q’s house warming party] that is a both a good deal and from a seller, whose bio/story influenced the decision.

Feedback v1.0 (Low-fidelity, Paper Wireframes)

It was incredible to hear the first set of feedbacks (from online UserTesting), as it enabled me the opportunity to listen to actual users, navigating through my design. Some of the feedback were:

  • Expected layout, for e-commerce
  • Product details were present(prices, pics, seller info, ratings, ability to edit quantity and color)
  • Screen was really big and unable to resize via track pad
  • Nothing is clickable (as I only created one flow for the user)
  • No pictures since it was a mid-fidelity prototype and placeholders were used

Design v2.0 (Mid-Fidelity, Sketch App)

Gathered feedback from user-testing and took designs into Sketch App to implement changes while in mid-fidelity.

Tasks v2.0 (Mid-fidelity, Sketch App)

1) Find a serving tray that is on sale and add it to a board

2) Add another serving tray on sale, to the board and compare it with the first tray

3) Read the bio of one of the sellers, add that serving tray to the shopping cart and checkout

Feedback v2.0 (Mid-fidelity)

It was incredible to hear the first set of feedbacks (from online UserTesting), as it enabled me the opportunity to listen to actual users, navigating through my design. Some of the feedback were:

  • Expected layout, for e-commerce
  • Product details were present(prices, pics, seller info, ratings, ability to edit quantity and color)
  • Screen was really big and unable to resize via track pad
  • Nothing is clickable (as I only created one flow for the user)
  • No pictures since it was a mid-fidelity prototype and placeholders were used

Design v3.0 (High-fidelity, Sketch App)

Closeup of the high-fidelity screen

Interactive Prototype Walkthrough

The video shows how the persona, Q, would navigate through the website to fulfill her current need.

Because she just spent a lot of her savings on the downpayment of her new home, she will need to stick within budget as she looks for serving trays for her house warming party.

She will browse around, pick couple of serving trays that are on sale, compare them amongst each other, read a story about one of them and then adjust the quantity and buy the product by completing the checkout process.

Experience the interactive prototype for yourself in mid-fidelity state.

(Created with InVision)

One thing that stood out in terms of lessons learned is that, drawing out wireframes took longer than I expected and maybe should’ve left details out and add them later on, when I moved in to the digital version. I also learned that I need to provide better, clearer tasks, especially by breaking them into smaller, easier chunks, so the users doesn’t forget and makes it easier to complete.

If more time were permitted, I wish I had the opportunity to incorporate some more of the feedback and see how I can implement them into making this a better product, that meets it’s MVP goal.

If I were to do this project again, what I would do different would be to, again, draw out just the basic idea and layout on paper using pencil and then move onto a wire-framing tool such as Axure RP or Sketch to fill in the gaps, duplicate multiple screens and add further details.

Since only two weeks were allocated for this project, there is certainly plenty of time for more research and contextual inquiry. As far as next steps are considered, learning more from the vendor’s perspective will help me create, a better idea for the scenario and testing with more users, will help make this idea better and a suitable platform to engage buyers and sellers on Main Street.

0
Weeks
0
Field Trips
0
Stores Visited

———Thank you!———

Let’s Work Together

Just say hi or let me know how I can help tell your stories.

jothish.john@gmail.com
error: Content is protected !!