Shogun Page Builder is a drag-and-drop page building app for Shopify.
collaborative workshop
To kick off this project, I planned and facilitated a brainstorming workshop with people from the product design, content writing, product, and marketing design teams. The goal was to get a variety of perspectives on our current brand and how we can better represent the Page Builder product moving forward.
The consensus was that the current Page Builder brand showed that our product was easy to use and friendly. Our desired brand would also communicate sophistication and lightness/dreaminess.
I consolidated the group's ideas into a short list of attributes to describe the product and how we want to visually represent it. This served as the North Star for design throughout the project.
existing page builder imagery
miro board from brainstorming workshop
attribute list from workshop
discovery and exploration
Using the list of attributes, I put together a moodboard to explore a new visual style. This was also helpful in getting stakeholders on the same page before starting on the product shot designs.
Once the team was in agreement, I explored some new visual elements and how they might relate to the product UI. These include glass morphism, feathery gradients (sometimes with a gritty texture), and soft background imagery.
moodboard
visual exploration
product shots
I created product shots for each of the main features and benefits outlined in the Page Builder product overview page. Each product shot is a combination of UI components from Page Builder, a fake store example (using stock photography, type, and colors) and the new brand visual elements.
analytics and drag and drop focused shots
performance focused shot
drag and drop focused shot
elements focused shots
landing page
The refresh of the landing page included making a few layout and copy changes and replacing the product shots.
Because Shogun is in the middle of replatforming their website, there is not currently a live webpage for this design, but you can preview the desktop and mobile versions I created in Figma.
(scroll in window to preview)
(scroll in window to preview)
social media campaign design
Using the new product shots, I created a series of ads in different sizes to drive more traffic to the newly refreshed landing page. The highest performing ads were those with human faces in the design, which I try to include in any ad designs I work on.
ad creative using various product shots
ad creative at different aspect ratios