ADDA LAB is a network of engineers, architects and creators passionate about merging reality and virtuality into meaningful products, services and experiences.

Their website, however, didn’t reflect this dynamic. It needed some restructuring and a visual boost to take it to the next level. There was no structure to the content. It amplified confusion rather than coherency.

The task was to design from scratch a new window for a new product on their existing web site. However, as a result of my initial assessment and action plan for the new window, I was asked to apply the same design approach to the entire website. Reflecting the value of the company and facilitating a positive user experience was my top priority.

I led the design and prototyping development for this project from beginning to end. I worked with a communications specialist during the initial ideation phase and with the Senior Product Manager throughout the 4-week project.

I began by analyzing ADDA LAB's website. This helped me mapping out the site and identifying key problems in the current website. After figuring out the pain points the next step in the process was to decide the mood and expectations for the site. Moving on, I looked around for inspiration and references. I focus on understanding what factors make other websites effective and generate a better experience. After all the competitive analysis and internet research I had a good idea about how I wanted the website. Then I decided how I wanted the information to be structured and moved onto some rough layouts.

Before starting any page, I first develop a design system with the colours, typographies and text styles I will use to help me keep the website consistent. Next, I work on the common elements of the site, such as the navigation bar and buttons. The next step in the process was to explore possible design alternatives and come up with a high fidelity wireframe in terms of how the content hierarchy would be displayed. After a few circles of feedback, the following phase was developing the details; the text hierarchy, graphics, as well as images, required to end up being coherent with the overall look & feel and delivering the message precisely.

After analysing the website, I felt that the landing page was not answering the following questions: What we are, who we are, what we do, how we can help you. The solution they needed was to communicate ADDA's value proposition with clearer messages as a good landing page should be able to answer any initial questions the person might have. This information needs to be structured logically to allow users to scan the page quickly.

The banner with the logo is removed from the landing page as it does not explain anything. It is replaced with a Home screen balancing the brand statement and illustration. I also added a text which tries to further describe what ADDA is. Having a text which gives the viewer the info they want, where they want it is essential. The navigation bar is integrated with the background and the hamburger menu disappears and expands.

Finally, the communication and copy strategies are improved. Since the main outreach channel will be the web, it is necessary to simplify the message so that the company and the services it offers are better understood. All this by simplifying the visual load and giving it a fresher and more start-up-like appearance.

If we continue with the scroll we will arrive to a banner with the CTA that will take us to the new main services page that ADDA will offer. This responds to the problem that they did not have a page with a clear and established user flow. Their only tool was a window with a linear scroll with all the information thrown in. They need to implement different windows for each section.

This new page describes the relevance of the service for customers and the importance of the service for the company. It is also accompanied by functional 2D animations to aid understanding of the service.
Consistency with the rest of the website is also maintained. A section is added to showcase other work done by ADDA to support its credibility.

The about page is redesigned keeping the same information. It follows the same grid and chromatic system.