Main Street Ecommerce Site Case Study

Have you ever wanted to go shopping, but physically impossible?

Goals

1. Anyone can access
2. Bring the local and “Main St” shopping experience online
3. Increased interest in the local shopping
4. Increase community engagement
5. Increase social media/online engagement
6. Create a customized experience for shoppers
7. Educate shoppers on basic info for each store
8. Define user’s interest (help user determine their needs)

Research — Surveys

Since the website is serving the mass audience and to be available to EVERYONE, we tried to reach out to as many people as possible to discover their shopping behaviour, value, and pain points.

Top 3 most visited brands/stores by our subjects

1. Uniqlo
2. H&M
3. Zara

Q: Why do you shop at that store?

A: “Cheap and good quality”

A: “Simple yet also unique, high-quality pieces”

A: “Professional clothes that will last and go with everything”

A: “Quality products at a reasonable price”

Insights: despite the fact that our survey subjects were looking for affordable stylish clothing, yet they share many similar characteristics with the demographics of the shoppers Main Street — Quality

Q: Previous bad online experience?

A: “Return process is confusing, missing product details ”

A: “Being able to send things back easy and for free on sites like amazon”

A: “Farfetch overcharged shipping”

A: “Too much trouble when I have to return it”

Insights: consumers expected the same level of shopping experience from in-store and online, they should be able to have the item as soon as possible without paying extra (shipping/handling cost), and easy return process.

Research — Interviews

Subjects — 8th&main staff, customer/F as in Frank staff, Motherland Staff, Corner Store staff and customer, potential Main Street customer.

Q: What is Main Street like?

A: “Uncommercialized”

A: “We don’t sale product, we sale knowledge”

(curated collector items, stores hold their beliefs & value)

A: “Treating customers like friends”

(against in your face customer service)

A: “Customers knows what they want”

A: “Main demographic is between 18–28”

A: “Variety of style and brands”

A: “Hipster, west coast”

A: “Unique, special vibes”

A: “Neighborly, community bonds”

A: “Gentrification” (highly diverse income and clothing style, from pre-owned clothing that are sold by the pound, to neatly curated collections)

Design Thinking — diagrams, personas, main features, journey map.

Our team sorted the diagram with information collected from surveys and interviews and created a user persona that represents the majority of our targeted demographics.

1. Mid 20’s, financially dependent and capable
2. Hipster
3. Quality >quantity
4. Unique > mainstreams
5. Incapable of shopping locally (time, location, weather etc)

Based on the persona and data collected, our team generated a list of functions to satisfy and resolve the pain points of our demographic.

1. Experienced shoppers, know what they want.
2. Many people were in-store to check new items
3. Easy checkout/shipping/return process(in-store like)

Based on feedbacks and data collected, our user’s journey & site maps are straightforward and simple.

“I shop online because it is more efficient and convenient.”

Customers want an easy, “dramaless” shopping experience.

Final Design decisions

• Creating a clear guided “dramaless” interface, where experienced shoppers (aka “they know what they want”) can customize their own shopping category and experience.
• The website should educate users about the products, brands and stores.
• Increase local & online engagement with shoppers.
• Easy checkout process (including shipping & return etc

Interface Design

Guided shopping experience

1. The two main demographics who shopped on Main Street are drastically different, in terms of clothing, style, income and value (aka. how much are they willing to spend, and what are they looking for) Therefore, the home page immediately takes different demographics into their belonged category. (business casual or streetwear)
2. WHAT’S NEW- People are always browsing for new items in store.
3. Brief description of the background about Main St., and featured Instagram users who shopped on Main St.

4. Detailed category — Goal-oriented consumer

5. What’s new — browse by the previous date, for less often shopping demographics.

6. Sales — for price/deal-oriented, and less financially capable demographics

7. Search Function — For extreme goal-oriented shopper (certain brand, store, specific piece)

8. Specific filter option

• “They don’t have my size”
• “I want a vintage, old Polo shirt”
• “My budget for today is $200”

9. Easy access information —

• View next photo without entering a new page
• Brand, style, price, from which store.

10. Browse by —

• By item from new to old, for the user who often checks new stocks.

11. Clear guided process — colour, item, size, shipping & store information

12. Item details — educate shoppers about the brand, style, origin and material.

13. Engagements —login to Instagram, post and share URL to the website. Encourage shoppers online to interact and be part of the Main St. community.

14. Checkout calculator — no hidden fees, tax/shipping etc.

15. Modifications in checkout — available to modify item’s size/colour/quantity in cart.

16.Shipping & return policy — since Man Street is only a platform, seller (stores) will have different shipping & return policies, they are shown under the item’s image.

17. Paypal Checkout — faster checkout process, pre-filled information & security.

18.Regular checkout option

19. Order confirmation — estimated delivery will be different if there multiple items being shopped from a different seller(stores)

20. Save information (create an account) — allow users to create account afterwards voluntarily, to save checkout information & check order details, encourage users to share their new item[s].

21. Explore stores — allow the user to explore all available male clothing stores on Main St., and indicator of the store’s estimated location.

22.Shop now — shop within one specific store

23. Store information — store address, hours of operation, contact, detailed bio.

24.Filter option — user can uncheck “F as in Frank” as a store filter to shop all or other stores. (when using filters to a specific store, will lead to coordinated store info page)

25. Explore — Increase local shopping sales, and introduce the user to Main St.events and community.

Conclusion

What I learned from this project.

1. During the user test & the feedback phase, subjects tend to critique the UI element over UX (test basic wireframe without UI first next time)
2. User scenario for test subjects should not be too detailed (more opportunity to explore the wireframe without instructions)
3. UX is very much influenced by UI, I am not certain how many of the choices made by test subjects were impacted by UI.
4. Information from surveys and interviews are usually subjective and bias, some are even inaccurate. It is important to take time to filter this feedbacks properly.
5. The greater the demographics equals the more functions, information hierarchy is very important in this situation.