IBS Electronics
UX/UI Design:
Sitemapping, wirewrames,
& interface design
TIMELINE
12 weeks
TOOLS USED
Sketch / Figma
Summary
IBS Electronics operates a highly effective global sourcing network with offices in Asia, Europe, and the Americas, providing a broad range of integrated sourcing solutions to leading original equipment manufacturers (OEMs) and contract manufacturers (CMs) across a range of industries. IBS Electronics aids in the design and development of custom component solutions for any project—regardless of time-to-market, price point, and performance requirements. With over 30 years in the industry, use the best platforms to suit users customization needs.
The Challenge
With no major website updates since 1994 on an old Wordpress site the look was dated and making it hard for users to find what they needed with growing technology. Keyword searching and parametric were the most important, but finding ways for the user to login, checkout, or use other tools to finish purchasing is what IBS needed in order to increase revenue and improve overall purchasing capabilities.
My Role
As the lead designer, I guided the project from inception to completion, working directly with the client and collaborating closely with team members. Once the Statement of Work (SOW) was signed, I assumed responsibility for leading the design process and serving as the primary client contact.
The project began with a kickoff meeting where the client and team aligned on business objectives, content needs, processes, project phases, development goals, and site analysis to identify gaps. The project was scoped for 6 months with weekly meetings to streamline the approval process, design timeline went forward with the below:
Weeks 1–6: Focused on wireframes and site architecture.
Weeks 7–12: Dedicated to high-fidelity designs, refining wireframes, incorporating feedback, and securing approvals.
Initial design efforts targeted key pages for analysis and creation, including:
Supplier Landing Pages
Product Category Descriptions
Hierarchy/Sitemap
End Markets and Applications
Solutions (content-specific)
Product Descriptions
Upon client approval of the wireframes and high-fidelity designs, we transitioned to collaborative scrums with developers to build the site using Kentico as the CMS. This phase revealed unforeseen barriers and required adjustments to integrations.
In cases of significant changes, I worked alongside the project manager to develop solutions, present updated findings, and propose new recommendations to the client, ensuring the project stayed on track and aligned with their evolving needs.
Sitemap
I began by analyzing the existing sitemap to understand the current site structure and how it was organized. Using insights from competitive research, I created a new sitemap designed to align better with user needs and expectations. This included updating terminology and simplifying verbiage to make navigation clearer and help users easily find what they’re looking for. The revised site structure prioritizes a more intuitive and user-friendly organization, enhancing the overall experience.
Style Guide
The next step involved updating the original styles to create a modern and polished look. This included integrating new fonts and making subtle adjustments to certain colors to enhance the overall design. The updated style guide was also designed to support developers by providing a clear and cohesive system for building the website's front end efficiently.
UX Design
Wireframes: Homepage and Product Pages
Homepage
Providing the client with a questionnaire on what was important to the company and design needs, next was to layer the site with cross marketing in hierarchy.
• Video/Slider
• Request for Quote
• Product Findability
• Markets Served
• Products
• Services
• Blog/Articles
• About
• Featured Manufacturers
Categorie/Series Pages
The current website makes it hard for a user to dial down to products they are looking for if not to searched. The pages are laid out with category > family > series > product. Each time the user dials down what they are looking for, the associated will filter down to categories the user has selected to keep them within the product they are searching.
•Manufacturers Associated
• Featured Products
• Featured Articles
• Markets Served Based on Product
Product Pages
The current website doesn’t provide any product information other than a printed PDF to download. Taking the information provided on the PDF and using a third party site for their product data, our team was able to integrate and provide more information to a user.
Wanting to keep users engaged and on the IBS website, I included related materials and videos associated with each product along with suggested products based and on the user search to keep the user engaged.
UX Design
Wireframes: BOM (Bill of Materials) Tool
IBS BOM
Previously, the BOM tool functioned as a form that sent a spreadsheet directly to IBS via email. Drawing on feedback from similar tools used by previous clients, I was able to implement improvements based on vetted client and user insights.
IBS specifically requested a history of purchases within the portal, separate from invoices and orders. To meet this need, data was extracted and reorganized into a dedicated section for easier access. Additionally, a new feature was introduced to integrate compatible parts, addressing another key challenge and enhancing the tool’s functionality.
Final Wireframe Thoughts
There are many more sections that were included in the wireframing process. The pieces shown were pieces that had more changes with challenging development integrations.
UI Design
Web Design: Homepage and Product Pages
Homepage
This client has set primary colors but was open to stretching secondary colors along with new fonts and styles to keep up with overall website trends. Since the primary colors are heavy and strong. I wanted to keep balance with modern, clean, and airy elements.
Usability will be reflected in the second phase since prominence is becoming more important for user ability.
Category/Series Pages
Keeping the site clean and modern, but easily navigable for the user. Following the wireframes closely and keeping easy findability.
• Manufacturers Associated
• Featured Products
• Featured Articles
• Markets Served Based on Product
Product Pages
Product pages needed to be engaging and easy for a user to quickly scan information to make the purchasing process quicker and efficient.
Making sure listed products were accecible for users to find items quickly and get through the checkout process. Phase two will include a parametric search along with more detailed product pages.
UI Design
Web Design: BOM (Bill of Materials) Tool
IBS BOM
Even after the wireframing process, adjustments often arise as clients see the design pieces come together. Additionally, minor details tend to surface during the development phase. For example, one overlooked aspect was the user experience when selecting items for quoting or purchasing. Questions about the type of messaging displayed and the steps required to proceed became apparent. Addressing this required additional thought and refinements to improve the functionality and ensure a seamless user journey.
Final Thoughts
This project spans a 5-year contract and remains in development due to significant changes made since its inception. After a year of work, the site has yet to launch, though a first-phase rollout is planned within the next six months. The Bill of Materials tool is scheduled for phase two, alongside enhancements to manufacturer pages and the parametric search. As the project progresses, additional opportunities for improvement, such as refining the shopping cart experience and the request-for-quote process, will be addressed.