Website/UX Design Update For Small Business Accounting Firm In Redding, CA
A Small Accounting Firm Looking To Attract Larger Tech Clients In Redding, CA
J.R. Martin CPA is a small business accounting firm located in Redding, California and they came to the consulting firm I was working with for help in revamping their website design. At first, the client was just looking for a simple design update, but through further conversations, it was determined that the client would best benefit from a design and SEO upgrade. This involved the SEO and content writing team to review and update the entire site architecture, rewrite existing pages to be optimized for better SERP exposure, and add new pages that could prove to add value to searchers who were potentially looking for a CPA.
Optimize The Overall User Experience & Visual Aesthetics For Simpler Prospect Conversion
Once the new site architecture and page content was complete, I was tasked with driving the creative direction, UX/UI design, and managing the team of developers who would build the new site and migrate the client over to WordPress, as well as conduct the Quality Assurance of the final product. I immediately knew that I would need to create a set of page templates that could be repurposed for future use as soon as the new page content was handed over to me. Check out my process below to learn how I managed the project from start to finish.
Understanding The Clients' Wants and Needs
The first step in approaching this website redesign was setting up a meeting with the client to understand what their goals with the new website would entail. I make sure to understand what expectations the client has, what goals and objectives they are trying to accomplish with their new website, and if there may be any new features they would like to add to their website. After our discovery call, I got the information I needed to proceed and to start developing moodboards that would give the client three different options that would visually represent the elements that would define their digital website branding.
Researching & Preparing Visual Moodboards That Relate To The Client's Ideal Customer Profile
Before setting up mood boards for the client to review and choose from, I received the new ideal customer profiles developed from our SEO team and began to review the information. The information consisted of average age range, annual business income (since the client was looking to attract business owners in the tech field), interests, and more. From this information, I was able to put together preliminary moodboards that consisted of relevant keywords we want to associate the brand to, color palettes, typefaces, and a very preliminary mockup of a potential website that would best relate to their ideal customer profile.
Ideation/Concepts
While the moodboards were being reviewed and awaiting approval from the client, I began to review the new copy for each page and began creating wireframes for every page template that I thought we would need. To determine this, I looked at the new site architecture to analyze how many interior pages we would have, and what purpose each of these pages would possess. I also audited every page on the existing site and made an inventory list of every module that could be migrated and integrated into the new site.
Setting The User Interface
Once the client had the chance to review the moodboards and approve of one of the options, I began to start building the basic design system. I started with simple elements, such as buttons, text links, hover states, and slowly moved into more interactive elements on the page, such as the hamburger menu, accordions, slider modules, etc.
Aa
Poppins BoldAa
Poppins MediumAa
Poppins RegularAdding Color, Imagery, & Functionality
After the design system was put together, I started taking the wireframes and began filling in the layouts with color, imagery, and the new web fonts selected. After all templates were accounted for and mockups were created for each, I finally had to create a prototype simply to show the functionality of the navigation, since I made the recommendation to move away from a traditional “float left” link navigation and instead integrate a hamburger slider navigation.
Received Approval To Send For Development
We set up a call with the client to showcase the new design templates and the navigation prototype and received approval to send off for development. I then commenced to prepare the Adobe XD files to send off to developers, export all artboards as JPEGs for their reference, and collect all necessary assets they would need to fulfill the website development.