An iteration of a more user-friendly way to interact with MSI for post-sales services.
In this project, as MSI's UX/UI design intern, I am responsible for optimizing the process and visual design of the interactive platform between consumers and MSI after-sales service.
The main goal is to reduce the time of correspondence between users and customer service staff, reduce the workload for customer service staff, and increase customer conversion rate. By analyzing user data and feedback, I identified key pain points and proposed improvement strategies, including a more streamlined step-by-step process, enhanced guidance prompts and visual optimization to support users in obtaining after-sales answers smoothly. Through multiple design iterations, I successfully improved the consumer experience, reduced the workload of MSI customer service staff, and increased overall user satisfaction.
In this project, I followed the double diamond design process:
Who is the user?
👉🏼 Customers who purchase products from MSI
What are the users’ needs/motivations?
👉🏼 Get answers/someone to help with their questions/need
👉🏼 A Simple and easy way to contact to MSI window
What is the problem? Do we know the problem?
The original MSI "Contact Us" page only provided customers with an option to email customer service. However, due to the limited staff available at MSI's US official store and the significantly higher customer demand compared to MSI's resources, customers often experience delays in having their issues resolved. Additionally, the overwhelming volume of post-sale inquiries has resulted in a substantial workload for MSI's customer service team. This continuous cycle has led to an ongoing struggle, contributing to the stagnant customer conversion rate on the MSI US official store website.
Competitor Analysis
I checked the popular "Contact Us" pages of competitors such as Apple, Asus, HP, and Dell. These companies offer diverse contact options and powerful self-service tools.
What’s the goal?
📌 Enable users to efficiently find and navigate answers with minimal effort.
📌 Establish a user-friendly interface with a clear and intuitive visual hierarchy.
📌 Reduce customer service workload.
📌 Provide seamless navigation to relevant information or solutions.
📌 Enhance the overall user experience by prioritizing accessibility and usability.
📌 Build trust and reliability by offering accurate and consistent information.
📌 Minimize frustration by simplifying complex workflows and interactions.
📌 Ensure scalability of the solution to accommodate future growth or feature updates.
📌 Improve customer conversion rates by addressing post-sale inquiries effectively.
📌 Design with responsiveness in mind, ensuring compatibility across devices.
What is the restriction?
👉🏼 MSI cannot provide phone support due to the limitation of the customer service staff.
👉🏼 Stakeholders hope that the solution can be solved in the simplest way, that is, only by iterating the Contact Us page, rather than developing other auxiliary projects or products.
What are the channels?
👉🏼 Desktop and Mobile view 🖥️📱
How to address the problem?
My analysis focused on identifying opportunities to enhance usability for MSI users by simplifying navigation, integrating personalized support, and making the overall experience more approachable and efficient.
To address the problems, I came up with a solution that involved creating a more intuitive and simplified system for consumers to resolve or inquire about issues easily - button options-orientation.
We optimized the previously monotonous and one-way form by transforming the Contact Us page into a guided, button-based Q&A system, which can lead the user to find their solution step by step. This saved time by reducing the back-and-forth email communication between consumers and customer support.
What’s the FAQ?
Since I do not have access to the customer service staff's system, I visited the customer service department to collect the most frequently asked questions and needs of MSI customers.
Below is the Pie chart to demonstrate the percentage of the customer requests.
Based on the insights gathered, I established the following design goals to ensure the iteration meets stakeholders’ expectations and addresses users’ key pain points.
📌 Enhance User Navigation: Implement button-based navigation to streamline user access to information, reducing effort and ensuring consistency to build trust.
📌 Alleviate Customer Service Load: Guide users toward self-service resources, decreasing reliance on customer support and improving efficiency.
📌 Simplify User Experience: Design an intuitive interface with a clear visual hierarchy, aiming to resolve user issues within 3-5 steps to minimize frustration.
📌 Ensure Scalability: Develop a design system that supports future growth and feature updates, maintaining a consistent style across modules.
📌 Optimize for Responsiveness: Create a responsive design compatible with both desktop and mobile devices, catering to a diverse user base.
After analyzing and testing the best information architecture, page links, and interaction methods, I drew a Lo-Fi wireframe and discussed improvements and feasibility with my supervisor and engineer.
Sketch and Lo-Fi Wireframes
.png)
Design System
In order to ensure that the brand colors, font spacing, and each component I use are consistent on every page, I created a design system and laid down the basic design guidelines for future development.
Icongrapghy
Hi -Fi Prototype
In this iteration of the version, users can directly query their order status by entering their own order ID, or initiate a return request. They can also easily look up questions by clicking on the relevant FAQs. And of course, if further assistance is needed, users can still contact MSI customer service by filling out a form.
Real interaction on the website
👉🏼 MSI's customer service department experienced a 33% reduction in workload.
👉🏼 The customer conversion rate increased to over 10%.
Importance of Designing Scalable Solutions:
👉🏼 Ensuring designs are scalable while meeting immediate user needs.
Challenges of Limited Resources and Tight Timelines:
👉🏼 Delivered solutions aligning with business and user goals through close collaboration with stakeholders and engineers.
Future Outlook:
👉🏼 Exploring the integration of AI-driven support tools to further enhance self-service experiences.
Personal Growth:
👉🏼 Deepened understanding of the value of iterative design and cross-departmental collaboration to achieve impactful results.
