Relaunching a Concrete- Solid Website and Online Customer Portal

Client

Surface drainage systems manufacturer based in Austria

Role

UX Designer, UI Designer

Technology

Website, NEOS CMS, Customer Portal

Developed in

2019 til 2020

A web relaunch project that evolved into three separate projects because we have identified what our client and their users need: A functional website, a customer portal, and an online mapping tool to connect internal data system with both of them.

Problems

Unresponsive and outdated Website​

Unorganized Product and Information Structure​

Inefficient Communication Workflow between Supports and Users​

Unorganized Internal Files and Information Structure

Inconsistent Online Presentation

UX Process

research -

A. Research

– Qualitative analysis
– Competitors analysis
– Business Needs
– Technical Constrains

B. Define

– Personas
– User Stories
– User Flows
– Info.Architecture

C. Design & Prototype

– Wireframes
– ClickDummy
– Standup Meetings

D. Test & Repeat

– Feedback rounds
– Design Correction

 

Solution

1. User Centric Design & Development

We were working closely with the stakeholders: our client and their users. User Interview was one of the first parts that we did to understand their behavior, workflow, expectation, pain and also love points.

We were also looking closely at data that has been gathered by the website over the year and decided which pages needed optimization and which browsers we still need to support in the next roll-out.

Persona

We created Personas as a tool that helps us designing the experience. At the end the end products are for them, and not us.

System Architecture

We looked at how complex the workflows were and how the systems worked together and tried to simplify it without sacrificing any functions.

 

 

 

2. Mobile-First Design

We have learned that users do quick research using their phone. Thus we provide only the most important information at a glance for our mobile users. Whenever they needed to go into detail, they will use their desktop or laptop. This finding helped us shaping a better experience for anyone browsing the website using small or wide screen

Google Analytics

Beside user interview, we also looked at the real data regarding user browsing habits and such using Google Analytics

Thumbs Analytics

Since we wanted to improve the mobile experience, we tried to apply the finding of the following thumb analytics for easier navigation

Left-Hand Navigation
Right-Hand Navigation

3. Customer Portal

We wanted to abolish E-mail as a platform of communication since it’s out-dated, not user-friendly at all, hard to backtrack, and has other lots of limitation

With the new Customer Portal we provide a haven for both users and technical assistants to collaborate on their projects without thinking about data storage, availability and actuality

Wireframes & Interface Design

A Wireframe of a page helped us prioritizing information and functions in a single page. Interface Design cemented the concept that was created in the wire framing phase. 

Functions That We Really Need

With the help of the customer portal that is packed with functions that people really need, we help them to finish their tasks effectively and efficiently

Files & projects management in one place​
Direct support​
Timed-sharing function​

4. Mapping Tool

Mapping Tool helps keeping files and information on the website and customer portal up-to-date. Before the files needed to be uploaded manually to the CMS to update them, and then any users that have requested the file in the past sometimes were notified separated per E-Mail by the customer support.

The management of content now takes place in one place only, thanks to the mapping tool.

Takeaway

It was one of our 2019 highlight projects and one of my most hardest and complex UX and UI project yet. I spent most of my time researching and asking questions since surface drainage system was an alien topic. 

I learned a lot how a simple thing like drainage system that we barely see also has a very important role in our life. This website is aimed to bring market visibility and thus also revenue to our clients, but we also want to ease the complex works of our personas: specialist planners, architects and investors. 

Graphic: Personal | Wireframes: Personal | GUI: Personal | Illustration: Undraw | Photos: Unsplash | Mockups: Behance