Design Process

A Glimpse

1. What

2. Why

3. How

Optimations is a SAAS company, that offers varied smart technological services in manufacturing, artificial intelligence, supply chain and procurement, eco friendly energy and effective work spaces. What they needed is a responsive website that loads up fast throughout the globe with interactive features.

1. Target Audience

Optimations targets B2B clients not just in USA but all over the globe. Therefore, the website needs to cater to all browsers and screen sizes. The design needs to look clean and legible for an universal audience.

2. Research

During research, the main goal was to what constitutes a SAAS consulting website, the icons associated with the services, the jargon of the industry, branding, browsers used, screen sizes used. I had to use the Google Analytics tool to determine the global usage for screen sizes and browsers used.

3. Ideation

Ideation is an important step for any website. This the planning stage that determines the execution of Information Architecture, branding, the length of navigation, page layout while making adjustments for future modifications not just for one screen size but several.

4. Sitemap

Sitemap went through two iteration due to new product being introduced during this process. Where it was four services offered, now five services were offered. I used all the 4 brand colors to show 4 different services which had to change to single color for all services.

5. Design

With the Sitemap changing, navigation in the design changes as well. The layout for the introduction page like home page describing the services changes to accommodate the fifth service.

6. Development

The Client was receiving plenty of spams. I added recaptcha to secure the page from bot attack in the Contact Form.

The second challenge was to ensure page load speed by opting the best theme and plugins with lean code. Minifying the files also help increase the page speed.

Changes to Sitemap

DETAILS

The process involved finding the target audience, researching on other consulting websites, ideation, wireframing/design and development.

Other technological necessities included making the website secure, provide Content Delivery Network option, making it SEO friendly while adhering to Optimations branding with fresh and modern look.

Branding

Styleguides give a fair idea for a developer to initially set the colors, fonts, forms and layout. When coming up with a styleguide, I usually think from a web development perspective.

Optimations has primary colors, excessive use of which may make the website look playful and childish. Our goal was to give the website a serious tone. Upon careful planning and layout design, google web font – Roboto was chosen for the global audience, varied header font size shows hierarchy of text, darker colors for linked text was chosen for legibility along with link hover color.

As the saying goes, one picture is worth a thousand words. Images and image backgrounds are an important aspect of web designing. I learned this during my internship at Birdsong Creative, no element on a web page should be present if it does not add value to content.

Styleguide also provides the developer a fair idea of the looks of the navigation, sub-navigation, pages of the sub-navigation, the form fields, footer, pagination, buttons and other elements on the website.

Design for screen sizes: 1440px, 1024px, 768px, 360px

Visual appeal for various screen sizes and layout design for all pages.

Icons

Icons went through three iterations to get its final look. Some of these icons go on different pages, therefore, we see they have slightly different style.

optimations - Icons iterations with Before & After

Development

1 draft, 3 edits and 2 weeks later, the website was launched. Feedback from regular users, UX designer, partner and analysts were implemented.

I’m proud to have completed this project in a very short time while working on other projects.

Website

Visit Optimations

Challenges

Design Challenge: After the completion of page layout in the design process, a new service was added. The layout of 5 elements on a page will look completely different from 4 elements. Therefore, I had to redesign the sitemap, navigation menu and pages.

Developmental Challenge: Contact theme and plugin developer as certain elements on the website were not working as expected. Juggled with tight deadlines on other projects while working this project.

Physical Challenge: Client is out of state. Therefore, only virtual meetings were possible not to mention different time zones.

External Factor: Covid-19 pandemic.

Personal Factor: Deaths in the family, Get Covid vaccine done during the project.

What do they say?

Website looks good.
Impressive.
Graphics looks good.
Neat Animation.

Optimations Website Redesign – Process