Ridin Dinesh
Avatar

Case Study

Brand new website design that supports 7 different languages

Role: UX and UI Designer

iPad App
  • Macbook Image
  • Project Rundown

    The Milwaukee Electric Tool Corporation is a brand of Techtronic Industries, along with AEG, Ryobi, Hoover, Dirt Devil, and Vax. They wanted to revamp their website to modern standards in terms of design, user experience, and technology. My sole job was to create the UX and UI Design for their brand website.

Project Challenge

Milwaukee's old website is a bit outdated in which many of its UX Designs were based on old web browser standards. The key challenge in this project would be to provide Milwaukee with a modern website while retaining its brand standard. Another key point would be is, I have never designed a website that consists of so many different languages, so I have to make sure the website design is well crafted so that it can adapt to any language.

Project Goal

Create a modern website providing the users with Milwaukee web experience in both desktop and mobile.

Tools Used:

  • Adobe XD

    To create Wireframe

  • Adobe Photoshop

    To create full visual design

  • Invision App

    Reviewing Designs with client

Phase 1: Project Understanding and Initial Wireframe

The initial step I took before I even started with the website was to study the Milwaukee Brand guideline. They are very serious about their brand image, and I had to make sure I clearly understood who they are and what they really want. I had a few phone conversations with them (They are located in HongKong). After I had a clear understanding, I started studying some of the competitors who are in the same industry and see what they are doing which puts them ahead of others.

During this phase, I usually create a sitemap for the client. I have them involved in it too so that they can add or remove pages as they required. A sitemap is an important aspect that should be considered during the initial stage of the project.

While wireframing, I designed it based on standard bootstrap framework, keeping in mind that design needs to be mobile-friendly.

Ones the client has approved the sitemap and the initial wireframe for all the pages. I move on to the UI design phase.

Phase 2: UI / Visual Design

I start off by creating an initial full design mockup of the homepage, using their brand guidelines (Colors, Fonts, images). Then the mockup is shared with the client over skype meeting. I present them the mockup and explain the design approach to them. After a couple of revisions, we come to an agreement in terms of the look and feel of the website visually. Then I move on to designing other pages. This process is carried on for all desktop design. Ones the desktop designs are approved, I move to mobile designs.

Below are some screenshots of screenshots of the design

Multiple revisions/iterations are done for all the designs.

Phase 4: Submission of full UI design files in photoshop format long with documentation.

Conclusion

The outcome of the project was better than expected. Many of the design styles of Milwaukee Asia was implemented on the Milwaukee US website too.