BlueFire Visual
Introduction
In this digital age, it’s easy to forget that there is still a large demand for physical brand assets. BlueFire Visual is a business-to-business company that creates physical marketing assets such as signs, posters, bill boards, etc. They have an innovation center in Charlotte where they can prototype pretty much anything. While on this project, they decided to rebrand from Heritage Printing & Graphics to BlueFire Visual. This change added new complexity and challenges to the project due to the lack of existing assets for me to choose from for inspiration. This was truly a complete redesign of their corporate website.
My Role
I was hired at the beginning of the project as a UX Consultant. There was no existing web team at the company so I collaborated with their marketing director to define our process moving forward.
Goals & Objectives
Whenever I take on a new project, I like to define the goals and objectives with the client. This document serves as a point of reference in case of scope creep. It also helps me understand what we are trying to accomplish.
This document contains:
Project Background
Business Goals
User Experience Questions
Critical Success Factors
Audience Definition
Audience Top Tasks
Personas
Project Timeline
Project Timeline
I put together a project timeline using 2-week sprints as a part of the agile methodology.
Sprint 1 - Kickoff
Goals & Objectives
User Research
Site Map
Payment: $X,XXX
Sprint 2 - Wireframe
Navigation
Home Page
Key Pages
Payment: $X,XXX
Sprint 3 - Research
Usability Testing
Navigation Testing
Payment: $X,XXX
Sprint 4 - UI Design
Home Page
Key Pages
Style Guide
Payment: $X,XXX
Project Management
I created a Kanban board in Trello to identify all the tasks that need to be competed in order to have a successful project.
User Interviews
We began by interviewing existing customers to see how we could better meet their needs. Through this research I created personas using real quotes from the interviews and outlined their goals and frustrations.
Research Key Findings
Customers often order the same or similar products a few times per year
Once they find a vender they like, they typically stay with that vender
They have a lot of people to coordinate with and often times have managers who they want to impress.
Site Map Creation
I created and revised a high level site map and helped to eliminate and combine products where it made sense.
Wireframes
Due to their limited budget, I suggested a modular approach to their website design. The idea was to deign the top level and most complex web pages and then re-use the components on the other pages of the site. For example, I only mocked up a few product pages when in reality they have dozens of products and services.
Interface Design
Once we created the wireframes, it was time to start adding typography, colors, and images to the site. My approach to this was somewhat different than most other designers. For scalability purposes and for future design efforts, I decided to define and document color usage and typography standards upfront. This included WCAG 2.1 AA color contrast ratios and a spacing scale for padding and icon size.
After these colors and typography scales were agreed upon, interface design elements were added to enhance the site’s personality. The client’s input was that he wanted to incorporate flames into the design somehow and have the site blend together from one component to another so it wasn’t too sterile.
Comps
Takeways
While the client opted to forgo the research sprint, benchmarking studies should be performed in order to ensure that the project was a success. The client was constrained by budget, but If I had to work on this project again, I would take an agile approach and start enhancing the site at the component level while gradually delivering more value to the customer and the business itself. There were some quick wins in terms of usability that could have been made without having to complete the entire design.