Digital Marketing Website
UX/UI and product design for a digital marketing agency's website.
Check out the Figma file
Initial Strategy
A big portion of the agency rebranding + website redesign that I contributed to was around the branding and UX strategy guiding of the project. This strategy work included competitor research, an audit of the existing site, and a rough site map so that we could start wire framing and planning the end site.
Some of the big takeaways that we ended up coming away with that ended up really informing the visual language and UX of the site was that since our ideal customer had matured, the visual language of the brand needed to mature along with it. This is why we leaned towards darker complementary colors and pulled from other brand and competitor examples with clear enterprise appeal.
Additionally, from a UX standpoint, we shifted the website from a very prescriptive catalogue style to something a bit more bespoke. We reorganized the pages to shift towards an overall strategic approach, with overview pages that spoke more towards the benefits of the services + how different services fit together - while keeping the individual service pages for SEO purposes. This helped us make sure to retain the rankings and traffic we already had, while gradually shifting the way we lead users through the site and get them to the conversion action.
Visual Brand Development
The main design motifs that we developed for the rebrand were based on the idea of blueprints. Because DRA’s unique value prop was this idea of holistic services, we wanted the visual language to bring in visual cues such as light grid patterns for background elements. In addition we incorporated dot wave motifs as a metaphor for digital change.
The abstract shape system was used to represent the main categories of deliverables that DRA provides - Brand, demand generation, and revenue operations. This system allowed us to easily create imagery that was custom to our clients’ services and helped bring a playful tone to the site.
Wireframing
While finishing the brand development, we started the wire framing process to define the modular sections we needed to build the pages we outlined in the sitemap. Although the initial idea was to “reskin” the existing site with new branding to alleviate some of the lift for our copywriting and SEO teams, the more insights we uncovered we realized that the site at the time was just not speaking towards our target market. Because of this, we decided to start with some of our highest touch, highest traffic, and most critical pages to test out the new user journey we had mapped out. This included developing a home page, strategy (individual deliverable), blueprint (holistic product), methodology, about page, and conversion pages. The goal was to map out the main sections of the page so the copywriting team had enough to work with to develop real content as we created visuals and video assets.
Mockup
During the mockup phase we were at first working with mainly filler text, so we focused on working out general layout and imagery first. This is where we were concurrently working through the nitty gritty of the brand guidelines as well (ie type sizes for headline, body copy, etc) and developing the shape system as well. When the copy was finished, we went through the process of fine tuning the pages which included defining hover states, menu design, animations, etc.
Development + Review
When the mockups were reviewed and approved we moved things over to the development team. For us, that meant going through the Figma file and commenting and explaining what the interactions were meant to be and grouping and making sure that the images were exportable. When we were done with prepping the file, we had a hand off meeting to cover anything additional and were readily available for questions.
Review was overall pretty seamless because our leadership had had multiple meetings and points of revision before this point. We had a standing weekly meeting where they saw the progress of our progress, so they were able to give us feedback progressively.