ROCK CONNECTIONS WEBSITE & BRANDING

UX/UI DESIGN & VISUAL DESIGN

PROJECT DATE: 2017 - 2018

Met with stakeholders to gather requirements and expectations of new website
Helped conduct research to develop personas
Developed website site map
Reviewed proposed site map and personas with stakeholders
Created sketches of website pages
Created wireframes for stakeholder review
Worked with a Wordpress developer to implement wireframes
Applied UI styling to wireframes

DESIGN PROCESS

OVERVIEW

Rock Connections is a communication center that helps companies generate revenue by centralizing contact center services, increasing conversions and maximizing efficiency. The company needed help updating their corporate website and company branding.

Project Goals:

Align the look, feel, and tone of voice with the company's culture
Use their website as a marketing tool
Eliminate paper use by providing a simplified process for onboarding new business partners

The target audiences for this project were businesses with communication needs and current and future employees.

SOLUTION

I served as the lead UI designer to redesign their corporate website. I helped to create a new appealing look with updated corporate branding including, business cards, employee badges, icons, and a brand guide. We also added a new onboarding process to the website.

Team

1 UX Specialist
1 UX Writer
1 UI Designer (me!)
1 Software Developer

Tools

Invision
Invision Studio
Sketch
Wordpress

Timeline

Overall: 6 months
Discovery & Research: 2 months
Design: 4 months

PERSONAS

We needed to form a better understanding of our potential business partners' backgrounds, traits, and interests. So, we created personas for our user segments. They were based on user interviews and conversations with current business partners. We used these personas to keep the team accountable to our goals as we designed the new website.

SITE MAP

Before starting wireframes we began planning for the structure of the website. I developed a site map to communicate the outline of the website. We used stakeholder requirements, research, and personas to develop this. Next we reviewed this with our stakeholders to ensure this was the intended direction.

WIREFRAMES

I created low fidelity wireframes to communicate the vision of each page of the website.

My team presented our work to our stakeholders and went through a couple rounds of edits until we arrived at the wireframes shown below. From here I moved on to create high fidelity prototypes.

VISUAL DESIGN WORK

To accompany the new company logo, I designed employee ID badges and business cards for Rock Connections.

EMPLOYEE BADGES

BUSINESS CARDS