South Carolina’s oldest and most prestigious insurance training school, Brewer Insurance Information Service is founded on a tradition of excellence that students have trusted for many years.
The Challenge
Design a site that makes it easier and intuitive for users to navigate the site and find what they need easier and faster.
Users have extreme difficulty navigating the current site, which leads to the client's team spending way too much time taking phone calls. It isn't easy to find the courses a user needs and what information they need to fulfill their obligations as either a current insurance agent or one trying to get a license. In addition to that, the client has had to contact our team time and time again to get things such as notifications set up.
My role
UX/UI Designer and Information Architect
My main task was to restructure this entire site and develop a plan that would make things much easier for users to get to what they wanted. This wasn't a task that I could do alone, so I had several in-person and zoom conversations with the client's team to understand their business. Through our conversations, I was able to formulate a plan.
In addition to structuring the site, I was in charge of creating wireframes, high def mockups, and prototypes. I also worked with our developers to ensure that designs were being faithfully recreated and give UX advice on the site's admin side.
approach
Research
To get a good handle of what I needed to do, I had many discussions with the client's team. I needed to understand the users' needs, and with this particular project, there wasn't just one type of user. Users were looking to get into the business, ensuring they knew what they needed to get licensed was crucial. Some users had been in the businesses for a while and didn't care too much about using the web to schedule their continuing education courses. We had to accommodate walk-ins.
I also perused the internet looking for successful online education websites. I analyzed what they did in common and took notes on where I thought they were successful and appropriated that into my designs.
Sitemapping
After researching, I began working through structuring the website. It took a couple of versions, but we narrowed it down to the following design. Of course, things change throughout the process. We had to restructure the course flow even more. Sometimes, you don't get all the info you need all at once, and it trickles in through the process. You have to adapt, but it's much easier to adapt to the unexpected at this early stage.
Wireframing
One of my favorite steps in the process is wireframing. It can go by fast, but you can really start to see things coming to fruition. I like not worrying about images or colors but focusing completely on layout and getting that right. The following are a few of the wireframes presented. Of course, when presenting, I used Adobe XD's prototyping feature, so it gave the effect of an actual website.
Style Tile
After approval of the wireframes, I began focusing on the aesthetic of the website. In this step, I worked through the color palette and some common components that would be used throughout the site. This was never the be-all-end-all, but it definitely helped the client see the direction I was taking.
Hi-Def Mockups and Prototype
Fun time! Let's make a website. The style tile had been approved, and it was now time to implement the aesthetic across the layouts that I had created in the wireframes. Of course, nothing is paint-by-numbers, and a few things were changed or emphasized. A mixture of imagery, custom-designed iconography by yours truly, and third party illustrations were used to pull this whole thing together. The main goal was to create a compelling and engaging look and feel that would delight users.
You will notice there is an embedded prototype of the project. You can scroll through and click throughout the site to get an idea of what was presented.
Responsive Mockups
Adobe XD Prototype
Closing Thoughts
This process has engendered a healthier and more trusting relationship with this client. We've partnered with them to create a site that works best for them and their targeted audience. I am proud of the strides we have made in this project and look forward to the positive impact this newly designed site will do for Brewer.
Scope
UX/UI
Information Architecture
Content Strategy
Wireframing and Prototyping
Visual Design
Responsive Design
Development
Front-End Development
CMS Development
Blog
Checkout System
Event Scheduler
User Dashboard
Online Chat/Email System
Communication
Copywriting
Messaging, Voice, and Tone
Credits
Project Management
Johnnie Matthews
Dana Watkins
Front-End Development
Ryan Menner
Gary Mozingo
Copywriting
April Cassidy
Gary Mozingo
Design
Gary Mozingo
Back-End Development
Jesse Maloney
Matt Breeden
Ryan Menner
Testing
Dana Watkins
Johnnie Matthews
Jesse Maloney
Ryan Menner
Gary Mozingo