Revize brand and website design

Project Overview   |   Identifying Consumer Values   |   Brand Design   |   Creating a New Website   |   Finial Website Design   |   Takeaways

Client

Revize LLC

Product

Branding & Website

Role

UX/UI Designer, Project Manager

Time

Sep 2023 - Feb 2024

Project Overview

Important Note:

This project unfortunately never went live due to shifts in company priorities. With that in mind, this project allowed me to refine my design process and capabilities, the results of which I'm proud of.

Background & Problem Statement

Revize is known for building standout, user-friendly websites for municipalities, but its own branding wasn’t living up to the same standard. The identity felt outdated, and internal assets like sales decks and proposals had become a bit of a patchwork over time. With major changes happening behind the scenes, this rebrand marked the beginning of a fresh, new chapter for Revize.

Goals

  • Create a branding guide for company-wide use
  • Redesign company assets to be cohesive to the brand
  • Create a new website, involving design, sitemap, and content

Challenges

  • Lean into branding that aligns with both company and client values
  • Coordinate with stakeholder to discuss updates and recieve feedback

My Role

  • Sole Brand and UX/UI Designer
  • Wirefame and prototype the website's pages
  • Establish a new sitemap for the website
  • Develop and maintain the project's timeline

Identifying Consumer Values

Initial Questions

Immediately after starting this project, I had many questions stirring in my head...

  • What are the primary products & services that revize offers to communities?
  • How does revize stand out among the competition?
  • Why do communities choose revize to handle their website needs?

Discussion with the Sales Team

I worked closely with the sales team to pinpoint what attracts new and returning communities. Our goal was to define the "who" behind our audience, their needs, motivations, and pain points. With that foundation in place, we could see how Revize's services tie into their interests.

User Identity Values and Traits

Revize's Featured Services

A discussion with my stakeholder highlighted the main services Revize offers, and unsurprisingly, there was definitely an overlap with the consumer values.

Bold Designs

Our client-base aren't looking for templates, they want custom web designs that reflect their identity

Best-in-Class Websites

Unparalleled showcase with an array of applicaitions, modern UI, and  navigable sitemap

Easy-to-Use CMS

Municipal employees juggle many roles, so less time spent on website updates means more time for other tasks

Brand Design

Considering the Use-Case

Knowing who, how, and where the brand will be used can impact creative decisions. Will sales be making their own presentations to match the brand? Will there be physical use-cases, or only digital? This is what was determined:

  • Important material will be made by designers and other employees should not make alterations
  • The brand usage will almost entirely be digital, with limited physical applications such as custom packaging and conference materials
  • When non-designers need to make their own material, they should have assets (i.e., icons and graphics) they can easily utilize

Starting with an Initial Concept

The major areas the brand needed to hit was showcasing our creativity, while also being clean and minimal. The goal would be to reflect our focus on custom websites and a easy-to-use CMS.

While I was ideating my own concepts, my stakeholder, who has 20+ years of experience in design himself, created his own vision. This is what we used as a starting point for me to build off of:

Initial Brand Concept 2 Initial Brand Concept 1

Areas to Adjust

To build off this starting point, I needed to layout the key areas and how they could be improved:

Color Usage

The touches of color in an overall black/white color scheme help the brand remain professional, while adding spurts of creative elements.

Could we create a color scheme that flows better together and is accessible?

Fonts Combinations

The goal for the initial font combination is to be bold while highlighting certain elements.

Do these fonts work together and reflect Revize's values? What other font options would keep a bold and creative approach?

The Square Graphic

The revize square is in the logo and is the most iconic part of the existing branding.

What ways can we incorporate it into the new branding while maintaining a clean and minimal style?

Creating a Final Concept

After exploring different brand variations through graphic experiments, I created the design you see below. It brings an energetic, creative, and professional feel that reflects what Revize stands for.

New Brand Asset 1 New Brand Asset 2 New Brand Asset 3

Lessons Learned

This project had its ups and downs, but there were a lot of great moments too. In the end, my stakeholder was happy with the final result. It also taught me some valuable lessons that I'll take with me moving forward.

Creating a Proper Starting Point

Branding plays a crucial role in shaping a company’s identity, influencing future materials and how the audience perceives them. Looking back, I wish I had been more thorough during discovery. As I developed mood boards and style tiles, I realized they weren’t enough for my stakeholder to grasp the direction I was envisioning. This led him to create his own starting point instead.

In hindsight, rather than presenting these early iterations, it would have been more effective to design a few sample graphics or marketing materials to communicate the concept before moving forward with a branding guide, which he immediately requested based on his own version.

Balancing Creativity and Accessibility in Typography

This ties back to the importance of being thorough, but as a strong advocate for accessibility, I was initially hesitant about using a handwritten font. While it effectively conveys values like creativity, a human touch, and high-quality service, its use must remain purely decorative. It should never be essential for understanding a title’s message.

Overall, I’m pleased with the choice, as it adds character to the brand. However, for future projects, I believe it would be worthwhile to explore alternative options to ensure best practices are met.

Creating a New Website

Information Architecture

I created a sitemap consisting of primary and secondary navigation items. The important part was understanding our core features and what users were interested in seeing. With that in mind, I was able to make a fairly straightforward sitemap.

website sitemap

Wireframes

I created medium-fidelity wireframes for the homepage and 10 of the interior pages. The goal was to lay out the sections and understand how to utilize the typography. Below is the homepage, broken into four pictures:

Lessons Learned

User Testing

As you may have noticed, user testing was not part of this stage. If time had allowed, I would have conducted tree testing for the sitemap and usability testing for the mockup. When working within time, budget, or other constraints, I need to pick and choose my battles.

If I were in the same situation again, I believe it would be worthwhile to at least gather a few coworkers, friends, or relatives for some brief testing to validate or challenge key decisions.

Final Website Design

High-Fidelity Prototype

After nailing down the branding and the website layout, the prototyping easily falls into place. To create a clear path for development, I wanted this to be a high-functioning prototype, filled with scroll animations and hover effects.

Before you view the design, note that the second section on the homepage highlights Revize's three services. The gray blocks on the right were intended to be short videos showcasing the services, but the project didn't progress to that stage.

Core UI Features

  • The content is centered around Revize's 3 main services: websites, a CMS, and web applications. Users can quickly engage with these through the menu or scrolling down on the homepage.
  • The design approach focuses on bold, concise text, subtle movement, and imagery to capture attention.
  • As mentioned earlier, the script text needs to have purely visual use. Throughout the website, it is never used to communicate essential information in headings.
  • As mentioned earlier, the script text needs to have purely visual use. Throughout the website, it is never used to communicate essential information in headings.
  • Each page has a call-to-action at the bottom, encouraging user acquisition.

Takeaways

Lessons Learned

  • The objectives of a branding guide and the content needed to achieve those goals.
  • As the lead UX/UI designer, I needed a strong understanding of each step, including the process and goals for each task.
  • How to prioritize tasks under time and technical constraints.
  • An in-depth use of Figma's component system.

What Would I do Different?

  • Explore alternative design options, especially for typography, to ensure accessibility best practices are met.
  • Focus on stakeholder feedback to ensure expectations are aligned throughout the process.

Hard & Soft Skills

  • Figma (Prototyping, Components, and Styles)
  • UX/UI Design
  • Accessibility Standards
  • Project Management
  • Attention to Detail
  • Stakeholder Discussions

Credit: Thank you to Zeta Fonts for allowing me to use their beautiful font, Unigeo, on my personal website.