Background

I joined Walulel as a UX Designer in November. I was brought in to help with the company's push to being a more user-centered design company, to help with the UI design of their products and to help with their user research efforts.

One of the first design projects I took on was Walulel homepage.

The website had a lot of issues as far as visual design and information architecture. There were a lot of inconsistencies as well as web broken links and too much text in some sections.

Project Goal

The goal of the project was to redesign the Walulel website to provide a better visual experience and create a better information architecture for the website

Auditing The Homepage

The first thing to do was assess the entire website and find out everything that needed fixing. This was the look of the previous website

Problems on the website included:
- No specific Call To Action
- Incomplete Product Listing
- Broken Links
- Too many navigation links which didn't showcase Walulel's products and features
‍
After the initial audit, we researched other modern websites to see what might fit in to the new redesigned website. Most modern homepages all have a “Hero” section which have written copy that outlines what the company is about accompanies with an image or illustration. The Webflow website is a good example of a homepage with a "Hero Section".

After researching other websites and assessing what the new Walulel website would need, we started sketching out the new website. The new site would have to show off the product offerings by Walulel as well as the services we offered. Each product would have its own page to further detail what features it would have.

Information Architecture And Wireframing

After sketching out the website, we started working on the wireframes for the site.

The new design would incorporate a "hero section" with a Call To Action button with a "What We Do" section afterwards detailing what the company does.

The next section would be "Our Products" which would feature the products at Walulel and then a section for "Who We Work With" and then finally the footer section.

Most of the time was also spent on figuring out the information architecture for the entire website.

We also had to consider the design for our privacy policy and other information (we collect data so that section is important)

We went through a lot of iterations for the navigation section and deciding what information would be more relevant to visitors to the homepage.

After working on the wireframe for the homepage, we designed wireframes for other sections of the website.

Wireframing took almost a month and half to complete as we went back and forth on iterations before finally settling on the right format as far as information and design.

After finalizing the wireframes, we then moved on to the hi-fidelity screens.

Hi-Fidelity Design

With the hi-fidelity, we opted to sync up and use the Walulel’s colors which were a variation of Orange, Blue and Black. These colors were also incorporated with the illustrations used in the design.

First, we experimented with using some self designed icons but later opted to use other illustrations which were more versatile and allowed us to spend less time designing our own illustrations.

Below is the hi-fidelity design for the "Hero" section and the "What We Do" section which incorporated more illustrations and the Walulel brand colors.

The New Walulel Website

After a couple of weeks of wireframing and updating to hi-fidelity, all the designs were handed over to our front-end developer who did a great job coding everything.

After almost three (3) months, the new Walulel website was finally launched and went live.

Of course, this is version 2.0 of the new website. Subsequently, we could be adding in new items or services in the future. Also, other design improvements will be made going forward including improved UX copy and visuals. Design is never finished after all.

You can check out the Walulel website here