UI/UX DESIGN
E-COMMERCE SITE REDESIGN
ECOMMERCE SITE REDESIGN
Graphic Products (GP) specializes in producing and distributing premium DuraLabel printers, safety signs, and safety labels renowned for their superior quality. The company assumes complete ownership of the entire product and service lifecycle, encompassing everything from conceptualization and development to manufacturing, marketing, sales, and support. At its core, GP is dedicated to fostering a culture of safety, enhancing workplace efficiency, and facilitating effective communication.
Problem & Scope
The existing B2B ecommerce website header features a singular product drop-down menu containing all products and accessories. According to data research and analytics, approximately 70% of GP customers continue to place orders via desktop. However, the default concealment of the first-level product categories presents a challenge for users in promptly identifying the site they have accessed, necessitating a hover over the main navigation. This lack of immediate clarity impacts users' grasp of the site's nature and the available product catalog options. Furthermore, the dropdown list menu's structure lacks effective organization, resulting in difficulties in locating content within each category, particularly within the printer's dropdown menu. The use of image anchors dominates the list, making it arduous to access supplies underneath. Additionally, the article search field remains visible solely on the resource page, often leading users to input article keywords into the product search field, yielding no relevant results. It is advisable to relocate business hours to the footer for enhanced visibility.
In the mobile interface, certain adjustments are necessary. Moving the business hours and contact number to the contact page is recommended to optimize screen space. The navigation lacks clear demarcation between individual sections like products, account, and support. Furthermore, once users delve into sub-categories, a discernible indicator for returning to upper categories is absent. Additionally, breadcrumbs do not appear on the mobile device interface. These considerations highlight the need for mobile-specific refinements to ensure a seamless user experience.
I am tasked with redesigning GP's website to enhance user navigation and facilitate easier discovery of the appropriate products and resources. The highlighted areas signify the specific aspects that require improvement in the new design.
* circles indicated the areas that need to be made improvements.
User Experience Research
Throughout the process of user experience research, I meticulously gathered data across three key domains:
-
The online shopping behavior of B2B users.
-
Their anticipated flow structure preferences.
-
Valuable insights from both successful design approaches and pitfalls observed within benchmarks and competitor offerings.
In addition, I meticulously monitored organic traffic and closely observed user online journeys for the GP website through the utilization of tools like Inspectlet and Google Analytics.
* During this phase, I collaborated extensively with the sales department, marketing director, and SEO expert to gain comprehensive insights into the functionality of the current website. I collected pain points from each individual, while also conducting thorough competitor analysis and benchmark studies. Each team member contributed from their unique perspective based on their respective roles, offering distinct viewpoints on areas in need of improvement. Those directly engaged with customers provided valuable insights into customer expectations and pain points. The marketing director's insights encompassed broader business goals, short-term strategies, and competitor landscapes. Leveraging the expertise of the SEO specialist, who possessed a deep understanding of organic links, search keywords, and effective site structures for SEO ranking, further enriched my understanding. This collective information fostered a more profound analysis, enabling me to align business objectives with customer satisfaction.
Personas
I conducted interviews with various stakeholders, including the sales team and marketing director, to gain insights into the backgrounds, education, job roles, inquiries, and pain points of current GP customers. Additionally, I engaged with engineers to delve deeper into GP products. The following personas have been developed based on the comprehensive information gathered by both myself and my team.
Benchmark Study and Competitive Analysis
According to the findings in the Baymard case study report, 31% of websites exhibit tall and narrow multiline hit areas, lacking an intelligent vector-based hover-intent system. Additionally, 37% of sites either house the complete product catalog within a single main navigational item or omit main navigation categories altogether. This results in users being unable to quickly discern the site's primary product categories by simply glancing at the main navigation. Drawing from my extensive research and analysis, I assessed GP's competitors' websites across nine functional and usability dimensions, culminating in the creation of a comprehensive competitive analysis chart.
Card Sorting And IA
I engaged a total of 12 participants to partake in a card-sorting exercise. I prepared the cards and provided clear instructions on the card sorting process, also posing specific questions about their grouping rationale. Subsequently, I formulated an Information Architecture (IA) derived from the card sorting outcomes. Presenting this IA during a meeting, I sought feedback from the manager, director, and developers, culminating in collaborative discussions to arrive at a definitive and informed decision.
Card sorting result:
* Card sorting is an very important step. It helped the company to understand customer's mental logic and it's a foundation to build website architecture. Before I took this job role, the company didn't do card sorting when built current website. The current web structure is drawn from business logic and got some confusion while searching around the website. I convinced marketing director and SEO expert to start with card sorting in order to understand customer mental logic and I received very positive feedback.
Sketches and Wireframes
Following the establishment of each category name within the header, the subsequent step involves devising a user-friendly structure for the dropdown list. Printers represent the primary products offered by GP, and for this category, I have opted to retain the image anchor option. This choice enhances visual prominence, attracting users' attention to this crucial list. I have integrated vertical lines to demarcate distinct sub-categories, aiding users in distinguishing between sections.
While employing image anchors for all categories could potentially clutter the dropdown menu, impeding content discovery beneath each image anchor, I have concluded that option 1 is the optimal solution. Incorporating product types with shared attributes as filters, rather than categories, also holds significance. Additionally, meticulous consideration is given to selecting the pertinent product keywords under each filter type to enhance SEO traffic. Collaborating with an SEO expert and analyzing competitor websites, I have curated a comprehensive product name list for each filter type, aligning with best practices.
* When crafting the drop-down menu, the marketing director expressed a preference for incorporating more image anchor features into the product list. To address this, I proposed three different options and presented them during the meeting, illustrating why an excessive use of image anchors wasn't conducive to an optimal design. This approach tended to clutter the entire menu and posed challenges in locating text, which aligned with a key issue observed on the current website.
Despite this, I always remained open to adapting my viewpoints whenever insights from the director, stakeholders, or developers offered a more cogent perspective. For instance, when redesigning the "Request Sample" page, I initially suggested combining customer name, email, and mailing address in a single step to streamline the process. However, the director favored an approach where only the name and email address were initially collected, with the remaining information to be completed in a subsequent popup window. This method was deemed simpler for users initially, ensuring they weren't overwhelmed by a multitude of request fields. By implementing this approach, even if users decided not to complete the popup form, GP would still have their email address for future email campaigns. I readily embraced this decision, highlighting my appreciation for collaborating with cross-functional team members whose diverse insights guide the design process toward the most effective direction.
Wireframes: dropdown list for each product category header. Based on benchmark study and observation from card sorting, I put few same names within multiple main categories by following mental model. When designing IA and subcategories, I focused on these area:
-
Make product categories the first level of the main navigation
-
Ensure category and subcategory relationships are visually indicated in navigation menus
-
Site-wide courtesy navigation should be visually separated from the main product navigation
-
Consider including resources and guides in the main navigation
-
Main category options should be selectable and point to a page featuring sub-categories
-
Dropdown menus should have spatial indicators
-
Consider displaying very popular filters as categories
HEURISTIC EVALUATION
It’s better to do heuristic evaluation earlier and should evaluate multiple times during the design process. It helps to find mistakes and make corrections as early as possible to reduce development costs. I invited the marketing director who was involved in the current website design, the SEO expert, the marketing manager, and the developer to participate in this evaluation throughout the entire design process. The main evaluation focus on these areas but is not limited to:
-
Visibility of system status: keep users informed about what’s going on with online chat and online support
-
Match between the system and the real world: speak the user’s language with words, icons, and infographics
-
User control and freedom: always provide different options when the user performs some actions
-
Consistency and standards: keep navigation names, icons, colors, and fonts consistent throughout the entire website
-
Error prevention: present users with a confirmation option before they commit to the action
-
Recognition rather than recall: Minimize the user’s memory load with easy instructions for use of the system
-
Aesthetic and minimalist design: keep clear and short information, not contain irrelevant content
PROTOTYPE AND NEXT STEP
This is the redesigned prototype with new styles. Next, I will create an interactive demo and do a usability test with participants. Then make necessary adjustments based on feedback; create a high-fi prototype, style guide library for developers, and document all desktop, laptop, and mobile devices work. Then move on to the whole website re-design phase. The image below shows the comparison of new and current header designs.
Besides making the header more user-friendly, I also have added a few new features: add favorites, quick order, carrier account, FAQ, etc.
Before
After
Before
After
My Role
• Research
• UI/UX design
Collaboration
Marketing manager, director, sales rep, engineers, SEO expert, developers
Tools and supporting materials
Sketch, inVsion, Adobe suite, inspectlet, google analytics, Jira,
Benchmark study, competitive analysis, the ultimate guide to B2B marketing in 2020, etc.
Being the sole designer, I collaborated closely with the marketing manager and director, engaging the sales department in interviews to gather valuable customer feedback and identify pain points. Working alongside engineers, I delved into understanding our products, employing specific software to track users' online journeys. My collaboration extended to an SEO expert, utilizing Google Analytics to monitor organic links and customer shopping behaviors. Additionally, I collaborated with developers to address technical and logical concerns based on prototype demonstrations. The following offers a concise overview of my journey encompassing research, interviews, card sorting, heuristic evaluation, information architecture creation, wireframing, mockup development, and prototype iterations.