Defining
When I first started working at Schoolwires in 2011, I was in our marketing team. After about a year of digital campaign work, I was tasked with redesigning our corporate website. It wasn't the first time I had undertaken a project like this, but it was the first one with a heavy mobile focus. As you will see ahead, there were also lots of technical and strategic considerations.
Our old site had grown out of its content structure and was built with old technology. We had a new marketing strategy, and on top of that, it was still on our old cms platform. By now almost all of our clients were moved over to the new version. It was time to make the switch for ourselves, too.
Internal Processes
Some of the internal processes we used the back end were also archaic and we had split at the seams with marketing needs.
One of those processes was capturing leads. This was typically performed by sales people while on site at conferences using hidden forms. The data was hard to pull down into much of a useable form. The new site would incorporate a marketing automation tool, and we were planning on cutting out conferences almost completely to focus our budget on content marketing.
Another problem that was more obvious was the technology on the front end. We had a flash based carousel that was a pain to update and made the decision to prioritize content constantly difficult with our growing product and service lines.
The process to actually redesign started with my request to my director to write down a prioritized bulleted list of content. I gave her what the site currently had to start, and explained my needs from organizing and buy-in from the top down. She took this and spent time cutting through the organization to give me a final order of things. I feel that this was one of the pieces that took that longest in the project and did not surprise me. Organizing a corporate site has proven time and time again to be the toughest part of a redesign for me due to so many groups and approvals. This forces the company to commit to directions on so many levels. Even how we were going to handle social media in our marketing strategy was thought through in detail at this stage.
Planning
Early sketches on our awesome UX Stencils sketch pads.
Once I had a bulleted list, I used that as my site map. I learned about our marketing automation tool options. While we hadn’t committed to a tool yet, understanding our content strategy and how we were going to wrap that around the site structure was crucial at this point. I tried to strike a balance. I knew we had to allow areas for content that was updated frequently, but our products, news and social presence were also important. Inside from the main page was a bit easier, as we were able to dedicate some areas to special topics.
Next, I made some sketches I later turned into Axure wireframes for some top level prototypes. I started with just for mobile. I felt that utilizing the “mobile first” theory made sense for a content heavy site that sold products. I knew that if I got it right on there that the larger version would be even more concise. After confidence in all of my hierarchy decisions I made against business goals and the long term use of the site, I presented a clickable prototype/wireframe hybrid to our CEO one night while she was in our China office early morning, and got some great feedback along with the feeling we were headed the right direction with strong buy-in on our concept. Having buy-in on content priorities on a small screen allowed me to build out the responsive versions much faster.
One of the hardest challenges was prioritizing a few then-competing products. Our legacy product seemed to have equal importance to our business goals as did the new products. We had to tread lightly, but make the focus on the content and know-how. We learned from early studies with our traffic that users were on our site for a huge variety of reasons so we focused on clear navigation, UA and grouped customer tools together.
Axure wireframes with the approved hi res design by fellow team member Rob Madgwick. Rights of Schoolwires, beginning 2012.
Implementation
Doing some typography experimentation for a site that would be content heavy. Wow, have I learned a lot since then about type!
One of the technical pieces I also helped to decide on and implement was using Vimeo for our video host, as we had internal resources to produce videos. I even helped refresh a lot of old content we had into better formats using InDesign. We made every article in HTML format using an article template by topic, in addition to beautiful, web and print friendly downloadable PDFs. We were even able to rebrand a little bit, in terms of type and color which really helped everything work together nicely.
Once a few hi res mockups from our team were submitted, we ended up with a really clean design from a colleague. We worked heavily with our product team to build some custom functionality on our platform in a much more complex way than our system was even meant for. The site sang. The whole project was only about 3 months, with 1 month of development until launch. It launched in March 2012.
A large part of the workload was setting up all of the page layouts (plus individual records) while not being able to get too ahead of the developers I was collaborating with. I worked on customizing inputs, but we styled everything on the front end as the buckets were being filled. It was a ton of work to put all of the content on the site, but since I was the one who knew the IA the most intimately, it made sense for me to keep focused on building it all out while I collaborated with developers on specs. I was also concerned with manually tagging each download for google to track.
Since our CMS was built for school district needs, there were some mental models I had to address creatively with regard to authoring. We had some customization to do to make the dynamic content flow to more than one place and it was a different structure with regard to permissions as well. We took out some standard front end elements as well, such as our standard login bar with school navigation. I also did some work arounds from tools we have for auto image optimization since I knew exactly what sizes and specs I wanted to use.
I integrated the marketing automation tool with our site and designed and launched editable email templates to partner with our campaign plans. I installed Google Analytics based on our internal goals as well, and was the go-to for the data reports weekly, which I presented to teams weekly and on an as-needed basis.
It felt really nice to post our fresh site and content pieces to social media after we had the opportunity to do things thoroughly and beautifully as possibly within the time frame. I set up Hootsuite and a social media guide for others to easily deploy, plan and measure our efforts as well.
It was nice to know that authors could post media that looked great, and was sharable and trackable. We made huge strides in our lead responsibilities, and really cut down processes in our marketing team.