Project Overview
Reloveution needed consistent brand messaging, and an updated website that reflects their mission. Over the course of a few months, I wrote branded copy and redesigned key webpages, centering on the user’s experience.
The Challenge
Reloveution is a relatively new startup in the professional development space. During their growth as an organization, brand messaging became inconsistent. Additionally, the website had usability issues and the design no longer reflected the organization mission.
The Solution
In collaboration with the client, I developed web copy for five key webpages where the most impact could be made. Alongside this copy, I created a one-page branded copy style guide for consistent messaging across other platforms.
The website was already built on Wix, and I redesigned the five pages associated with the new copy. The former webpages were boxy – for the redesign, we went for a simple and sleek look, with the use of flat illustration icons in place of stock photography.
Competitor Research
To get started on this project, I worked with the client to walk through a brand questionnaire (later followed by a web design questionnaire) in order to better understand the client and end user needs. I felt very lucky to start this project on the brand strategy end, as this would better guide design decisions later.
After looking at the web copy and landing page layouts of a few other businesses working in the professional development space (see below: Compassionate Leaders Circle, LifeLabs Learning, The Management Center, Culture Amp), we decided to adopt visual, clean design elements. When rewriting the web page copy, we wanted to have impact with fewer words.
Before Website Redesign
When assessing the client’s website before copywriting and redesign, we determined that visual branding and voice were inconsistent, making it harder for users to understand information and navigate the site.
The design style was also outdated and blocky, and we wanted to bring the design to current standards. On the front end, this meant adopting modern design principles; on the back end, it meant ensuring an excellent mobile experience and accessibility.
UI Kit/Brand Style Guide
Before getting started on designing wireframes, I wanted to establish a brand style guide. This would not only help me stay consistent, but help the client build a consistent brand across all channels. It also provides guidance and ensuring we are using high contrast colors to increase accessibility (i.e. legibility) of design products, like the website.
The client really liked their red, gray, and cream white palette, so we stuck with that, and set down standardized hex codes and color and font use.
Wireframes in Figma
With the UI kit established, we delve into creating wireframes. Because we were redesigning and already existing site, we carried over some elements, such as the navigation bar. Given that the client used Wix for their web builder, I took into account some design limitations of this particular WYSIWYG web builder when creating the wireframes in Figma.
I created five different frames – one for each of the five webpages I was redesigning. I limited the wireframe process to desktop versions, because Wix has very little control options for mobile display. Each page was sectioned off using color and imagery, conveying CTAs above the fold, and more information down the page to increase user time spent on each page.
I wanted the webpages to be very actionable, making it easy for users to book or learn more about services. For the client, this means more lead generation and conversion rates.
The Final Product
Below you can see the final versions of the website built out on Wix. You’ll note that we used icons in the place of images found in the wireframes to reduce page load time and add visual interest for users.
Compared to the prior web design, this final product is cleaner, more professional, and gets users engaged and informed quickly. The updated stock imagery and icons add to a more modern look, and better capture the mission of Reloveution.
