Company
OHO! Market
Year
2021
Type
Branding
UX Pattern
Design System
Branding & Online Store Design
OHO! Market is an online store that offers various products, such as kid's products, cosmetics, seasonal tour group special rates, house interior products, and pet products from international and domestic brands, at reasonable prices as group purchases.
The brand's concept is CONNECTION with family, friends, and community. The business's plans include offering membership benefits such as discounts and special offers from OHO! Market's partner companies, such as products, restaurants, cafes, and entertainment.
Role
As the sole designer in the company, I designed graphics and websites, created the brand's identity, and created an online shopping mall with Shopify.
I also suggested business ideas and strategies based on my research of the Canadian online shopping commercial environment and my analysis of benchmarking data from similar service websites.
Following the research results and UX goal, I organized all categories of products. I designed the standardization of the product's detail description template to increase users' average time on our website.
[OHO! Market] Branding
I wanted to make a short and simple brand name for a rememberable domain.
Of course, the business naming should be simple. The company decided OHO! Market target customers were between the 30s to 60s. Based on a decision, We needed to make brending to impact to older and need to harmony with list of products to be sold.
OHO! [/ōˈhō/]
: used to express pleased surprise
ex) Susan: I think I like him...
Jennifer: OHO! Tell me more. 🤩
Montserrat Font, which is a sans-serif typeface, is clearly and strongly appealed.
'O' letter and 'H'latter combined to create a delightful and engaging symbol logo.
Utilitarian Logo
I want the logo to fit well with multiple brands' logos because we are selling various products and advertising with brands of partner companies. So, I considered designing it to apply to dynamic graphic designs.
Pattern with Products
I designed the pattern design with our products for the first grading.
This design was attractive to audiences. So, the first Instagram project was successfully effecting the audience have naturally curioused and interested in our brand SNS accounts. We had a good starting that the account got over 200 followers within a month.
[OHO! Market]
Shopify Online Store Design
OHO! Market target customers were between the 30s to 60s.
The age group is older than general online shops. As a designer, I considered Older Users and Web Accessibility for UI design and understood users' pain points and solve a UX challenge with business department co-workers. Because we found some business concerns by the shopping journey map, storyboard, and user interviews.
Persona
Absolutely, online shopping is welcoming to everyone.
But based on our target users, I made two personas: a 50s old man, who has a wife and two teenage children and a 40s woman, who has one young daughter and a dog.
Pain Point
Our potential users talked about the uncertainty of online shopping at companies and products, and the inconvenience of the delivery system.
And also on our business side, delivery was the main problem. Because international shipping products and custom products were hard to refund and exchange after the products were delivered.
It potentially causes our valuable customers to have an unsatisfied shopping experience on our website.
UX Challenges
E-commerce is the selling of products in the online environment. In order to increase sales, we encourage people to continuously see other products even when they choose a product.
However, it is necessary to increase the satisfaction level even after receiving the product so that a one-time purchase is not the end, but re-purchases soon.
Therefore, designers make customers want to buy products and get sure what they buy, even though refunds and exchanges are not available due to the nature of online purchases.
UX Goals
In the research, a designer can do is to ensure that all our product information and images are accurate, clear, and complete so the customers knows exactly what they're getting. This won't completely prevent this type of return, but providing the customer with comprehensive product information will mitigate many of them.
Because the customers bought the wrong item or changed their mind once they received it. It might be hard-pressed to find a person who had never made a mistake or changed their mind about a purchase. There isn't much we can do to prevent a customer from feeling differently about a purchased item once they see it in person, and you can't prevent every mistake on their part.
Design for Seniors
The design is intuitive and more eye-catching to the product so that there is no difficulty in using it by older users. As a designer, physical changes with age must be understood.
1. Decreased visual acuity and concentration
- Be hard to distinguish similar colours
- Need more Image elements than text
- Prefer big and concise text font
2. Cognitive change: memory, attention, and decision-making
- Require interactive effects
- Simple task flows
- Require Intuitive guidance
Design System
Based on the brand guideline, the design system is for OHO! Market website.
Responsive Design
I divided the two banner slider versions according to the web and mobile screen size to freely design the banner's layout. The different banner images are automatically replaced depending on the device's screen sizes because text above the original banner system is often complex to read.
Categorized Product Listings
To quickly show the products for sale in our shop, I decided traditional category-landing page style to display the products by categories for a Home page. The product listings allow immediate access to items and minimize the number of clicks.
The AB test proved that the magazine-style design was not intuitive to show to our users. And through user tests, the design was easy to recognize our products what we are selling to user. Why we decided because users, who are visiting our shop first time, have no idea what we are selling.
View Button
Through several user tests, I found that the 50+ years of age demographic didn't realize the product photo functions as a short cut button to the product page. I suggested a visual qeue labelled "View" in order to direct customers to go to the product page.
Product Page
Add to Cart
The animation highlights "Add to Cart" to entice where the next click is. Research shows that "Add to Cart" Burton is more important, and many customers respond by clicking the "Add to Cart" button more easily than the buy button directly.
The concept is similar to buying things at a retail store. This makes it easier for you to pay for all the things that you want to buy in one shot. Customers take a trolley, fill it up with everything you're buying, and then push the whole trolley with all your selected items in it in front of the counter.
And we also analyze the customer's taste and the list of products that weren't purchased but are attractive.
Product's Description
I designed the product's details description section to be full-wide so that users can see the same layout and read clearly about the product's information on any web and mobile device. Because the website is responsive design, and the information is delivered accurately. So, The original description section, located in the lower right corner, was small to read the contents on the web screen.
The product description shows various photos and information, such as a long one-page product brochure.
Description Template
I created templates that provide product information to edit enough uniform information quickly for saving time. The content provided varies depending on the product type, so the template layout is also slightly different.
The information standard is that customers usually check before purchasing a product to increase their satisfaction when receiving the product. To give confidence in the product, it provides detailed information about realistic sizes and accurate product materials etc.
