Overview
This product is designed to simplify and faster developers to work in build website systems with UI templates, determin system categories, product variants, and display demo.
Problem & Goals
The product system was created to make it easy the process developers to building websites. This should be done when there are a new project, we don't need to create it from zero anymore. We also needed own style guidelines and design templates to make collaboration easier between designers, front-end, and back-end developers.
This product was designed to streamline and speed up project development. And then, the design templates can serve as demos to showcase visual concepts to clients.
Research & Analysis
Research and review design templates familiar to used for company profile and product catalogs websites. I started by focusing on the menu points landing pages and the content per-sections in company profile website. All these elements were gathered as references, and then I will action to create layouts and key elements such as titles, descriptions, images, cards, and more.
Based on the analysis, I will create designs following the style guidelines for internal products and create visual demos to preview to clients. However, before the designs are created, the next step is develop a sitemap and break down the key points for each page.
Site Map & Component
I created a site map to ensure the pages contained in the company profile website. Here you will also find the contents of the page per section.
Next step, I determine the selected components are on the page. The goal is to match the input list in the CMS website later.
UI Design System & Component
I created a site map to ensure the pages contained in the company profile website. Here you will also find the contents of the page per section.
Next step, I determine the selected components are on the page. The goal is to match the input list in the CMS website later. An example is shown in the image below: this section contains components such as an image, title, description, icon list, and button. The component will continue to be used in the CMS, but it can still be hidden if not needed.
Wireframe
I created a wireframe to determine the type of layout to be designed and the sections to be used for company profile website. Here, we can see a comparison of the layout between sections, and we can also see how many components are available for use in each section.
High Fidelity
Next step, high-fidelity design is created based on the previously developed wireframe. Then, each section design will be categorized based on the same type and components, and each part section created will be a new variant.
Preview Demo Website
This is a landing page created using section components from the library. It includes 4 demo preview options based on different business themes, designed to give clients an idea of how to create their website.
Documentation & Goals Marketing
Once all the variants are completed, the next step is to organize them by category and create UI documentation. This documentation will be available in Figma, Frontend Website, and Backend. With everything in place, the finished product will be ready to promote to customers.
Documentation UI Variant
Goals Marketing
This marketing solution is designed to provide convenience and efficiency for clients, both in terms of time and cost. Featuring:
- Time and Budget Efficiency: No need to spend extensive resources on creating designs from scratch.
- Design Simplification: Clients simply select the desired sections and customize colors and typography as needed.
- No Designer Required: The process becomes more practical without needing a designer to start from zero.
- User-Friendly CMS: Still get Content Management System (CMS) that's easy to use for editing with full control.
