Lifo - Storefront Editor

Make commerce easy for social creators

Context

Develop and maintain customized web editing UI, design systems, and style guides to ensure product(Lifo’s client e-commerce responsive site) consistency and scalability.

  • As Lifo's client base grows, maintaining consistency and scalability across their e-commerce sites has become a challenge. To ensure best-practice user experience across all client sites and accommodate various customization requirements, a standardized site layout and design language is necessary. However, without the proper tools and resources, clients may struggle to create a professional-looking online store. Lifo needs to develop a solution that simplifies the e-commerce process for clients while ensuring consistency and scalability across all client sites.

  • Lifo’s creators or clients who want to set up and maintain their own e-commerce sites without requiring extensive knowledge of web development or design.

  • Project Lead, UX Researcher, UX Designer, Art Director (help creators to come up with visual branding assets)

  • Stakeholders: CEO, COO, Managers, Senior Product Managers

    Associate: Product Manager, Developers and Myself

  • 3 months

  • As phase 1 of this project comes to a close, Lifo is now equipped to serve its growing client base better and meet its diverse e-commerce needs through the new web editing UI tool.

Research

We conduct multiple research to seek solution for our problem at hands. These research include: Competitive Analysis, Users Survey, and One on One interview with creators. Based on the research, it revealed that some of the creators’ objectives actually align closely with our own.

  1. Increased productivity: By streamlining the editing process, reducing the time and effort required to make changes, and allowing website owners to focus on other important tasks, customized UIs can help boost productivity.

  2. Improved user experience: By making it easier for users to edit content on a website, Lifo can help ensure consistency in style and user experience across all e-commerce sites, which is important for maintaining brand identity and scalability.

  3. Consistency: By ensuring that all content on a website adheres to the same style and formatting, Lifo can help maintain the overall look and feel of the website, which is important for brand identity and user experience.

  4. Reduced errors: By providing an intuitive and user-friendly editing experience, Lifo can help minimize errors in the editing process, which can help creators avoid costly mistakes and stay on top of their website maintenance.

  5. Customization: By tailoring the editing experience to the specific needs of each creator, Lifo can provide a more personalized experience that can make the editing process more efficient and effective.

Based on the research findings and shared objectives, we have decided to incorporate the "customized web editing UIs" feature into our back-end system for creators to further support their goals of increased productivity, improved user experience, consistency, reduced errors, and customization.

Design Challenge

As creators have unique brand aesthetics, we aimed to cater to their diverse needs. To facilitate this, we developed sectional templates - pre-designed layouts that provide a framework for organizing content within a web page or application. These templates not only provide a great starting point for design, but also allow their brand to shine through customization. Initially, I created around ten different templates, but for the beta launch, we narrowed it down to three. The ultimate objective was to establish a system that determines how different item types could be presented, regardless of any specific theme or style. By using sectional templates, we were able to streamline the design process and ensure consistency across different pages or sections of the website, while also providing flexibility for customization to meet the unique needs of each brand.

Outcome

Lifo has introduced the beta program, 'Storefront Editor'. This program empowers creators with minimal web development knowledge to create customized websites using an easy-to-use web editing UI. The program offers more than just basic merchandise by including sales campaigns, enabling creators to leverage marketing and sales tools to boost their revenue.

The storefront editor ensures that all creators' sites are consistent and user-friendly while balancing technical constraints with ease of use. By incorporating the "customized web editing UIs" feature, we offer an intuitive and user-friendly editing experience while maintaining the technical standards necessary for a high-quality e-commerce site.

Benefits of the program include:

  • Empowering creators to create customized websites without extensive technical knowledge

  • Offering sales campaigns and marketing tools to boost revenue

  • Ensuring consistency and user-friendliness across all creators' sites

  • Balancing technical standards with ease of use through customized web editing UIs

By prioritizing both creators' and customers' needs, we believe the program will support our shared objectives and enhance the overall customer experience.

The Storefront Editor UI facilitates creators in customizing their website to the fullest extent possible. The UI offers a diverse range of options, including but not limited to color selection, corner style, text front, and text position, all available at the click of a button. Additionally, users have the option to upload their own images to use as banners. The Preview button located on the top bar allows for a quick and seamless transition into preview mode, allowing users to confirm the visual aesthetics of their website before saving changes to the live site.

Customizable product UI

Revenue Report UI

Site created by ‘Storefront Editor’

Session

  • Erica Hoida- a Personal Fashion Stylist & Style Blogger at Fashioned Chic from San Diego, California.

  • “Session” - a contemporary fashion streetwear created by Erica Hoida, fashion stylist & creator

Burrito Nation

  • Matty Burrito

  • Nowhere-based goblin animator making raunchy adult cartoons (+18up CHANNEL!). Focusing on original characters and content.

Delivury

  • Jessica Vu - an American social media star who is widely known for her ‘Jessica Vu’ named YouTube channel. She is recognized for her makeup tutorials, hauls, personal favorites and fashion-related content.

  • Delivury- cute, practical items and cozy home goods to truly make your space feel like home

Moving Forward

As phase 1 of this project comes to a close, Lifo is now equipped to better serve its growing client base and meet their diverse e-commerce needs through the new web editing UI tool. To further improve the online store and the creator platform, we plan to focus on expanding the shared design system and conducting user research. One key area of focus is to create a library of reusable components and design patterns that can be easily shared and leveraged across different features and interfaces. This will help to maintain consistency and reduce design and development effort.

Additionally, we plan to conduct usability research to gain deeper insights into users' behaviors and needs, and use this information to improve the overall user experience. By gathering this feedback, we can identify areas for improvement and refine the design language to better match user expectations.

We also plan to establish a stronger collaboration with the creator community by providing more opportunities for feedback and engagement. This could involve creating a dedicated channel for creator support, hosting webinars and workshops, and facilitating ongoing communication through social media and other channels.

Overall, by focusing on these initiatives and prioritizing the needs of users and stakeholders, we can continue to improve the online store and the creator platform and drive business growth.