Role
Freelance Web Designer
Date
April – July, 2018
With
Lang Jinyue, Front-end Engineer
Where
Generalized Intelligence & home, Beijing
Link
Unavailable now. Try the prototype.
Defining Requirements
I discussed with the client before redesigning Generalized Intelligence (GI) website and identified the following requirements:
1. Restructure the website by creating modules for product introductions, company profiles, case introductions, company news, an account system, and more.
2. Since the company’s products cater to both AI-savvy and novice users seeking visual recognition, the website should be user-friendly for both groups, making it easy for them to find products that meet their needs.
3. The new website’s visual design should be consistent with the company’s brand.
4. The website should be responsive.
Challenges & Solutions
When initiating the design process and brainstorming ideas, I encountered two issues, as outlined below. Fortunately, I swiftly devised corresponding solutions:
Visual Style
At the time, GI's primary product, Tegu, lacked a well-designed UI. Hence, instead of displaying the interface on the homepage like most digital tool product websites, I opted to design a set of illustrations to illustrate its functions and enhance the visual identity.
Novice Users
Machine learning products are complicated for most novice users to understand quickly. To make it easy for them to find products that meet their needs on the website, I planned to design a questionnaire module called ‘Find Your Solution’ to optimize this process and to improve the usability of the website.
Sitemaps
Initially, I created several site maps to outline the website's structure and content hierarchy based on the requirements. I also established the page transition logic for various content.
The first image illustrates the overall website structure, with the homepage as the centerpiece. It is divided into ‘navigation’, ‘main’, and ‘footer’ sections based on programming logic, which facilitates communication with front-end engineers.
Overall website structure.
The second illustration depicts a flowchart of the ‘Find Your Solution’ questionnaire feature mentioned earlier. This feature enables diverse users to easily discover products that suit their requirements.
The flowchart of ‘Find Your Solution’.
The hi-fi prototype of ‘Find Your Solution’.
Wireframes
Below are the wireframes for some of the primary pages of the website.
UI Design & Building
To aid with typography during website UI design, I implemented a grid system. Additionally, I created various layouts tailored to the three different screen sizes in preparation for responsive design.
As mentioned previously, Tegu’s UI was suboptimal during this period, rendering it unsuitable for display on the official website. To address this issue, I placed some original illustrations in the page elements to enhance their visual appeal and to help users understand their products better.
Home page.
Product page.
Industry cases page.
Grid system and responsive design.
Using my knowledge of HTML and CSS, I collaborated extensively with front-end engineers to explore how to implement various visual details and responsive design. I also created a UI Guideline that outlines the colors, font sizes, line spacing, and naming conventions for developers to easily access.
Code for RWD: max-width 767. By Jinyue Lang.
Code for RWD: max-width 640. By Jinyue Lang.
UI Guidelines: colour
UI Guidelines: typography
Unfortunately, the company’s shift in product direction resulted in the official website being taken offline since mid-2019. However, you can still access a portion of it via the hi-fi Figma Prototype. Click here to explore it!
Note: The original website was in Chinese.
