IST - Website & Web shop redesign

Project goal

Redesign the responsive website and webshop.

Understand the needs of the different types of customers and stakeholders.
Realise a web portal that fulfils the needs of the customers and stakeholders.
Execute best-practice user experience and responsive design.
Improve the information and communication via the website.

My role and KPIs

Responsibilities and tasks:

Design a user-friendly web solution.
Focus group and workshop facilitation, incl. workshop planning and material preparation.
Create a questionnaire and analyse the answers.
UX/UI design and prototype creation.
Facilitate the concept validation and refine the concept
Detailed UI design and design assets.
Create epics and user stories.

KPIs:

Execute a client project as a lead designer and provide detailed solution design.

Project Timeline

Insight - Problem space

Methods:

Interview
Focus groups
Questionnaire

Outcomes:

Product vision
Personas
Features (needs) for each persona
Business value and technical certainty of the features

Conceptualising - Solution space

Methods:

Workshop
Participatory design
Concept validation by interviews
Concept validation by prototype testing

Outcomes:

Visualised Customer Journeys
Sketches for the solution
Prioritised features (basis for the backlog)
Wireframes and prototype

Detailed design and implementation

Note: Before I changed an employer at the end of October, I provided all the designs as detailed as possible. At that moment, the content was not yet finalized, and pictures were not selected.

Outcomes

Detailed design
Design guidelines and assets, incl. font and text style usage, colour usage, main components
Epics and user stories related to designs
Clickable prototype

Below, you can find before and after pictures.

Navigation

The old navigation did not have a clear hierarchy. In the new navigation, the entries were grouped:

the main navigation contained the services the company provides,
the secondary navigation above the main navigation was focused on the company information and
the top right corner was dedicated to the user to access their own account and their shopping basket

About us -page

New content structure to make information more accessible.
Use different UI components to group information and reduce the monotony.
Hiring and contact information are kept in their own entry.

Products and services -pages

Redefine information hierarchy
Reduced content so that important information can be found.
Combine the product catalogue, the product descriptions, and the webshop to make the navigation more intuitive and provide the information only in one place.
Use different UI components to group information and reduce the monotony.
Always indicate in the navigation and in the breadcrumb where the user is located in the system.

Product description and product details:

Users do not buy sensors based on how they look but on their features. Sensors can also be so small that a user cannot compare their appearances. For this reason, unlike, e.g., clothing web shops, users are shown detailed information instead of a picture of the sensor.

New feature: Product finder (product search):

A new feature
Make it more intuitive for the users to find the sensors they are looking for.
The search is done in 3 steps to reduce the amount of results and enable users to define technical requirements based on their needs.
The user is also able to do a traditional search to find a product, e.g. by a name

New feature: Product finder (product search):

A new feature
Make it more intuitive for the users to find the sensors they are looking for.
The search is done in 3 steps to reduce the amount of results and enable users to define technical requirements based on their needs.
The user can also do a traditional search to find a product, e.g. by a name.