The Challenge

MediaDoc Inc. is a web development company that offers design, development, and consultation services. The redesign of this website meant a complete copy re-write and a thorough review of the current information architecture. The biggest challenge though, was to create a great mobile experience for users.

Setting Goals

After some internal and client feedback we determined the following goals to target new and existing clients:

  • Showcase MediaDoc's wealth of services
  • Create a solid mobile presence
  • Highlight some of MediaDoc's amazing clients
  • Include support options for existing clients
  • Include an easily accessible quote form


User Flow


After reviewing the current architecture of their website and comparing it to the new set of goals, I came up with a more targeted and simplified user flow.

Asking a lot of questions is very helpful at this stage. How would a potential client find the Quote Form? How would a user find information about a particular service? How would a user access the portfolio? How would an existing client find technical support on the site? I created a user flow to figure out the answers to these (and many more) questions, and to simplify the process in accomplishing these tasks.


Wireframes & Prototypes

Following an iterative design process, I made multiple rounds of low and hi-fidelity wireframes using Balsamiq. I used InVision to create a few prototypes and had them tested. After ironing out the kinks, we came to a final design. Click the image to enlarge.

WIREFRAMES - 1) Home Screen 2) About Us 3) Services 4) Quote Form


Visual Design

Now that an agreed upon framework has been set, I can move forward to creating a tone for the site and adding some visual flare.

VISUAL DESIGN - 1) Home Screen 2) About Us 3) Services 4) Quote Form

Voice & Tone

  • Business Casual
  • Trustworthy
  • Friendly + Approachable
  • Helpful


Colour, Font and Copy

The existing branding for MediaDoc is a wonderful combo of "business blue" paired with solid black. This pairing creates a strong and trustworthy vibe all on its own. I carry this throughout the website. I also use pops of grey to soften different areas. We chose a font style that suited the business casual feel (Chaparral Pro and Open Sans) and used a relaxed copy style to keep with the approachable feel to the business.


Project Summary

The MediaDoc website redesign now showcases a larger number of services, highlights some amazing clients, and offers a strong mobile presence. Some new features include a form for quote requests, a blog with archived articles, and more support options for clients.

The design reflects the business casual and friendly feel that the company is all about.

A mobile version of the site is currently in development.