GOODs Online Select Shop

Overview

Project Background
A start-up company is named GOODs would like to setup an online select shop targeting the young and middle-aged groups in Hong Kong. The main goal is to sell stylish, useful and lifestyle products, e.g., coffee beans, wine glasses, rubber toys, face masks, kitchen wares, etc. They would also like their online stores connected with their social media channels, e.g., Instagram, Pinterest and Youtube. for branding and marketing purpose.
Although most of young and middle-aged group users are comparably tech savvy, their online shopping behaviours are quite different and easy to change. There are many online select shops, and the market is quite competitive. Therefore, the online shop need to be more flexible for branding or marketing, easy for business owner to update and manage the items.
Problems & Objective

Research

As the business owner would like to position the online shop as a Select Shop. Select Shop is an interesting concept was firstly found in Japan, and they did a great branding and marketing to promote to other Asia countries, e.g., Hong Kong, Taiwan, Korea and mainland China, etc. In case, the first challenge for me to figure out in the research is to find out and compare the existing Select Shops on the market in Hong Kong. The second challenge is to understand the perception of a great Select Shop from our target group users. Therefore, I setup the Online Survey to find out the answer for the first challenge and Face-to-face interview to find out the answer for the second challenge. Meanwhile, I would like to further understand how the users' shopping behaviour. I ask their questions and talked to them.

The survey result is quite surprising to me that the Select Shop is very popular to the young target group users. It becomes a part of their life to walk around the physical Select Shop or browse the online Select Shops. However, the user flow is quite different of my expectation. The users would prefer to browse the items of the Select Shop via Instagram, then go to the eCommerce website to place an order. Browsing the items on mobile devices via Instagram makes them spend a lot of time on it. The finding of the user flow will be considered in designing the online shop in the later stage.

Online Survey & Summary

There are totally 26 submissions. Most of the participants visit the Select Shop but they do not know what is the definition of the Select Shop. They go there because they are attracted by the brands and items selected by the shop. Although they wish a discount, they would not mind buying the items in an expensive prices if they really like it.

I have a better understanding of the users after done the Online Survey. The user expectation of the Select Shop is different from the other types of shops. It shows that the users prefer the quality of the products from Select Shops rather than the prices of the products. As long as the value of the online shop I designed can be straight-forwardly shown to the users, it will serve the purpose. To do this, I think I may make some eye-catching features on the landing page, feature banners or taglines in the product list page, etc.

User Interview (Face to face) & Summary

There are 4 interviews conducted. The 4 interviews are with different background and occupations.
Most of interviewees used to visit the Select Shops for both online and offline stores. They follow the Instagram pages of the Select Shop on mobile devices, then screen captured the items they wish from the Instagram, after that they search the items with the product name or product code on the official website and place the order. The existing flow they using is a little bit complicated because of the limitation between the Instagram and official website.

