Cicero is a comprehensive and accurate database of US-based and international elected officials and legislative districts. Cicero enables you to match constituents with their representatives based on address-level data.
My Roles
Brand Design
UX Design
Visual Design
HTML Development
Process
Step 1: Evaluation
This project was a re-design of an existing website. I performed an information architecture review, interviewed customers, and came up with a new content strategy based on my discussions.
Challenges
Understanding the intricacies of the product and how it’s consumed.
Empathizing with non-technical users.
Takeaways
Many customers weren’t tech savy and assumed they were receiving a product with an interface, but in reality we were providing a means to access a database. ie API, data licensing, and services.
Step 2: Wireframes
For the wireframing process I worked closely with the product manager and copywriter to produce many rounds of wireframes at various levels of fidelity.
Challenges
Establishing a balance between the user journey, messaging, and shared understanding of the product.
How does one travel through the site?
Takeaways
Let the content tell the story.
Start broad, then iterate to work out the details.
Don’t jump into visual design too quickly.
Step 3: Brand Redesign
The Cicero brand was outdated and needed a refresh. I redesigned the logo and came up with a fresh new color pallet that still lended itself to the old brand people wer familiar with.
Challenges
Convincing the product owners it was time for a new modern look.
Convincing stake holders to alter the brand colors and add three new complimentary colors.
Takeaways
When re-designing a brand, it’s important to appreciate the past while striving to create a new exciting appearance.
Step 4: Visual Design
For the visual design, I chose to incorporate a flat color pallet and simple illustrations that could help non-technical users make sense of how to use the product.
Challenges
Understanding how to weave the brand colors, UI colors, and complimentary colors into a harmonious composition.
Designing illustrations that were simple, but provided information.
Takeaways
The three access points in the product (API, Licensing, Services) ended up taking on the complimentary colors to help tell the story. This informed the overall color pallet.
Step 5: HTML Prototype
After the wireframes and visual design were complete, I built the website using static HTML pages. The HTML was later incorporated into our CMS, Jekyl.
Challenges
Learning to use SVG elements in my HTML prototypes for the first time.
Sourcing a CMS that was lightweight, but also friendly for non technical users.
Takeaways
Building the static HTML pages for our developers helped speed up the time to launch.
