Online Shopping Revolution

– Development of a seamless user experience for a social commerce app

My role

UX Designer,
Technical project management

Timeline

8 weeks, 2023

Deliverables

Research
UX Design
Design System
Webdesign

The startup SIYU.live will redefine online shopping and bridge the gap between live shopping experiences and social media. A unique platform has been created that fundamentally rethinks e-commerce.

As a UX designer, the entire conceptual and design process was in my hands. Bringing the idea to life required a lot of creativity due to a tight budget and limited resources. Currently, the app is in the final phase of technical development.

Problem Statement

The platform aims to position itself in live streams and dropshipping within a moderately successful market alongside already established retailers. Without a differentiated user experience and genuine added value, SIYU offers potential users an already familiar shopping experience that does not create long-term and groundbreaking engagement.

Research

Potentials despite big players on the German market

The project started with a market and user research to identify potentials and challenges early on. In China, Live Commerce is booming with a projected 281.2 billion US dollars in 2023. ↗ The success is attributed to the aftermath of COVID-19 and the moderation by influencers and celebrities – the credibility of product presentation is of highest priority. The classic teleshopping of the 90s and 2000s was also based on the strong bond between the presenter and the audience as well as selling by story telling.

Major retailers such as Amazon, Douglas, Tchibo, and MediaMarktSaturn are trying to replicate the trend in the European market. However, a study from 2023 shows that 42 percent of German respondents do not see any incentives to try live shopping. ↗ On the other hand, a separate study on shopping trends for 2024 reveals enormous potential on social media. 66% of Gen Z and Millennials stated that they actively shop based on influencer recommendations ↗ and 79% of Gen Z's purchases would even be solely motivated by social media. ↗

Major brands are implementing classic teleshopping formats in their online stores

Purchasing decisions of Gen Z and Millennials are strongly influenced by social media

Consumers are looking for convenient online shopping experiences with recommendations from trusted individuals

USPs

Opportunities through social commerce and market fragmentation

Through the insights of the research, the focus of the app was placed on social commerce. As an independent provider, SIYU offers the user a wide range of products from various brands on a single platform. In contrast, many live shopping solutions are limited to one sector, such as Douglas in the beauty sector. This market fragmentation enables an innovative positioning in the German market.

By combining social media and e-commerce, a deeper connection between shopping experience and purchase is created. At the center of this is the interaction between users and moderators or creators, without the need for elaborate glossy studios. The app primarily positions itself as a place to sell and secondarily as a social media platform. It creates a unique shopping inspiration, without relying on disruptive advertising. The user becomes a more conscious recipient of buying incentives in a seamless, inspiring, and user-centered experience.

Comprehensive range of products

No restriction of product selection due to independent position in the market as a middleman.

Fusion of product recommendation and purchase

The shopping inspiration by influencers is directly combined with the point of sale to create an immediate call to purchase.

Minimal distraction factor in the shopping experience

Advertising is not perceived as a disruptive factor, but actively sought by the user.

Reach of the live shows through dual format

Live shows work in both classic teleshopping long-form content as well as in a familiar social media format, appealing to different user groups.

Vibrant product experience for informed purchase decisions

The product catalog is enlivened by clips of the live shows, which provide the user with an authentic and immersive impression of the products.

Feature Scope

Vision for the MVP with limited resources

From the insights into the competition and the business plan, questions were derived from the 'How might we' framework. The task was to define which problems SIYU can solve for the users. Because of the very limited time, a minimal viable product was aimed for, with a backlog serving as a catch-all for promising but dispensable features.

How can we seamlessly merge the purchasing process with the live stream as smoothly as possible?

How can we create added value from past live streams for the user, in order to maintain user engagement even after their recording?

How can we promote interaction among users for a shared shopping experience?

How can we connect the classic teleshopping show with 60+ minutes to short form content on social media platforms?

Planning of user flows with strategic time distribution

The features for the MVP were formulated as user stories and grouped into user flows. Depending on the complexity, level of innovation, and impact on the UX, the design pace for the flow was adjusted. Simple flows went directly into the high-fidelity prototype, while key features such as the purchase in a live show were thoroughly designed with wireframes up to usability testing.

As a viewer, I want to be able to buy products from the streams directly in the app in order to save time and effort when ordering.

As a viewer, I want to quickly capture the activity of my subscribed streamers and products at a glance in order to navigate quickly to the desired content.

As a viewer, I want to see a countdown for upcoming live streams in order to better estimate the time frame and to save the date in my stream calendar.

As a viewer, I want to be able to access relevant information and past streams about the product in order to make the best possible purchasing decision.

As a viewer, I also want to watch old streams to be flexible in my shopping experience and not miss any content.

As a creator, I want to be able to see direct insights into my streams, followers, and sales figures of my advertised products in order to evaluate my activity optimally.

As a viewer, I want to specifically search for streams about a product in order to make an informed purchase decision.

As a viewer, I want to be able to ask questions in the live chat of the stream to learn more about the product and actively shape the course of the stream.

As a Brand Manager, I want to see meaningful data on the performance of my products to adjust my strategy accordingly.

Design System

Harmony between functionality and branding

The design system is based on a corporate design, consisting of two font faces, the logo, and the primary color neon yellow. The biggest challenge was to find a balance between neutrality and brand presence.

Especially in commerce-focused user flows, the product takes center stage – the SIYU brand must hold back. The design system consists of a reduced dual-color palette and uses the brand color as an indicator for interactions.

The UI designs were gradually developed in Figma as responsive, customizable components with variants for both a light and dark mode. Another focus was the optimal scalability of the system to meet the requirements of both an app and a website. Throughout the design process, the guidelines for accessibility were considered according to the Web Content Accessibility Guidelines (WCAG), ensuring that at least an AA-level contrast is always achieved, for example.

Prototyping

Enough of Choice Overload - UX of the Live Show

The interaction within a live show is the crucial point for the user experience. Here, many 'how might we' questions were solved by taking inspiration from successful elements of the Chinese sales model, the fast-paced content on social media platforms and the appeal of classic teleshopping.

The original vision of a traditional video platform with an overview page was discarded early on in order to prevent excessive selection and decision paralysis for the user. Instead, the app takes users directly to a live show, similar to the classic TV experience or endless scrolling on TikTok. In this TV mode, the content of the followed creators is always running, as well as fixed reruns of the shows – fixed streaming times are no longer an obstacle to the shopping experience.

Before the design process, the startup founders considered a tile view in the style of Youtube or Netflix. It gave way to the app's compressed experience.

An overlay over the live video allows the user to either engage in the chat or add products to the shopping cart. After the show, short relevant clips are placed on the respective product detail pages to benefit from the product presentation in the long term.

Design Iteration

UI-Check with AI Tool

AI tools are a cost-effective and scalable way to improve the UI without extensive testing with real users. Some central screens were analyzed with gazeplots and heatmaps by comparing the simulated eye movement of a user with the targeted visual hierarchy.

As the usability of the product detail view is crucial for the conversion rate, it was improved with the help of a heatmap. Related information such as title and price are now visually grouped and an overlay summarizes only the two most important CTA buttons.

Before

After

Landing Page

Beta launch with MVP e-commerce website

Before the completion of the app development, a beta launch with an MVP website was planned to collect valuable feedback from the first users. The features were limited to the live stream with chat, a checkout, and a CTA to recruit potential influencers.