Project Brief

Project Timeline

March – May 2022

Project Type

Website Redesign


UX/UI Designer

Usman Fiaz

Front-end Engineer

Liwa Alex Saputra

Software Engineer

Bodgan Spinean

My Roles

Art Direction


Website Redesign

The speed of learning is a new competitive advantage in today’s world. SYMSON started as a spin-off from the Erasmus University Rotterdam to empower organizations to learn at high speed. A team guided by Prof. dr. Felix Janszen began to translate scientific knowledge into practical solutions for businesses.

This is a story about my journey of reimagining a corporate website as user-centered design. Let’s get into it!

Design Challenge

In heuristic evaluation, I synthesized that the existing website lacks visual appeal and predictability which were bearers in attracting the targetted audience. It amplified confusion rather than coherency.

So, I needed to create a system that could logically represent a wide range of content they were providing to the audience. And also create a visually appealing and modern design that will enhance brand personality.

The Process

Given the multitude of business requirements and constraints, it was extremely important to have a business vision and define a design process in accordance with it. In the design process, people should be the hero of the process. Because they know what problem they are facing and how that can be solved. So, I distributed the design process in two phases;

1- Discovery                    2- Delivery

“The designer does not begin with some preconceived idea. Rather, the idea is the result of careful study and observation, and the design is a product of that idea.”

-Paul Rand

Discovery Phase

It is important to identify the real problem first. Many times designers fall prey to proceeding with pre-assumed notions which often results in failure. As Don Norman says “Designers are trained to discover real problems. A brilliant solution to the wrong problem can be worse than no solution at all: solve the correct problem.” Always take a deep dive to research and know more and more about the problem. Learn about the users’ needs, capabilities, pain points, and business problems.

Step 1 - Begin

To begin with, it was necessary to understand key stakeholders first. Initially, I conducted a secondary research and competitor analysis to learn about the business so that I can prepare more relevant questions for the business owner and the users.

     Key takeaways;

  • Business owners had a range of services to offer but they were not being communicated effectively and users were not availing of most of them.
  • In the existing system, connection with users was more transactional but owners wanted it to be personal to gain loyal users.
  • The existing design system was not able to anticipate users’ needs and provide the relevant information.
  • Users couldn’t easily figure out about the services and their utilities in the context of their businesses.

Competitor Analysis Summary

While analyzing the competitors, I synthesized that despite the fact that Symson was offering better prices and more features like seasonality insights, and import/export APIs, they were not able to engage enough users. Obsolete website design and poor content structure were holding back. By working on these shortcomings, Symson can easily meet its business goals.

After documenting the insights, it was all set to move toward the next step.

Step 2 - Site Map

Based on the information collected in step 1, it had become relatively easy to simplify the user flows, declutter the mess, and remove ambiguities in the existing system. This, eventually, led to designing an enjoyable experience in accordance with the business goals.

Final site map

Step 3 - Wireframing

After knowing WHAT, WHY, and HOW, it was set to proceed with wireframes to build initial design concepts, the wireframing process involved a series of feedback and iterations but it was pretty easy and fun exploring different ways to eventually meet the design goal.

In design do not immediately rush for the solution. Do small simple iterations and gradually learn from their impacts. Eventually, the results will be bigger and better. The goal was to structure all the information logically which makes it easy for the user to quickly understand what’s happening on each page.

Wireframing based on grid

Delivery Phase

If you go through extensive discovery processes, such as the above one, visual design processes are more fun and meditating. Using the final wireframes, which went through a lot of feedback and iterations, designing UI was an enjoyable experience.

Design Handoff

Delivering design is more than just sharing a design file or Figma link, for that matter. It’s important to clearly define the design language and be in synchronization with developers while the project is in the development phase.

Design Guidelines

Hi-fidelity Prototypes


Refresh and modern website design helped to achieve business goals. Metrics were carefully analyzed before and after the deployment of the new design. The updated design maximized the website visiting rate by 125% and the average bounce rate decreased by 45%. Most importantly, it helped the company to effectively present all of the services, and users’ feedback conveyed that they were now able to understand the use and impact of all those services in the context of their respective businesses which increased sales.


  • Users understand their problems better so listen to them instead of lecturing them.
  • Validate all assumptions to be on the same page with stakeholders.
  • Customizing illustrations for this project was something super fun.
  • Lack of domain knowledge should be improved to deliver better results.


Workmajig – 02/03