IntelleXt
Website & Illustration
IntelleXt is a startup company that helps negotiate B2B (business-to-business) contracts through an AI assistant platform. This website was developed to introduce the company and how its AI assistant technology can intervene and provide an effective solution during business negotiations.
Duration
3 months
Team Members
Product designer
Product Manager
Project Type
Website
Illustration
Design System
Role
Product Design, Intern
01
Goal & My Role
Goal
Our goal was to design website to help viewers intuitively understand the complex contents of the company's vision and technology.
What I especially worked on
I explained what this company works in visual by keeping and utilizing IntelleXt's identity. To convey the message more intuitively, I also created some illustrations and infographics to help customers understand. After finishing the overall prototype, I made consistency in colors, typography, and illustrations.
Key Takeaways
01
All participants used a combination of multiple apps to find, book a cab or rent a car
02
Users value the ability to detect the damage to car immediately which reflected a sense of satisfaction for the rent-out feature
03
Major products in the market lack desirable features and feel impersonal, outdated and untrustworthy
04
A compare feature with relevant information is paramount when searching for cars.
05
Too much information on screen makes users feel overwhelmed, they'd like a more curated experience
06
Irrelevant suggestions feel impersonal and clutter the UI, filters are highly used tools when searching
02
Website Architecture
Key Takeaways
01
All participants used a combination of multiple apps to find, book a cab or rent a car
02
Users value the ability to detect the damage to car immediately which reflected a sense of satisfaction for the rent-out feature
03
Major products in the market lack desirable features and feel impersonal, outdated and untrustworthy
04
A compare feature with relevant information is paramount when searching for cars.
05
Too much information on screen makes users feel overwhelmed, they'd like a more curated experience
06
Irrelevant suggestions feel impersonal and clutter the UI, filters are highly used tools when searching
Key Takeaways
01
All participants used a combination of multiple apps to find, book a cab or rent a car
02
Users value the ability to detect the damage to car immediately which reflected a sense of satisfaction for the rent-out feature
03
Major products in the market lack desirable features and feel impersonal, outdated and untrustworthy
04
A compare feature with relevant information is paramount when searching for cars.
05
Too much information on screen makes users feel overwhelmed, they'd like a more curated experience
06
Irrelevant suggestions feel impersonal and clutter the UI, filters are highly used tools when searching
04
Illustrations based on Brand Identity
Challenge
IntelleXt did not have its own illustrations to be used for explaining ther concepts. The design team wanted more customized visuals that should be fit on their technology and exisiting brand identity.
Process
By working with senior designers and another coworkers, I was provided each concepts and context to make visuals. Another intern conducted pencil sketch and we discussed about how we could convey the contexts into narrative way. After sketching, we share feedbacks with other designers and revised them for finazlied sketches, and then I turned into the high fidelity version using Adobe Illsutrator. After the process, we were get final feedbacks about the color tones and positions from senior designers.
Key Takeaways
01
All participants used a combination of multiple apps to find, book a cab or rent a car
02
Users value the ability to detect the damage to car immediately which reflected a sense of satisfaction for the rent-out feature
03
Major products in the market lack desirable features and feel impersonal, outdated and untrustworthy
04
A compare feature with relevant information is paramount when searching for cars.
05
Too much information on screen makes users feel overwhelmed, they'd like a more curated experience
06
Irrelevant suggestions feel impersonal and clutter the UI, filters are highly used tools when searching
05
Visual Design Guideline
Challenge
The color system, typography, and components of use cases were not finalized while other design elements were added as homepage and platform were revising.
Process
By working with senior designers, I was provided a previous visual guideline. After finalizing illustration and main website pages, I updated more colors that were used in the main page, white paper, and illustrations, and also, I revised the type sizes consistently by minimizing odd numbers of the units.
First, what is the UI Demo?
UI demo is an internal webpage to help C3’s product designers check the status and ability of the UI components.
Problems we faced.
The version 8 UI Demo website(previous version) had a lot of UI components and more than +200 pages. Users had difficulties finding a specific UI because of the confusing and not user-friendly navigation.
The reason were that many UI components were not grouped in an organized and consistent rule, and all of the components were listed vertically with long navigation that made users scroll forever.
• Excessively long navigation
• Unclear hierarchy
• Deeply nested components
Solution
Global navigation and side navigation; it can be grouped in one navigation or separately located.
Side navigation menu to clearly show the complicated navigation hierarchy in multiple levels of the navigation items such as primary, secondary, and tertiary level items because we inevitably needed many pages for all components.
Next process
1
Research
2
Usability test
3
Reorganize information hierarchy
4
Final design exploration and prototype: how we made a design decision
5
Final & Implementation
02
Research
Common pattern / Clustering
After researching about many design system websites navigation pattern, three common patterns of navigation layouts were found.
In the case of Option 1 layout, global navigation on the top is key to open a side navigation. The global navigation includes main items such as components, foundation, token, and data visualization. With this option, the side navigation area can save space because the side navigation only shows corresponding sub-items of the main item that is already clicked on the global navigation.
Option 2, there have a few of action buttons in the global navigation, such as Search, Theme, and Language. But in the side navigation, it includes main nav items that are already mentioned above (component/foundation...etc).
Option 3, side navigation is busy with too many items. To conduct a usability test effectively, we narrowed down to only options 1 and 2.
02
Usability test with new options vs Current one
We conducted a usability test to validate the problems that we had in the original navigation design and compare a few options for usability issue.
And also, Option 1 has a lot of advantages compared to others.
It can save the space effectively of the side navigation area because it only shows chosen items selected at the Global header.
Conclusion
Conclusion
Decided to narrow down to OPTION 1 layout.
03
Reorganize information hierarchy
Since we had a complicated structure with more than +600 nav items and pages nested unclearly, it needed to reorganize with a new architecture.
04
Design explorations
How we made design decision
Eventually, our necessary components were organized into 3 levels (primary, secondary, and tertiary), which means that we needed some elements to distinguish those different levels clearly. At the same time, those elements should be consistent with other UI designs in our other products. The process was complex so I would like to introduce how we made decision one by one.
Final choice is like this,
After choosing indicator style, side navigation width should be decided.
To choose the width, I considered the balance between content area and navigation part.
Besides the width, it needed to decide to choose how the default status looks whether collapsed or expanded when the user opens the UI demo page.
Type sizes and font weights can be decided by considering balance between different levels of items.
Typography for the Primary item is a very critical design element because it provides the current page information for the user repeatedly so that it should be differentiated from other level items to not make users confused in hierarchy.
05
Final Demo
06
Design Documentation
