Yiju Community App

Yiju Community app is designed for large urban community settings, emphasizing social networking and lifestyle services. My role encompasses all non-engineering aspects, including conceptualization, prototype design, high-fidelity design, and the creation of product documentation.

Logo

Initially, the product utilized the company's logo, but it lacked aesthetic appeal due to historical reasons, leading to a need for a redesign in both shape and UI implementation. The previous Yiju Community logo, with its house design, highlighted the concept of community, a theme that needed to be preserved and evolved in the new logo. The design process also focused on simplicity and connection to the product name.

The updated logo maintains the house shape from its predecessor, infusing it with the initial letters of YiJu's pinyin as its principal identifying characteristic. It features rounded corners and transitions in the lines, intended to evoke a sense of warmth and familiarity for users.

Design guidelines

The design guidelines are composed of several key elements: Color, Typography, Iconography, Elevation, and Components. For Color, we employed the ColorBox tool to create a comprehensive palette in both vibrant and grayscale tones. This was complemented with the Contrast Ratio tool to clearly define color contrasts, aiming to ensure that the UI interface's text-background color contrast adheres to the Web Content Accessibility Guidelines (WCAG).

User interface

The product and interface design for Yiju Community has evolved through various stages. This journey has included design explorations in several domains, starting from the company’s initial focus on community book card sales to expanding into social networking, lifestyle services, and e-commerce products.

Water card sales

Yiju Community, a digital product from Beijing YiJu Community Service Co., Ltd., initially focused on selling purified water in Tiantongyuan community through automated machines. These machines were placed across various sectors of the community. Users would buy water cards via the mini-app, and upon completing their purchase, a delivery person was assigned to bring the card to them. These cards were then used to buy water from the machines.

The mini-app's first version, created by an early outsourced team, was more function-oriented, leading to a lackluster design and user experience. Consequently, designing a user-friendly interface for the water card sales section became an immediate and crucial task in the app's early development phase.

Community services

Initially, Yiju Community explored and designed various modules for community services, named "BaiShiTong." The goal was to create a comprehensive platform that integrated various community services, allowing users to address their needs through a single mini-app. This service range included lifestyle services, transport, government functions, educational programs, and business services, each encompassing several sub-categories.

E-Commerce module (Buyer Side)

Apart from the water card purchasing process, the company aimed to diversify its offerings by introducing an e-commerce aspect to the platform. A key initiative was the launch of the "Ten Yuan Store." This store, offering items at low prices (including ten, twenty, thirty yuan, etc.), was designed to attract users, encouraging initial purchases and increasing engagement with the platform's e-commerce offerings.

Instead of delivering physical products, users purchased coupons redeemable at partnered merchants who had transitioned from offline to online on the platform. These purchases allowed users to spend at specific community merchants, effectively linking the online shopping experience with physical stores and driving offline traffic.

E-Commerce homepage

The e-commerce section's homepage features a search bar, banners, entrances based on price ranges, product categories, and specially curated recommendations. The design emphasizes sections like the "Ten Yuan Store," "Twenty Yuan Store," and "Thirty Yuan Store" with distinct partitioning, robust numeric fonts, and vibrant patterns to draw user attention. It smartly organizes products by price and category, presenting a dual layout of vertical and horizontal logic, which is further integrated into the

Consumer coupons

Once users finalize their purchase, they receive a digital coupon in the "Coupons" section of their profile. To use the coupon, they simply present its QR code at the merchant's location, where it's scanned for verification and transaction completion.

E-Commerce module (Merchant Side)

YiJu Community's e-commerce section sources its products from offline merchants. The company's promoters and sales teams partner with Tiantongyuan community merchants, using the platform to promote online ordering and offline consumption, thereby helping merchants boost their offline sales.

Merchant information submission

Merchants submit their authentic information for verification through a QR code system.

Store information

After verifying their identity, they can complete their store profiles, including details like contact information, store name, description, logo, and address.

Product listing

Once their personal and store details are verified, merchants can add and submit products for listing on their homepage profile, which also shows their certification information and store's audit status.

Merchant backend

Upon authentication, merchants gain dual roles in the app, functioning as both regular users and merchant administrators. This dual role enables them to manage various aspects of their merchant profile, including order verification, information updates, earnings, withdrawals, and order overviews.

Tiantong circle

Tiantong Circle is a social feature within YiJu Community, designed after the circle concept prevalent in popular social media platforms. It offers users various circles, encouraging them to create their own and providing a specialized platform for different interests and hobbies.

Circle homepage

The circle homepage showcases features like search, followed circles, categories, and a stream of recommended content. Users can explore and join different circles through these options. Each social post within a circle includes the poster's and circle's details, allowing users to interact by following, liking, and commenting, as well as exploring related circles.

Creating circles

If users don't find a circle that matches their interests, they have the option to create their own.

Publishing images, text and videos

Furthermore, they can post updates in image/text or video formats to various circles, including those they follow, recommended ones, or ones they find through search.