Schurter AG
the client
SCHURTER Group is the world’s leading Swiss technology company ensuring a clean and safe supply of power, ease of use, and sophisticated overall solutions.
the project
- Information architecture
- Modules templates
- UX/UI
my role
- Information architect
- UX/UI Designer
problem statement
Schurter wanted to renew the 6yrs old website, re-organizing the information architecture, refreshing its contents and updating the user experience.
During previous 6 years contents and pages significantly increased as the company grew and changed its priorities.
The projects system we previously created needed to be updated in order to be consistent with the new stakeholder’s requirements.
solution in bits
With a solid co-design with stakeholders, we were able to iterate multiple times until we satisfied all requirements.
UX goals
Define best practices for a multi-language, multi-country website.
Develop a mega-menu and an advanced search.
Improve user experience and findability consistently throughout the website.
Define a new projects management.
Redefine information architecture.
Update design system with new UI.
deliverables
- User personas
- User journeys
- Funnel analysis
- Information architecture
- Sketches on paper
- Wireframes
The primary target is sellers and dealers who use mostly Windows computers and rarely or never mobile to view the website.
It also has a huge catalog with CAD drawings and datasheets that need a desktop computer to be used.
We decided therefore to design the website desktop first but keeping it consistent and usable for mobile users.
Process
Assessment
Through Google Analytics data, customer service data, stakeholder interviews, and user testing, we defined pain points and bottlenecks to be solved or improved to design a better user experience.
Due to the large number of items, we prioritized tasks and set the minimum viable product to be online within months.
Information architecture
Once all customer journeys were clear, we dedicated ourselves to cutting duplications, aggregating content, deleting useless pages (such as transitional pages), and designing a performant information architecture.
It was also important to give the feeling of unity between Schurter’s divisions, as they’re not separated units.
Once defined the bigger structure, we started defining contents.
User personas, scenarios, customer journey
Due to its complexity and variety of users, the website needed different scenarios, in order to provide complete information for all kinds of users visiting the website, whether they are first-time users or expert users.
We narrowed scenarios to 4 main possibilities, with a possible new client, an engineer looking for products, a researcher looking for a partnership, and a post-graduate engineer looking for a job.
Wireframes
We laid out a limited number of modules that would serve stakeholders’ need to be independent in content creation. Since there are multiple offices worldwide, we prepared a LEGO guideline with the proper usage of each module.
We also designed some layouts to be used as templates on how to use those modules we designed.
solution
With a solid co-design with stakeholders, we were able to iterate multiple times until we satisfied all requirements.
We also kept an eye on usability and findability. We updated the website to the latest best practices.
We developed reusable modules to speed up development time and improve maintenance (made internally by the client), providing better consistency of UI elements throughout the website.
We also focused on creating a usable and easy-to-use mega-menu, following the latest best practices. It conveys also marketing-oriented content, highlighting products or news.
We reiterated multiple times on the contact form, due to boundaries on several fields. It was mandatory to have many fields in the form because of SAP databases. We, therefore, decided to design a multiple-step form.
Finally, we had fun creating an advanced search that would collect all the info and pages that were scattered throughout the old website and didn’t find a proper position in the architecture. The advanced search shows also marketing content and is designed following the latest best practices on usability.
Last but not least, we had to come up with a solution for the multi-language and multi-country options, which is essential since it provides specific information based on location, such as contact information.
outcome
We were able to deliver the MVP with the new information architecture, mega-menu, header, and footer.
The website is frequently updated with new features, usually managed directly by stakeholders. This means that the website might differ from the original layouts, as it is partially out of our control.
learnings
With such a complex system with multiple stakeholders, marketing needs, and a variety of users, the main focus was usability at a large scale.
It was really difficult to define a primary user since each of them can possibly be the main user.
The website is thought to be useful for the seller, marketing people, management, content editors, engineers, and so on.
For this reason, we had to focus on different access structures perfect both for novice and expert users, whatever the reason why they’re visiting the website.
This project was developed under S'nce Group Sagl, who owns all the contents rights, and users are not permitted to use the materials (texts or images) in any circumstances and for any reason.