Sprout Social Brand/PD Experiment
The new Sprout brand direction was trickled down to all the assets on the Brand side of the house. Brand and Marketing had established that in the Brand Refresh stories should be told using up-to-date product components/imagery.
The ask? The Brand team needed someone to bridge the gap between Product Design and Brand so they had accurate imagery to tell their marketing driven stories. The first project on the list for the Website Refresh was the pillar pages of the new SproutSocial.com.
What they already had…
Each pillar page had established wireframes and copy content with image placeholders. The art direction for these images was also established.
The art direction established how to generally simplify each component, or ‘snippet’, to highlight the interactions described in the copy.
How I scoped the project…
I didn’t have a clear scope in the beginning of the 2 weeks, so I mapped out my assumptions based off what was in front of me.
For each pillar, I created a rough map of all the image assets and made my best guess as to which components would best tell each story. I took screenshots of Sprout and dropped them into my map, but then reached out to PDs in Publishing, Engagement Reporting and Listening to get a better idea for the interactions to use.
Also, I only promised 1-2 pillar page image assets for the 2 weeks I was slotted for, which I eventually surpassed.
The scope…
Each pillar page had 3 larger differentiator ‘snippets’ that needed a motion element (I storyboarded these) and 1-3 smaller ‘snippets’ for the features section. There were originally 6 different pillar pages: Publishing, Engagement, Analytics, Premium Analytics, Listening, and Advocacy.
The header images were already in the works when I came on board so I focused on the differentiators and features. The bottoms of each pages also needed full fidelity product screens, which I did my best to fine assets for.
Each pillar would also have a ‘dummy’ ICP theme applied to all the photography and text copy within the snippets, but during the 2 weeks, I didn’t have those themes.
Product Marketing review….
For the first PMK review, we needed to solidify their thoughts around the ‘snippets’ I picked.
I originally had hand sketches to show the abstraction, but found that literal screenshots of the components were more effective. They obviously didn’t have the content in them that would be customized to the story, but they showed the general idea we were going for. I put motion notes and other annotations out to the side of each of these.
PMK made comments directly int he figma file in a timely fashion and we were able to push forward.
Simplifying assets….
When ‘brandifying’ product assets for this project, we used a few different approaches.
For the motion graphics, we took the original components from PD, simplified everything in a ‘branded wireframe’ style EXCEPT the key interaction we were trying to highlight. This is similar to use using low-fi wireframes in presentations.
We added pillar branded colors, marketing photography and branded typography. We storyboarded each differentiator and highly scaled down components for the extra small images in the features sections.
What to expect in the future….
Brand will need our help in the near future to collaborate on component assets for the new website and beyond.
From what I saw, they would also benefit from a ‘branded’ component library or sorts that takes all the ‘snippets’ they’ve already made and make a system for collaborating with PD in the future. This could be similar to our hi-fi and lo-fi image assets from each zone, but all in one place.
This project is just the beginning of this partnership. We build Sprout Social, but Brand shows us off to our customers and potential customers. There is an opportunity here to make this bond stronger.