From Web to Mobile e-Commerce

TLDR Here

Problem: - Users unfamiliar with Web Membership System. - Difficulties looking for Product Details and online items in-store. - Outdated Marketing and Sales Targeting Strategies. Solution: - Personalized mobile e-commerce solution with industry-standard infrastructure (QR Code product scan, New-in store items, Reviews, Community Interaction) - Reduced cognitive loading on Users and barriers by repetition of familiar mobile app designs - Creating a truly hybrid shopping experience; Users can look for product details and cart out right from the fitting room! Benefits: - Reducing unecessary strain on lean team in stores. - Facilitate checkouts during sales and peak periods and increase in-store sales conversion. - Members feel ease and plesantries of hybrid shopping, maintaining their loyalty to brand.

Email Me

Background Study

Defining the Problem (Creating User Personas and Affinity Mapping)

Disclaimer: This is a prototype produced during my employment, at Love, Bonito (LB) Singapore after reviewing common needs reflected by customers.

Members were always confused about membership perks, namely how to use the discounts (received via email marketing) and points available in their account... If I had $1 for every question asked during a shift, I would probably have made enough to buy 0.5 of a bitcoin.

The following 2 types of User Personas were created based on valuable customers' feedback.

Several other frequently asked questions in-stores were also recorded in an affinity map:

I categorized these questions into Membership and Retail categories, observing a gaping hole between online and offline shopping mechanisms. We had to plug this hole to strengthen brand loyalty and pursue a larger market percentage.

Conclusively, my primary aim was to develop a highly accessible solution that was in-line with modern shopping mechanisms and something that would be highly intuitive for members to use. This solution had to target Membership and Product Details specifically, all while being in line with LB's branding and providing exquisite customer service.

(Click to View Full User Personas)

Ideating a Solution

So why a Mobile App?

Modern e-commerce trends have shifted to mobile platforms to supercharge sales, whether through the use of applications, mobile websites or livestream platforms.

It would be the first of its kind in the local market and would be further propagated by the brand's target audience, to create a heightened potential for brand loyalty.

In fact, a mobile application would be better able to target individualistic shoppers through use of AI algorithms, promoting and reminding users of upcoming sales, and carts that have yet been checked out.

With a quick fact check from a Public Data and Options provider, we can easily prove Singaporeans have a large presence online as consumers who shop via mobile phones (85% of consumers shop via mobile phones). Out of the 85%, only 35% reflect shopping via a web browser on a smartphone. Larger numbers shop via e-commerce platform apps and retail brand shopping apps which reflect the popularity of using personalised shopping applications for purchase. Target audience of LB falls within the age range of 18-35, for which surveys reflect largest popularity of purchasing fashion apparel via their smartphone at 72%.

The observations suggest that LB's use of web browser for sales and marketing is outdated and impeding business.

Competitor Analysis - Features "stolen" (adapted) from other Mobile Apps

With the introduction of Cheak - LB's athleisure brand, and LB's aggresive marketing targeting areas outside of Singapore, we can safely say their sights are set to compete with global brands such as Lululemon, Alo Yoga and ZARA.

Thus, we put together a prototype, adopting common infrastructure from popular and thriving business models.

The design is hyper-focused on accessibility and marketability. This allows the mobile application to target all types of audiences, through the use of industry AND consumer validated app infrastructure and design.

Features observed:

Scan-to-view feature using CV technology to identify apparel information such as Size Charts,, Colours and Pricing. This reduces strain on the lean in-store team as customers frequently asked questions about apparel colour and size recommendations which can be easily referenced online. The team would be better equipped to attend to other personalised queries.

Added Manual Keyboard option for typing raises accessibility of users with devices of lower specs, camera may not easily capture images. Provided option to type in product information and search manually.

Imagery Visualisation and simple explanations to be provided in lower sections, which do not distract the main purpose and serves to provide further understanding.

Adaptations:

1) Smooth transition to "Add to cart" so check out can be within a thumb's reach Haha!

Customers no longer have to carry their items (Dresses and Jeans may be heavy!!) or wait in queue for checkout. From a customer's POV, LB becomes a business that is thoughtful enough to value a customer's time and convenience. From a business POV, this raises in-store try-on conversion and purchase rates.

LB's target audience includes working ladies from all backgrounds between an age range of 18 to 35. These ladies would be already well accustomed to other local QR code scanning applications. Ensuring the LB app is designed in similar fashions would reduce cognitive load on users.

Design Critique of Web Interface

Creating the Solution

Further iteration #1 : Adding a Review Page

Problem Statement

The existing review section did not allow graphical representations of items on real bodies

With less than 23% of Users trusting Influencer-placed advertisements, it may make sense to shift focus to real reviews by customers. Additionally, approximately 73% of Users consider graphical imagery when making their purchases, which sets our sights on developing a section to present photos uploaded by reviewers.

Description of Solution

As Users click into Reviews to further understand the item of interest, we draw their attention with a full list of reviews uploaded, with quick view images on the side to peak their interest.

Further, Users can click into each individual review that attracts them, to view and interact with the reviewer. This interaction will allow the purchaser to understand the item further from a reviewer who already has the product, lifting the rate of Conversion of Users who visit the item page.

A further step allows Users to translate the language used in Reviews as LB is an international brand currently launched in over 5 Asian Countries with different mother tongues. This feature will help reduce accessibility issues between Users in different countries.

Further iteration #2 : Creating Community

Problem Statement

The existing community section did not satisfy a core need of Users, to share the love and joy within their own social circles.

With the community function, Users may observe birthdays of fellow community members, separated into upcoming and overall birthdays for ease of identification.

Each user's wish list can be viewed individually to show all items added to wish list as of current date.

Description of Solution

It was identified that gift-gifting via electronic gift cards were common and an efficient way to celebrate friendships in Korea. A similar concept was adapted for use where items on a friends wish list can be viewed and gifted directly to the User without much fuss. Alternatively, the gift giver may choose to gift an electronic gift card with a customised amount totalling to the value of wish list items.

The process of gifting the electronic gift card is animated, to re-create a novel feeling and raise the satisfaction of a User's UX experience.

Community building via the application will allow users to foster a bond with the brand, to raise brand loyalty and lift retention of existing Users.

Further iteration #3 : Order Tracking

Problem Statement

Web Interface does not easily prompt Order Tracking or Customer Service liaison points.

Description of Solution

Integrating an actionable linked to Google/Apple Maps allows User to easily track their parcels (if on delivery), or to liase with the necessary Customer Service personnel to submit queries regarding orders.

After-sales service is highly necessary to build trust between Customers and the Brand. It is also necessary to boost return sales, good reviews and positive word-of-mouth.

High Fidelity Screen Dump

Takeaways

Large Costs for Testing and Development Stages

As web overhaul projects might have a smaller scope due to the rate of return (ROR) bandwidth, there may not be enough cost budgets available. We can make use of existing User Flows and Application Architecture Script from competitor applications to produce Cost Effective prototypes.

Retention of Existing User Flow

Overhaul of a large piece of digital framework will take time and costs for development, thus, we may repurpose existing frameworks and structure for use in the revised solution and provide a seamless transition between Web and Mobile platforms where possible to reduce cost.

Developing of Success Metrics

Through Localised surveying of Customer's use in-store, the Usability of the application could be studied without need for mobilisation of large cost.

The following are proposed as Success Metrics for the Application roll-out:

1. Use of Cart and Online Purchase application in-stores or within 24 hours of visiting stores

2. Click rate of Customers clicking into Promotions and Sales notifications upon pop up

3. Use of Community gift function as compared to e-gift card sales on existing Website interface