Ilerra website redesign

Challenge

Having a nice-looking, easy-to-use responsive website extremely important for any business, because it provides the assurance that the company is growing and on top of the latest trends and technologies.

At Ilerra, a Software development company where I had been a lead designer for over two years, we needed to redesign our outdated website to better sell our audience on using our great products and services.

My Role

On this project, I served as a UX designer, UI designer, graphic designer, and information architect. I collaborated closely with our awesome content writer, and we briefly worked with a great UI developer, who developed the site’s energetic and fresh look and feel.

Key Deliverables
  • Competitive Analysis Report, Sitemap and Information Architecture
  • UX improvements & recommendations
  • UX wireframe (low-fi)
  • Interactive Prototypes (hi-fi)
  • Styleguide and Specifications for Developers
  • Presentation

Research and Ideation

Competitive Analysis

I spent time looking at a series of competitor sites to identify our competitor’s strengths and weaknesses and to analyze and compare competitor content, SEO structure, social media integration, the way they present and sell their products, tone, color schemes, and UI style.

UX improvements & recommendations

After performing a competitive analysis, we had a better idea and understanding of what our competitors are doing. We used all the information we gathered about each competitor and identified particular areas that need improvement.

We realized that we need to redesign our sitemap and Information Architecture and we were able to have a list of UX recommendations to improve usability, SEO, readability, credibility, and layout.

Sitemap and Information Architecture

The team worked collaboratively to develop new information architecture and sitemap putting the user using the site at the very center of the process.

We needed to make sure that Users are going to find exactly what they are looking everytime they visit our website.

Prototype and Testing

Wireframes and a basic prototype

I sketched two basic wireframes for the primary pages of the site, and while on a hangout the core team moved content around and talked about our messaging flows.

We had two different versions of the information architecture to be able to do A/B testing to make sure that Users are going to find exactly what they are looking everytime they visit our website.

Interactive prototype and A/B testing

I used Invision to assemble the wireframes into a clickable prototype of which became the primary way we communicated about the project and was a huge asset to our  UI developer. Then we ran the A/B testing to know which design works best.

Here is the winning wireframe of the homepage:

Hi-Fi and Production

Creation of style guide:

I worked with Amu to create and tweak our UI styles from a UX perspective. Then we created a style guide based on the comps that we used for the remainder of the project. Here is a chunk of it:

Typography

Montserrat regular - Headers

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Open Sans regular - Body text

Aa

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z
a b c d e f g h i j k l m n o p q r s t u v w x y z

Color Palette

#E6351F

#730077

#1B1B1B

#584E57

Icons & Illustrations

The illustrations and icons are an important part of the design. They communicate ideas and concepts that should not and sometimes cannot be communicated with words. Furthermore, they allow consistency of the visual aesthetics that help build the users’ trust and produce moments of delight.

Result

Ilerra website now is Looking beautiful and professional, and we are all very proud! It does a much better job at describing and selling our products and services, and it looks visually cleaner and much more vibrant.