Leslie Herring
 

First Person Website 2.0

Art Direction, UX, UI

First Person is a creative agency with a broad range of disciplines including Graphic Design, Video and Motion Graphics, Digital Campaigns, Content Development, Branding, Strategy, Experience Design, and Development.

 
First Person site displayed on multiple devices

The Goal

Redesign the First Person website to better drive client conversion. The website needed to be concise, tell businesses exactly what capabilities First Person provided, and have clear and obvious call to actions to contact First Person for their project needs.

While the previous design showcased cutting edge web development and received an AWWWARDS honorable mention, it suffered in SEO placement, and focused on things that were important to First Person, instead of what was most important to our clients.

The Result

A responsive website with a home page that clearly communicated First Person’s capabilities and design philosophy. We updated our portfolio so that focused on case studies first. Each case study was designed to highlight tangible results achieved for our clients. 

Improvement to SEO places First Person as a top page result for searching “First Person,” and the #1 result when searching “First Person design.” And now mobile users could view our work.

UX Research

We researched competitors and peers to identify successful design strategy, and researched UX best practices, defined an SEO strategy, created site flows, and designed wireframes.

For the UX process we went through a gamut of techniques such as Affinity mapping & feature prioritization to identify the core needs of the website. We gathered statistic about our website traffic and what devices visitors use the most as well as our target audience by creating our target user persona.

Focus on results more, clients do not care much about the process as much as the result.

Wireframes

After crafting site flows we created two options for wireframes. One based on First Person’s use of grids in branding, and another using white space to draw focus to imagery. Case Study wireframes were made to be modular so that any combination of section layouts could be used to craft pages based on each case study’s needs.

Option 1 - Grid Based Design

 

Home Page With clear Call To Actions & Featured Case Studies

Mobile Responsive Home Page

Mobile Responsive Capabilities Section

Modular Case study page. Choose as many sections in any order. New sections focus on stats & achievements.

Work landing page featuring a selection of best work.

Mobile Responsive Work Page

Mobile Responsive More Projects Section

About Page telling more about First Person’s approach

Team page. People like putting a face to a name

Contact Page where clients reach out directly to our C-Suite

Option2 - Whitespace option to highlight images

Alternate Home Page

Work Landing page that uses negative space to feature images

About page with more client quotes

People page with more negative space

A longer contact page focusing on project briefs

Design

As with all design proposals, we used a combination of the ideas from wireframes to craft the final pages. The About & Team pages were combined, we opted for the ability to show more projects than just case studies by sorting them into categories, and we went with a the simplified contact form.

 
 

Video scroll of the First Person home page redesign

 

Home Page

Mobile Responsive Home Page Icons

Mobile Responsive Home

Mobile Responsive Contact Page

Work Page featuring Case Studies at the top

Mobile Responsive Project Page

About Us Page

Mobile Responsive About Us Page