DPC_IMG
Compu-Mail Redesign.

A corporate website overhual for Compu-Mail.

Role

Research, Information Architecture, Prototyping, Visual Design

Tools

Webflow

Overview

During my time as an intern for Compu-Mail, I became more familiar with the objective of each department and how they collectively assisted clients with their direct marketing goals. Not only was the website lacking in the design department, it also wasn't reflective of what we do at Compu-Mail. Many people including the CEO of Compu-Mail agreed and thought it was time for a redesign.

This redesign of the Compu-Mail website was completed over the course of two months using Webflow.

The Problem

The current Compu-Mail website is struggling to attract and engage clients, with a bounce rate of 78.50% and an average use duration of 1 minute and 6 seconds.

dpc-info-architecture
Stakeholder Interview

I interviewed the Stakeholders to understand their business goals and identified three business goal's that could be incorporated into the redesign.

More Inquiries

Increase curiosity and inquiries that could lead to long term clients.

Inclusivity

Inclusively attract large clients without alienating small clients.

Brand Awareness

Increase overall awareness of the Compu-Mail brand.

User Survey & Interviews

Through surveys, interviews, and user testing, I identified four major usability issues with the existing website.

Content

Content is overwhelming and disorganized.

No cta

Unclear cta for users to contact us.

Navigation

Unclear navigation and information architecture.

Design

Unfriendly design that discourages use.

Information Architecture

To make it easier for users to find the information they needed, the information architecture was simplified with universally understood labels. Labels were also removed if they didn’t align with the business goals of the stakeholders.

dpc-info-architecture
Sketches

Sketching ideas allowed me to get the creative juices flowing and ideate concepts that could potentially decide the direction of the new design. Although rough and sloppy, these sketches would later be refined into higher quality wireframes.

dpc-info-architecture
dpc-info-architecture
dpc-info-architecture
dpc-info-architecture
dpc-info-architecture
dpc-info-architecture
Wireframes

Service pages and market pages had very similar layouts, so it wasn’t necessary to make wireframes for all of them. The same can be said for the about and career pages. Color and typography were added later.

wire-frame
wire-frame
wire-frame
wire-frame
wire-frame
wire-frame
wire-frame
wire-frame
wire-frame
wire-frame
Color & Typography

The color and typography is styled around the brand of Compu-Mail. A combination of slightly rounded corners and sharp corners to balance professionalism and friendliness. Graphik is an easy to read font that could be incorporated with anything and its easy on the eyes.

visual-guide
Navigation

The navigation bar was simplified and designed to reflect the new information architecture. Users can easily surf through the website and find the information they need. Social media icons were removed from the navigation to keep users from being redirected from the site.

navbar
Call-To-Action

Users can easily access the cta in the navigation bar or by the footer area in most pages of the website. The cta by the footer has a unique message depending on the page.

call-to-action
Subnavigation

Users can quickly access specific pages on the website without the use of the navbar to save time.

call-to-action
Content Layout

Content was made more readable and easier on the eyes by increasing contrast and space between headings and paragraphs. The list style for unordered lists and ordered lists contain more graphical elements to increase contrast between each bullet point and to make lists easier to read.

text-png

Headings & Paragraphs

text-png text-png

Unordered Lists

text-png

Ordered Lists

Illustrations

Hand drawn illustrations from Silvia on Adobe Stock help to quickly transfer the necessary message to the user. It also improves brand awareness as images stick to long term memory better than words. Overall, illustrations add to the simplicity of the design and make it unique and engaging for users.

mobile
mobile
mobile
mobile
mobile
mobile
mobile
mobile
mobile
mobile
mobile
mobile
mobile
mobile
mobile
Responsiveness

The website can be viewed on multiple devices such as desktops, laptops, tablets, and smartphones. This gives users more viewing options.

call-to-action
Final Product

Below is the final product demonstrating my workflow. Click to view.

Reflections

Organizational alignment. With this being my first real project collaborating with stakeholders, learning how to balance the desires of the stakeholders with the needs of the user was essential.

Branding is much more than color and type. Throughout this project, I learned that branding also includes the feelings users are left with.

Thanks for viewing 😀
Checkout more projects below 👇🏽