Innovators

Scope: design and develop wordpress website for a German digital agency.
Role: UI/UX designer, WordPress developer, art director.
Year: 2014

They trusted me to work on design for their new website, which won design contest. For this project I developed ideas of interactive elements in order to show potential customers how this company is different, design for home page, and WordPress website based on this design. Further support of this website was performed by the client.

Website design for a digital agency

The process

Even before project started, client had a clear vision of what he is looking for and what their target audience is. I was requested to double-check and materialize these ideas into website design for all screens. Once design was finished, client trusted me to create initial WordPress template based on their mockups.

Visual styles for a digital agency website

The company suggests unique product for their clients: customized for every single business solution. Obviously this idea should have been emphasized on company website. That’s why after brainstorming I came up with several ideas, and as a result I created this central element for the website.

Carousel animation for an agency website design

Thanks to this carousel, user can meet their archetype “in person”, and see how Innovators helped their business. This way website literally communicates with user. Also, who wouldn’t like to play with these small images of professions? 🙂 This element draws attention of everyone.

Another interesting object was illustration of working process. I suggested several versions of this element, iterating them until we found the right one.

Iterations of "Steps" design element for marketing agency website
Three iterations of visualization of steps.

Once desktop version was completed, I moved to tablet and smartphone versions of this design. For this project I used desktop-first approach because main purpose of the website was creating company image. Potential customers supposed to use this website from their desktops or laptops. That’s why I moved in direction of downsizing and shrinking, hiding those parts of content which could be hidden without risk of losing main point.

Most of elements were left on their places—I hid only those parts of them which didn’t fit screen. Some elements changed their appearance: for example, steps (illustrated above) became vertical on smartphone screen. I removed main banner on mobile version since it wasn’t important for user on the go. Instead, I suggested users to look at slider with professions, which now was on first mobile screen. For mobile version I also swapped steps and testimonials: considering this step with the client, we made an assumption that showing steps first probably would be more engaging for potential company customer.

In most cases mobile version of a website is very different from its tablet and desktop design brethren due to screen constraints, and this case wasn’t an exclusion. Among other changes, I had to rethink top navigation. The best option would be to show all three menu items without hiding them, but unfortunately it wasn’t possible without decreasing font size significantly. I couldn’t make this happen because in this case it would be difficult for user to hit menu links. So after discussing it with the client, we decided to use hidden menu behind hamburger icon (Material design style).  I suggested two options for this menu:

Animation of mobile menus on a website

We decided to proceed with right-hand option (menu pushes content from top) because it affected content the least: when such menu is opened, significant part of page is still visible.


The result

Final designs (click to expand):

What would I do differently if I had a chance to replay this project? Probably I would conduct research, and would definitely performed usability testing on final website: it could help to fit suggested solutions for customers even better.

Responsive we design for a digital agency

Let's chat about your next project!

©2007 — 2020 Anastasia Chetvertukhina. All rights reserved.