SCFutureMakers.com

Client: South Carolina Manufacturers' Alliance / Will Bryan Design

Problem: New site build - No content

The South Carolina Manufacturers' Alliance (SCMA) received grant money to build a portal to help increase student participation in seeking advanced manufacturing positions within the state of South Carolina. Will Bryan Design, the Alliance's agency of record, came to us to build this new site - a high profile site, tight timeframe, with a lot of content to build and organize, that had not been written yet.

I and my team helped the SCMA to determine their goals (the main one to direct them through this site, to another site called STEM Premier, to build a profile, to get recruited), discover the information architecture for the site, how the different users would flow through the site in order to accomplish their goals, and then organizing the content (as it was generated) to build a cohesive site and user experience.

Below were some of the tools we used, and what they eventually led to in the design of the live site.

Click on the images below to get a more detailed view of my work.

It started with a whiteboard...

(yes, my handwriting can be horrible) - Not only were we trying to figure out the main sections of the site for navigation, but then we also had to figure out how the two main tracks (Careers and Education) finally connected with eachother (for both the user, and the developer)

Visual Sitemap

I then produced a visual site map to organize all of the boxes (that would eventually change several times)

Detailed Spreadsheet Sitemap

I then made a detailed sitemap spreadsheet in order to track the organization structure of the site, but also track when content was made, and when actual pages/posts were created in Wordpress eventually.

Home Page - Desktop Wireframe

We spent many iterations on wireframing, as the content was being written.

Home Page - Mobile Wireframe

.We also wanted the clients to be thinking in mobile views, since we profiled that a majority of their users would be using smartphones and tablets to access this site (high school students and their older parents respectively). They wanted to show a lot of data on each page, which has limitations in mobile.

Detailed Content Map

On many key pages, we developed a Detailed Content Map. When you look at the site, you'll notice that there are may small forms of content over each of the pages - these needed to be documented so that we could fill in gaps, figuring out what additional content (copy, images, icons, widgets, etc) needed to be generated.