While working for Lighthouse I was asked to design a series of posters around the theme of Myers-Briggs personality types. Our CEO at the time was fascinated by all of the different factors that go into making such a wide variety of personalities, and encouraged the rest of our team to learn about the different personality types in order to better work as a team.

I found a grouping

While those on the client side were very involved in the project, some of them were more peripherally involved, but we still wanted to make sure those clients stayed in the loop and that we managed their expectations properly. To aid in that I created a project overview that let them know who would be involved at each stage of the project and what to expect along the way.

View the project overview

I created this data map to help us understand how each element of core data (deals, companies, contacts, properties, and loans) informed each type of task or function we were adding to the system.

View the data map

In addition to designing the app itself, I also designed all of the collateral materials that we used to present to the client to keep them apprised of where we were in the project. Because the company was based in Manhattan, I chose to design our roadmap in the style of NYC subway signs.

Design is one of those areas where even the smallest details can hold meaning for the client, and I wanted to take every opportunity to reassure them that we valued their business and their time.

View the project roadmap

Using information gained through client interviews, our business analyst and I put together three personas to help our team keep specific user needs in mind. These were blown up to poster size and hung on the walls of our office. Each persona describes the user’s comfort level with technology, their role within the company, and small details about their professional and personal life.

View sample personas

This accounted for the bulk of our discovery process. Once we had the data map and basic requirements written up I dove into the sketching process, beginning with mobile and expanding into desktop (which we discovered would actually comprise the majority of use platforms).

Because these were intended to present to the client, I took the time to add shading and tone with micron pens and greyscale markers.

View a condensed concept sketchbook

I really enjoyed the sketching for this particular project. I’ve always been inspired by the work of Ralph McQuarrie and Joe Johnston, the concept artists behind the many details of the Star Wars films, and saw myself in a similar position: taking someone’s idea and breathing life and shape into it.

I took this role very seriously, and worked hard to find the balance between being prescriptive enough to move their ideas forward while still leaving them open enough to allow growth and progress.

This particular drawing can be found in the condensed concept sketchbook.

While these wireframes were a little more detailed than I typically prefer to create, they were nonetheless helpful in presenting that bridge between the sketches and what would become the pixel-perfect mockups that came later.

View the wireframe

This is an example of one of the section dashboard screens. Because GoogView the enlarged mockuple Material was our design system and our front-end was being built in Angular JS, it was a fairly simple thing for our devs to translate my design into a functional piece.

View the enlarged mockup

I developed a style guide for our devs to refer to when coding the front-end of the app. Using Mockflow’s style guide builder, I compiled different sections on typography, icons, colours, and spacing.

View a sample style guide page

In addition to the base CRM platform, I also designed an email template for sending digest updates based on a user’s preferences set within the system.

Since email design and development has been an aspect of my professional life since my first design job in 2006, it only made sense that I include it in this project as well.

View the email template