top of page
12640344_792767194189512_426280574140781

Chilli Coral eCommerce Site

Information Architecture | User Interface | Interactive Prototyping

A concept project that focuses on developing an easy-access and delightful e-shopping experience of Chilli Coral for Busy Buyer.

01.png
Project Overview

“How might we develop a simple and delightful gift shopping experience for Busy Buyer on Chilli Coral website?”

Chilli Coral is a lifestyle, homeware and giftware boutique store located on Crown Street, Surry Hills. They provide a wide range of products that allow customers to dive in and treasure hunt. When it comes to e-commerce experience, a treasure hunt is not a good idea, not to mention if someone is as busy as our archetype - Busy Buyer. That’s why we have to simplify the shopping experience and create a delightful shopping journey for Busy Buyer.

02.png
Task

As Chilli Coral doesn’t have a website yet, we are required to create an eCommerce site with simple and delightful shopping journey focus on primary archetype - Busy Buyer.

03.png
Approach

Observe → Organise → Design → Iterate

Observe
Organise

Business Analysis

Contextual Inquiry

Information Architecture

System Map
User Flow

Scenarios

User Flow

Design

Key Features
Competitor Res.

Develop Prototype

Iterate

Usability Testing

Iteration

Present

Usability Testing

Iteration

Presentation

IMG_4252.JPG
04.png
Problem

“I don’t have time to treasure hunt. And sometimes I don’t really have an idea of what to buy.”

  • "Treasure hunt" shopping experience is not suitable for Busy Buyer

  • Busy Buyer are in a hurry and have no time to search for the ideal gift option

  • They need an efficient way to purchase an ideal gift

problem_img.jpg
05.png
Solution

“Simple search function + Quick inspiration, Easy Checkout + Allow collect at the store”

Based on the challenges we discovered above, we can then narrow down the design direction into two focuses: 
 

  1. For those Busy Buyer already know what they want to buy:
    Provide a simple search function and easy checkout experience, also allow “collect at the store” function for those who cannot wait for the delivery

  2. For those Busy Buyer do not know what to buy:
    Provide quick inspiration section and easy checkout experience, also allow “collect at the store” function for those who cannot wait for the delivery

homepage-crop.jpg
1. What's New Section

Provide inspiration for customers which will eventually boost sales. 

With quick Add-To-Cart function and add to Wishlist function.

2. Gifts & New Arrivals

Customer can explore inspiration furthermore in Gifts and New Arrivals section.

hm_closeup.jpg
hm_closeup.jpg
inspiration-crop.jpg
3. Inspiration Section

Allow customer to choose among "For Him", "For Her" or " For Kid". 

Which will help them narrow down with specific direction to browse. 

p2_mockup-inspiration_closeup.jpg
detail-crop.jpg
4. Preview Thumbnails

Provide different perspective of preview images.

p2_mockup-detail_closeup.jpg
5. Related Products Section

Provide related products, which will increase the successful checkout rate. 

p2_mockup-detail_closeup.jpg
checkout-crop.jpg
6. Collect at Store

Customer can collect at store which can avoid the potential risk and the incontrol schedule of shipping. 

p2_mockup-checkout_closeup_1.jpg
7. One-Page Checkout

Customer can estimate how long does it take for checkout.

p2_mockup-checkout_closeup_2.jpg
06.png
Process
process.jpg
Observe

“Don’t look at the pictures and imagine the business, but visit them, talk to them in the real world”

  • Facebook page and Instagram account:

    • Keep their customers up to date

    • lots of people who love Chilli Coral because of the service and product they provide

  • In the contextual inquiry

    • Chilli Coral has a lot of products, which is not organised in a simple structure

    • Most of the customer needs shopkeeper to locate the goods that they are looking for, or needs the shopkeep to introduce goods based on their conversation. 

    • The shopkeeper also mentioned that their products do not follow a category list, and they buy various products from time to time

IMG_4251.JPG
IMG_4261.jpg
Organise

“I’m really excited when seeing lots of products in the store. But I’ll definitely be pissed off if it happens online.”

  • Chilli Coral is an amazing gift shop which provides hundreds of choices, need to organise the products into a reasonable and learnable structure

  • First Step:
    Categorise the products into reasonable categories, such as “Kitchenware”, “Grooming”, “Grab & Go” etc. 

  • Second Step:
    create the top-level categories of “home” and “non-home”, as Chilli Coral is a “Gift and Homeware” shop

  • Third Step:
    some of the subcategories can be in both top-level categories, which will help users to find what they are looking for in a less complicated journey.

IMG_4279.JPG
IMG_4282.JPG
Design

“Less is more. But how might we keep the experience simple yet supportive?”

I began by writing some scenarios, showing the happy path of our users:

1. “James is going to get his friend a birthday gift. James knows his friend love shoes, but James is not really good at fashion and style, so he needs some inspiration”​

s1.jpg

2. “Louise just remembered it’s her best friend’s birthday next week and wants to get her best friend a decent gift. She doesn’t have much time to shop, so she is looking for some quick inspiration.”​​

s2.jpg

3. Ray’s girlfriend really liked the tote bag that he recently bought for his friend. He’d like to get his girlfriend the same one, but he can’t remember exactly what it looked like.” 

s3.jpg

Based on the scenarios, I can now think about the system map and the user flows, which will help me to design in a more structured way. Then, I started to create a system map that shows the whole picture of the eCommerce site.

system_map.jpg
UF1.jpg
UF2.jpg
UF3.jpg
Iterate

“Is there any confusion? Can the user experience what we’ve designed?”

Then, I conducted usability testings with various users on the interactive prototype in different scenarios. Resulting in a few changes of details, including the easy add-to-cart function, one-page checkout feature.

IMG_4309_ps.jpg
07.png
In the future

“User experience project never end, it keeps evolving.”

I believe there are a few things we can make the whole eCommerce site better:

  • Card sorting again with the real product list
    As the product list is just based on what I can find in the store

  • Formal usability testings 

  • Develop higher fidelity prototype

bottom of page