Girl Scouts Website Redesign – Reflection from a Designer’s Perspective
The Girl Scouts Arizona Cactus-Pine Council has been working closely with Rocket Media since 2010 (we even helped them create their last website).
They came to us in the Fall of 2013 to discuss reworking the design of their homepage. They (accurately) felt that the website was beginning to look dated and should work better for their ever-growing mobile/tablet users. After much discussion about their goals, though, both sides agreed that only addressing the homepage wasn’t the best solution. They needed a new website.
One of the key goals of this site was readdressing the sitemap and information architecture. But for the purpose of this article, we’re just going to take a look at the design process. So here’s how we approached it.
Step 1 - Design audit & style tile
After completing a design audit we worked with the Girl Scouts’ in-house design team to review our findings and define the goals the new design needed to achieve. They also provided recent marketing materials, their brand standards guide and some additional brand assets to assist in our exploration.
Some of our findings from the design audit to facilitate discussion of what they liked and didn’t like.
We then began by developing a design system that would continue to evolve throughout the project. In its preliminary stage this system started out as a simple style tile. Our style tiles are static Photoshop documents that include basic design elements like color palette, typefaces, buttons, textures, etc. that will be used to define a design direction.
We use these style tiles to generate discussion around core elements like typography, color, navigation, etc. This serves as the foundation for the design moving forward and we build on them throughout the project.
An example of the approved Girl Scouts style tile
With our brand resources (standards guide, marketing materials), approved style tile and knowledge gained from the research conducted by the content team, we were then able to move into wireframing and more user experience design.
Step 2 - Rough wireframes
In early conversations our content team worked alongside the client and primary user groups (Non-Members, Current Members and Supporters) to establish a hierarchy among the vast amounts of content these groups expect to find when visiting the website.
This helped us define the actions website visitors perform most often on the site. We determined that there were 3 main actions that not only met our user’s needs but also aligned with our business goals: Join Girl Scouts, Activity Calendar and Donate.
These became our 3 main “Global Actions” that appear throughout the site and appeal to the needs of our website visitors. With this concrete information (‘signed off’ & agreed on by all parties) we then identified our supporting call to actions and any additional modules or “content chunks” that we would be adding to our growing design system.
Since this was a responsive website, we defined breakpoints and began getting our ideas down on paper. We sketched out modules and layouts then tested them against user paths and related needs. After refining with the project team (Content, Developer, Design) we presented these early (and dirty) sketches to the client to ensure we were getting the valuable feedback we needed from them at this stage in the process.
A few examples of hand-sketched wireframes that we presented to the client.
Step 3 - Element collages
Now that we had an agreed upon design direction (style tile) and our base structure (wireframes) for the main sections of the site, we were ready to start to marry these two deliverables together.
We took the approved style tile and built it into a collection of design elements and modules we call an element collage (shamelessly stolen from Daniel Mall). These element collages not only provide a consistent work board for the designers and developers to build upon but also serves as a snapshot view of how all of our design elements are working together.
A couple examples of an element collage. Some of these elements made it to the final website while others did not.
Step 4 - Bringing it all together
This project was done in our old “waterfall” approach. (Most design was done upfront and completed before being handed off to development.) If you’ve been following along in our blog, you know we’ve transitioned to a different approach.
So with the Girl Scouts website project, we actually did some full-page concepts in Photoshop to show to the client. Basically, these took the element collages that the client had approved and combined them with the wireframe to give them an idea of what the website would look like.
Some of our full-page mockups shown at varying screen widths.
What we learned
It seems every project reinforces within us the need to continue to refine our own processes and minimize the amount of time spent in Photoshop (with the intent to do more ‘designing in browser’). Also, we’ve found that the more the entire project team (especially the designers and developers) communicates and collaborates and the less we rely on messy “hand offs”, the more successful the project.
Overall, we’re proud and excited about the new website and looking forward to our next project.