PicSnippets
A growing digital product needed a marketing site and product redesign to take them to the next level.
The team at PicSnippets had created a powerful tool for personalized marketing and sales. The product allowed users to add custom text to images on the web where the text would change dynamically for everyone who viewed the image. For example, an event invite could have the name of the guest in the image. To take PicSnippets to the next level, they were looking to redesign their marketing site and product with a more engaging brand that balanced professional with fun.
Existing Product
The current design focused on functionality over brand experience and lacked some personality. There were also some reports from users that the UI of the product was confusing.
Brand Design
I began the redesign effort by exploring the brand language for PicSnippets. I asked questions around what the client wanted PicSnippets to represent and the emotions that users should feel when interacting with it. Words like friendly, bright, welcoming, and easy-to-use came up often. I boiled these ideas down into three mood boards that represented directions the brand could go.
After consulting with the PicSnippets team, we chose a direction that met their vision and I got to work applying the new design.
Marketing Site
To get a better grasp on how this new visual direction would play out, I began redesigning the marketing site using the existing content but reenergizing it with a more fun and approachable brand. It was clear from the beginning that bright colors and patterns would play an important role in drawing attention to the brand.
As with any project, defining typography and colors was important to ensure consistency between the product and marketing site.
The new design direction took shape as I applied it to various pages and elements on the marketing site. This included a new homepage to explain what PicSnippets is and how it helps customers along with a pricing page and checkout flow.
To add more visual interest and help tell the story of what PicSnippets does, I created a looping video graphic for the homepage.
Product Design
Determining how to take the friendly and energetic brand design and apply it to the PicSnippets product in a way that was still easy to use proved to be a big challenge. It was important to the client that the experience of creating a “PicSnippet” should feel fun, so we keep the same visual feel from the marketing site while toning it down a little to help make the product easier to use.
While this was mostly a re-skinning of the existing product design, we did make some UI changes to improve the user experience.
Login and Dashboard
From the login and dashboard screens, the PicSnippets design seamlessly carries the same brand experience as the marketing site.
Editor
The editor is the most complex screen in the product and the one that needed the most UX re-working. With valuable feedback from the client on what users found confusing, we were able to restructure it in a way that made more sense and added some new features.
The page became a full-screen canvas for setting up an image and text. The buttons on the left made it easy to find and add images or text “snippets” while the horizontal bar at the top contained all of the controls.
As part of the redesign, I built a prototype using InVision to communicate the user flow with the client and validate ideas. I also designed various states for components to aid developers.
Launch
After a few rounds of iteration to improve the design, the product moved to development and testing where some changes were made to the UI based on user feedback. It was then released to the public where it was met with very positive feedback from new and existing users. The redesign effort paid off and helped the client gain and retain more users than ever before.