As I don't think it's easy for us to create a solution between the two platforms, Instagram and website, but can we make the existing user flow simpler? For example, capture the image from the Instagram and upload it to the website to check out the products, extract the link of the instagram and paste to search on the website? Can we make the whole flow on the mobile device which could be more user-friendly.
NEEDS
FRUSTRATIONS
MOTIVATIONS
• 3/4 interviewees like to browse the new and stylish items
• 4/4 interviewees expect a brilliant search with images
• 2/4 interviewees expect the online shop with an well organised product categories
3/4 interviewees prefer a notification of the new items, items on sale, etc.
• Simple check out flow
• 3/4 interviewees will shop without a purpose but by random. New items attract them
• A good customer support, return policy
• Most interviewees expect a reasonable delivery time and parcel tracking
• Most interviewees think it is complicated for screen capturing the items on instagram, then find out the items on website to place the order
• Product categorisation is too not specific enough
• The notification is not instant enough
• 1/5 interviewees encounter a big security issue, credit card information was stolen.
Persona
Based on the findings in the interviews, I created a persona, Aria. She is young girl, aged around 28. She is well-educated, outgoing, love design and art. She represents one from the typical group of the target users who are tech-savvy, frequently use the social media apps and spend more time online. She has an expectation on the simple user-friendly interface which can keep them posted of the most update items of the online shop.
Refine the Design Goals for next stage
Before move to the design stage, I have refined the design requirement based on the findings of the research. I will create a simple branding include the logo, brand titles, UI kits for the GOODs online shop. The Online Shop need to be responsive to mobile devices, enables to share the product information between the Instagram on the mobile devices to the website. It will enable the business owner to manage the products and online shop easily, e.g., update the product, price, discounts, descriptions and promotion banners, etc.
Interaction Design
Site Map
Here comes the Site Map for the GOODs Online Shop. Considering the preference of the business owner and target group users, I will put the What's New items at the eye-catching page and then with the various product category page, after that there is the accessory page. The Search bar and the Wishlist will be put on the top of the global menu bar for accessing easily.
details
Define the Flows
Basically I have created the Task Flow and User Flow accordingly to the usual online shopping flows but I have added a different steps in Task Flow of purchasing the items, in which, the users can save the product (name, product code or photos) from their instagram, then paste it to search bar (the search bar will have a image search feature) on the online shop website.
Task Flow
User Flow
Wireframe
The wireframe includes the landing page, product list page, product detail page, cart page and check out page, etc. Between I have proposed the Masonry gallery design to display the products on the landing page, which I take reference of how Pinterest presents their posts. I think the Masonry gallery design will serve the purpose to give the target users a simple, stylish, informal and casual experience.
details
User Interface Design
Moodboard
The business owner have told me that she loves the Scandinavian lifestyle product design, e.g., HAY DESIGN, and also the Japanese product design., e.g., Muji. Obviously, they have a similar design theory which is the design simplicity. These style are also liked by our target users after I talked to them in the Face-to-face interview. Based on this design theory, I created the Moodboard.
Brand Style Tile
The fonts, Quick Sands and Nunito are selected for the Brand typefaces because these two fonts are simple, informal but stylish. On the other hand, I have played a Japanese humour on logo design by putting the sleepy eyes to it, which makes it with more human touch. The bright green color is proposed as the primary color to gives a modern, refresh and memorable, brand image.
UI Kit
Based on the brand style tile, I have created the following UI Kit and prepared it for High-fidelity layout design.
Page-1
Page-2
Prototype
The most challenge here for me is to compromise brand style, selected the product images, layout spacing and CTA modules to a high-fidelity stylish and simple visual layout. The keywords, simple, stylish, informal and casual, are the core-value of the brand which I try to ensure they are delivered in the design.
details

Usability Test

I have got few participants to do the usability test with the preset the test flows. Most of them can complete the tasks easily and they like the design layouts.
Report
OBJECTIVE
‍The objective is to find out which group will be our target customers and learn about their shopping experience. Analyse the competitors’ eCommerce website and branding. Understand what customer expectation of an Online Select Shop.
‍
‍PARTICIPANTS
‍NO. of participants: 4
Age:25-50
‍
‍SUMMARY
‍There are 4 interviews are conducted. The 4 interviews are with different background and occupations.

Most of interviewees browse the items on the instagram official page via the mobile devices and then place the order on the online shop. All of them prefer a user-friendly flow between Instagram and online shop.
TEST DEBRIEF
•All participants click the icon of camera on the search bar to search with images
•All participants recognise the icon “heart” represents the Wishlist
•All participants can place the order from Wishlist and Product detail page
•All participants will choose the payment method to place an order
Affinity Map
In the Affinity Map, it summarise the points obtained from the usability test. There are two painpoints, users cannot recognise the icon of camera which refer to the image search feature and "X" icon is not precise enough to refer to delete function. I have comes up with the potential solution for polishing the design.
details
Final Design
After back and forth revision and testing, I have come up a Final Design for the GOODs online Select Shop, which is presented to the business owner and she is quite happy with it. For the next, I will help her to apply the design layout to the Shopify and target to get it launch in mid of 2023. I believe there will be much more to design customization on Shopify. I expected I will work with some technical experts.

Looking forward to getting in launch. Hope everything will be good in GOODs online.
details
Source images courtesy Pinterest. The images are not commercial purpose.

Want to get in touch?
Drop me a line!

I believe “One swallow doesn’t make a summer”, we have to make the summer together.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
ORIGINAL DESIGN by Jim Mau.
FacebookTwitter