Morgan Planning Group

Web Design
This Minneapolis based client asked us to update their antiquated flash website to conform to modern web standards and SEO best practices. Beyond updating their site to me more modern, we also aimed at introducing Morgan Planing Group, as well as informing users about their services and explaining the advantage they have with a smaller family owned business through personal customer service and cost savings. Ultimately all these objectives served to lead the user to calling or filling out a web form through the Contact Page.

Discovery, Competitive Analysis and Creative Exploration

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 inspiration research. I visited a number of design boards, online portfolios and forums including dribbble, pinterest, behance and codepen for design and code examples that might fit this particular client. These examples led me in the path of considering a strong and modern UI approach that instills confidence an ease with Morgan; layout designs started to materialize in my mind. The next step was to quickly iterate these ideas as rough sketches to see which might hold promise.

Low Fidelity Wireframing

Quick sketches help me to organize my thoughts in terms of content structure. It also provides a framework for me to anticipate what imagery and content we should request from the client and which photos we may need to source ourselves. As indicated in this photo, I regularly list out objectives and one word ideas to guide my wireframes and solidify ideas that have been ruminating in my mind. Though I try to keep my process streamlined and clearly defined, design is a constantly evolving and re-adjusting process. I may go through two or three rounds of sketches before I show them to the internal team for feedback. After the team has challenged my ideas and added their thoughts I will make further adjustments before creating higher fidelity wireframes for the client.

High Fidelity Wireframes

Before presenting high fidelity wireframes to the client I preface my presentation with explaining the purpose wireframes serve and the type of feedback I am looking for. Clients often confuse this stage in the process for proposed copy development and design so I never include any copy or imagery that might be confused for suggested work and thereby mitigating any untimely feedback. By working in Adobe XD I am able to show user flows and elementary prototypes of all pages and how they might relate to each other and work as a whole. A link to this wireframe prototype can be sent to the client to review at length privately. Comments can be catalogued through the same online link and reviewed in real time, or sent by traditional means in an email for implementation.

Design

I was involved in every aspect of this website design including UI, UX, photo editing, illustration and animation. We outsourced photography but I directed the shots as I pictured them working on the site. Candid photos were framed with plenty of open space either left or right of the subjects, which afforded us the space to overlay text beside them on the site. I asked that we shoot portrait shots on a green screen so we have the flexibility to add staff shots in the future for the same background. After we received the RAW portrait images, I removed the green screen background and placed them on a consistent modern background.

In order to cut down on production time I purchased the iconography from a stock site, but I manipulated the style to fit the colors and overlay effect I had drawn on from their existing logo. I decided to use iconography to better help users understand Morgan's services and values. Icons were displayed side by side using the CSS flexbox grid to ensure it scaled to all device viewport widths.

Considering how confusing insurance can be, I decided to use a fixed position side navigation in order to always keep the menu options within view. For seasoned web users who remember web design in the 90's this side navigation pattern may seem like a throwback to an earlier time. But considering the purpose of visibility and the clean design I implemented, I believe it appears self aware of this UI pattern and confidently does so while still feeling modern.

Prototyping with Webflow and InVision

Our team was busy with a lot of different projects during this execution so instead of outsourcing the build to our usual developer we worked with the Fjorge development team to get this project finished on time. This new relationship made it imperative to explicitly demonstrate design ideas, which I did through Webflow and InVision and follow a task management process, which we did through Teamwork.

Through Webflow I was able to illustrate the responsive sizing of the sidebar navigation using viewport and minimum widths as well as button and logo animations. Webflow is by design a visual development tool so it actually outputs clean HTML5 code. This allowed the Fjorge team to directly lift the logo animation and include in the final build.

Per my usual process I was able to mockup desktop and mobile designs in Photoshop using layer compositions to indicate alternate page states and sync to InVision. There I was able to create hotspots, indicate page transitions and site architecture. This fully interactive prototype served as the client's first chance to see the final site and last opportunity to leave design feedback before development handoff.

Dev Handoff

 In addition to handing over a library of design mockups and graphical assets, I also indicated header and paragraph type treatment, as well as brand colors and general rules of UI proximity. 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. I included those modules and patterns in the dev handoff to illustrate that consistency of form despite a change in content.

Quality Assurance

After the site was built in  Wordpress, I went through a two stage quality assurance process. Stage one involved meticulously analyzing and detailing the front and back end of the site. The front end was reviewed in Google Chrome for visual errors and the back-end was reviewed considering the client user experience. Once the major issues were resolved, I began stage two with a complete browser test to ensure that nothing was inherently broken. All issues and bugs were catalogued and managed by using tools like Skitch for image annotation, Dropbox for share links and Teamwork for task management.

Conclusion

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 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 we felt proud of.
See the live website

Let's Collaborate

sandahldesigns@gmail.com