Rebrand the company product Easybuild to Wave2

Skills: Prototyping, Adobe Photoshop, Adobe Illustrator, Typography, UI Design, Logo design, HTML5, CSS3, Bootstrap3, AngularJS
Timeline: 6 weeks

Objective:

To rebrand the company product called Easybuild to Wave2 by changing the logo, typography and the UI of the product.

Situation

At the time, Miles33 was in the process of integrating with a company it had acquired, called Wave2. Consequently, my team decided that Easybuild should now be rebranded as “Wave2” and my project was to redesign the product.

Requirements

The project involved creating a new logo, favicon, colour scheme, icons and typography for the product and site. The whole team were involved with the decision process so each design which I created would require different iterations based on the comments which were made until a final decision was made.

The old design

These are images of the old design of the UI:

Login page

Form page

Job Manager page

Menu select

Media manager page

Select a job page

Creating the new logo

I created different designs and numerous iterations of the new logo in Photoshop. The files were created as SVG's.

The team decision the team made was to use the middle logo.

Favicon design

The favicons were made in Photoshop. These were the favicons I created:

The team decision the team made was to use the second favicon.

UI Design

The prototype designs were made via an internal website enabling the whole team to be able to view the UI. This included designs for each device as the product could be used on a mobile. There were also designs for adding icons replacing buttons, new button designs, new dropdown menus and loading spinners.

Login page

Job Manager page

Select page

Menu select page

Select a job page

Form page

Dropdown menu

Dropdown menu in action

Part of the redesign was to create a new menu dropdown which will increase in size when it is hovered upon. The menu could hold up to 10 icons and the requirement was that is easy to use for the user and that the icons were explanatory in terms of the action they would perform. This includes the smooth movement down of the dropdown and the structuring of the columns for the icons. It is also responsive meaning that if the webpage it is shown on shrinks the column width changes and the number of icons per page decreases.

New style buttons

I had to redesign and code a new set of buttons which would be used across the site. The new design had to look slick and obvious that you were hovering over it when you wanted to select it. I used MDB to decide which button to use and then styled it afterwards.

New loading spinner

On our work site we previously used a spinner which was made in Photoshop and it was our role to design a new spinner which was more up to date. I decided to use an HTML spinner which means the colours can change according to the customer colour scheme.

Mobile Job Manager page

Mobile pick a job page

Mobile dropdown menu

Mobile create a new job menu

Robert Morgan-Macdonald