3Advance Case Study

Project Overview

3Advance

3Advance is a tight-knit development team that creates mobile apps and data-management applications. 3Advance works with both startup founders and business leaders that want to make change in their ecosystem. (see their webpage here: https://3advance.com/)

Scope

Task: 

As a growing app development agency, 3Advance has had success in building an initial portfolio of work, but is finding difficulty in building a funnel for new business opportunities. In order to help expand reach, the client is looking for a landing page design that bolsters the brand, speaks to the agency’s value and positions them as an innovative solution for aspiring business leaders.

Solution:

Redevelop landing page that speaks to 3Advance's brand identity and product.

Deliverables:

Brand Identity, Sketch Mockup, Style Guide, HTML/CSS Coded Landing page

Design Process

To begin the design process, I first wanted to see a typical user's impression of the site. I called a friend and had him walk me through 3Advance’s current landing page. The big take aways of his experience:

1. “A cookie cutter corporate website. I’ve seen a ton of websites like this.”

2. “Give me a moment, I need to read the site to figure out what they do.”

3. “The site is inoffensive. Nothing jumps out at me that makes me want to hire the company.”

4. “NPR is a client? Where do I sign up?”

With his responses in mind, I sketched a quick wire frame and analyzed the pros and cons to their current landing page while considering what caused him to respond the way he did. I also analyzed and wireframed the landing pages of 3Advance's competitors.

Positives of the site:

1. Clean with clear user flow
2. Buttons are where user expects to find them
3. Quotes of testimony helps give validation
4. Text has personality

Negatives of the site:

1. Sterile and generic, very “government” looking
2. No hierarchy on the site and a lot of white space
3. Too many “contact us” buttons. It was so repetitive it seemed fishy.

Synthesized Problem: 

• Landing page is sterile and generic
• Unsure of what type of agency 3Advance is
• Lack of personality to stand out from other agencies.

Solution:

3Advance has a good foundation with clear user flow but lacks personality. Keep the “bones” of the landing page and keep the website simple highlighting their services while still being easy to navigate.

Brand: Technology, Reliable/Relatable, Playful/Inspired.

Using the Goldilock’s statement of, “Reliable but not rigid”, I put together photos and colors to evoke the feeling of reliable and trustworthy but still creative and thoughtful.

 To bring out the feeling of creativity and playfulness, I created a “mountain” like motifs throughout the website. The mountain scheme was left purposefully ambiguous to either illustrate data points reflecting technology or mountains reflecting stability and an adventurous spirit. The words and photos were deliberately cut short to inform yet inspire what could be.

The original landing page also had a “contact us” button six times on the landing page. Instead of putting buttons everywhere on the site, I created a section dedicated to calling the potential client to action. There are also leader lines tactfully leading the viewer’s eyes to end at the call to action button.

I coded the site with HTML and CSS and created a Zeplin Style Guide.

After some feedback, a section for blog posts was included to increase SEO. With this new professional yet subtly playful design that speaks to their personality as their landing page, the user will have a simple, instinctive, and memorable experience, exciting them to use the services provided by 3Advance.

View The Entire Mock Up: