matthew sandahl

UI/UX Designer
case study

Morgan Planning Group

This Minneapolis based insurance firm asked our creative agency to update their old flash based website to conform to modern web and SEO best practices. My goal was to show users how Morgan's services were competitively priced and the value they provided through a smaller family owned team. These objectives ultimately served to lead the user to calling or filling out a webform.

assessing the landscape

After understanding the goals of the site, my first step was to see how other successful insurance companies had positioned themselves through branding and website user experience. This discovery phase is coupled with design research. I visited a number of boards, portfolios and blogs for design and code examples that might help me with my growing vision to create a strong and modern UI that conveys confidence and assurance.

talking points

My next step was to quickly iterate these ideas as rough sketches to see which might hold promise. These helped to organize my thoughts in terms of content structure and flow. It also provides a framework for me to anticipate what imagery and content I should request from the client and which photos we need to source ourselves. I regularly take notes listing objectives and adjectives that encompass the brand. To obtain greatest efficiency I follow a set streamlined process, but I also try to stay flexible to each client's particular needs.

presenting the layout

After the internal team had challenged and refined my ideas I made further adjustments before creating and presenting higher fidelity wireframes to the client. By working in Adobe XD I was able to create and prototype user flows in order to show how each page relates to the other. I managed the online prototype links which also catalogued client feedback.

design

I was involved in every aspect of this website design including UI, UX, photo editing, illustration and animation. We outsourced the photography but I directed the shots as I pictured them working on the site. By shooting portrait shots on a green screen we gained the flexibility to add future employees to the same background for a consistent feel. All indications pointed to a more mature user demographic so at the desktop breakpoint I decided to use a familiar fixed vertical navigation in order to keep menu options top of mind.

partnering with development

Our team was busy with various projects during this execution so to get this project finished on time we decided to outsource the build to Minneapolis based development team, Fjorge. To ensure scope creep didn't become an issue, I created a coded prototype of common modules and elements to ensure code expectations were met.

design system

In addition to handing over design mockups and graphical assets, I also indicated html type treatment, as well as brand colors and white space guidelines. Taking inspiration from author and speaker, Brad Frost, I created atoms, molecules and organisms in order to streamline design and bring a unifying consistency to the end product.

finessing the finished product

After the site was built in Wordpress, I led QA to ensure the site worked functionally, aesthetically and intuitively. I reviewed the front end of the site in Google Chrome for visual errors and the back-end was reviewed to make sure the experience was intuitive for the client. Once the major issues were resolved I completed a comprehensive browser test to ensure nothing was functionally broken. I catalogued and managed bugs using tools like Skitch for image annotation, Dropbox for share links and Teamwork for task management.

launch

This project required not only an understanding of user experience and interface design but a variety of other graphic design skills including advanced Photoshop techniques and illustrative work. Much thought was made to streamline the process while also taking the time to stop and explore a variety of creative ideas in pursuit of the best idea. By balancing the creative aspects and necessary workflow demands our team was able to deliver a product the client was proud of. Do you need help with your brand, strategy, design or SEO? Send me a message to see how I can help.

see more work

let's talk