Overview
Design Challenge
Research Goal
Question Areas
Key Findings & Results
Existing Platform Analysis
Context: Web platform
Lenovo SmartFind is an online tool that allows users to search for information on Lenovo products and accessories. This platform provides detailed information about Lenovo products, including specifications, compatibility, and available accessories. It's a valuable resource for both consumers and sales seeking to understand Lenovo's offerings or find specific product details.
Due to the long and cumbersome traditional B2B procurement process, coupled with the large amount of information and complex structure of Lenovo devices, including different series, specifications and compatible accessories, users are easily confused by information overload, resulting in low search efficiency and high error order rates. So how can I optimize the information structure of the page so that users can easily place orders?
Since this is a revised system based on the early system, the research objectives are:
1. Improve the efficiency of users to find equipment and accessories. The challenges users face when searching for products include the compatibility of unclear searches, and too many options cause information confusion. Help users quickly find the right device or accessory by optimizing the search experience.
2. Reduce the probability of users placing incorrect orders. As a designer, I need to identify the key reasons that lead to wrong orders
.
3. Improve the overall ordering experience and increase conversion rates. Optimize the purchase process and page interaction through data analysis to reduce bounce rates, as well as study the different needs of both (B2B) and ordinary users (B2C) to provide a tailored ordering experience.
When I was doing user interviews, the main stakeholders included the product manager, the business team, the technical team, the marketing team, the after-sales support team, etc. Therefore, as a UX designer, I need to understand the business needs, user pain points to ensure that the design solution meets the business goals.
1. Inefficient search of equipment and accessories
Users often cannot quickly find compatible accessories, requiring manual input of the device part number.
The existing screening method is not intuitive enough, too many screening items or unclear classification, resulting in difficult selection.
3. The order process is complicated, which easily leads to users giving up the purchase
Some users reflect that their price and promotion information is not clear, so corporate customers need to inquire, the process is cumbersome, affecting the procurement decision.
Role: UX Designer
My Individual Contribution
I was the only designer on the technical team, and I worked closely with the developers to develop the system. In this project, I was involved in research, design, prototyping, and sometimes using front-end code to implement some simple static pages for product people to show. In this project, I learned how to work with developers to build the best product possible.
2. The compatibility information is not clear, resulting in an order error
Many users only find out after placing an order that the selected service is incompatible with the device, resulting in high return and exchange rates.
4. After-sales support is difficult to obtain, and users are not satisfied with the service process
Many users do not know how to contact after-sales support and need to jump around or find information several times.
Because at the time of doing this project, there was no screenshot of the original system, so I can only be explained through text.
1. Even though the background technical architecture has a database, the user is confused when looking for it, which reduces the actual functional value it can bring to the user.
2. Price and discount information is not intuitive, corporate customers need additional inquiries, increasing the cost and time of communication.
3. Lack of intelligent recommendation service: The system cannot automatically recommend compatible service based on user devices, resulting in users having to match themselves.
4. Without a shopping list, it is difficult to find the selected order and description.
First Iteration: Default Page
Select the warranty period later by keyword search(MT, MTM, Series, Sub-series). Add referral services and create your own. Or look for services through the product tree on the left.
The design of this tree will lead the user to view the line of sight lengthwise, and it is difficult to distinguish each level.
Duration: 3 months
Stakeholder Feedback
Product managers, engineers & sales said:
The level lookup of the product tree only allows the user to view the expanded level in a limited scope, if a user views the last level, then the entire page needs to be pulled to the bottom, which is a poor user experience.
“
Second Iteration: Default Page
This is the selected services page before iteration, where users can choose recommended services and build their own services, as well as additional services.
By default, the recommended service area changes from white to blue.
After being elected, if you want to remove, user can click the remove highlight button.
When one of the services is selected, the button color turns blue, and the number of years the content is displayed.
First Iteration: Selected Services
“
Second Iteration: Selected Services
Selected Services - Service Cart
1.1
Level 1
1.3
Level 3
1.5
Level 5
1.1
1.2
1.3
Stakeholder Feedback
Product managers, engineers & sales said:
If designed in this way, the future may involve responsiveness, which will greatly increase the time cost for development. Also, when I select one of the services, I want to see the price and part number, but it disappears?
Through iterations, when the service is selected, the background color remains the same, and the button turns blue while displaying the price, year, and part number.
The state of the mouse floating over the button.
After selecting the recommended service, click the button again if user want to cancel the service.
After selection, the panel remains white to ensure aesthetics in a responsive design without affecting the user's ability to view content.
After selection, more content is still displayed for the users.
1.1
1.2
1.3
1.4
1.2
Level 2
1.4
Level 4
Through iteration, the system unit category area is fixed in one location to maintain a streamlined and consistent layout. The product tree on the left shows level 1 and Level 2 product categories, so that the user's search line of sight is horizontal, improving the user experience.
As each level unfolds, the interface design ensures that the content of the page below is always visible and not obscured. At the same time, the interaction optimizes the user's eye flow, allowing them to naturally focus on the current area of operation without interference, thus improving the overall readability and user experience.
Reflection
Tools: Figma
1.1
Level 1
1.2
Level 2
1.3
Level 3
1.4
Level 4
1.5
Level 5
The biggest challenge
With the addition of new devices and tracking methods, the design must be scalable without overwhelming the user. Balancing functional expansion and interface simplicity is a challenge, especially with a diverse user base. Lenovo's global reach means SmartFind may need to cater to users from different regions, different languages and different ease of use requirements, and it is very difficult to maintain design consistency while ensuring seamless adaptation, especially when complying with local regulations and different user expectations.
What I did well?
I am very happy that the final high-fidelity prototype is online, providing more scenes and design elements for Lenovo's business design. So I think the overall user experience and ideas are done well.
Future plan
Depending on further business needs, I plan how to display services and shopping lists throughout the page, how to fold the product tree. In addition, design new modules: software.
The service selected by the user is added to the cart and they can clearly see if their order is compatible with the product.
Showing recommendation services, as well as part number.
Provides the function of direct copy, thus reducing the complexity of users when filling in too much.
1.1
1.2