End-to-end process from site architecture to visual design
Comprehensive branding, messaging, and visual systemRead about it →
End-to-end process from site architecture to visual design
Comprehensive branding, messaging, and visual systemRead about it →
Web & branding design
Want to see more? Shoot me an email to see additional examples of any asset type.
So here's a little about me.
Way back when I started design school, I had to ask an upperclassman what graphic design was. Turns out I’d been doing it since high school, designing our yearbook and school newspaper (they looked horrible). Since then, I've figured out what design is (it looks better now). I primarily do web and product design, but can always be convinced to do information and motion design (and sometimes, if you work hard at it, print)
I'm a product designer at heart, but try to avoid designations like product/UX/interaction. If you’re a designer in SF, you should probably know a little of all of them. So I split my time in code, in interaction, in user testing, in the visual design, in stakeholder meetings, at the ping pong table, at the whiteboard, etc. I like to take things from start to finish: to be involved in the ideation, the iteration, the implementation, and then analysis. You know, this thing.
Outside of work I get far away from the computer. Lately, I’ve been doing a lot of camping, kombucha-brewing, coffee-grinding, triathloning, photographing, binge-watching, rib-cooking, and whiskey-tasting.
If you’ve made it this far, you deserve a look at my resume →
Our growing team struggled for a long time to find a visually-based asset repository that allowed team-wide insight into creative assets we were producing. Our product at Demandforce spanned across 8 industries, each with a unique team producing assets for their industry. In an effort to get the most out of the best of our work, we created an internal repository that allowed us to see new and old work and improve collaboration. We never found a product that did quite what we needed, so in our spare time, we built it ourselves.
The project started with user interviews (internal employees) to evaluate pain points, process, and moon-shot goals. We followed up by throwing together a test repository using the closest product we could find to prove our hypothesis that the project was worth the design and dev time. Ironically, that product dissolved and left the team in chaos banging down our (locked) office door to now complete Tessa (which is what we called the project). Feeling validated, we gathered stakeholders and wireframed the foundational elements of the product. This moved to an InVision prototype that allowed us to go back to users and evaluate our initial concepts. This allowed us to better understand how people would actually use the product, what they really needed, and what they lied about the first time (they always think they know). A few more iterations of this process helped us narrow the scope to an MVP, and we proceeded into front-end dev and visual/interaction system design. With a functional, local prototype in place we went back to users to evaluate and iterate on usability. This moved Tessa into back-end dev where the project tragically got shelved. (Company layoffs and, ironically, the makers of The Noun Project produced Lingo, which was exactly what we needed).
Visual system, product design, responsive design, user testing
Well first of all, I’d finish the project. There is nothing like seeing your hard work get deprioritized. Beyond that, as the company brand manager, it’s important to me to teach other people how do my job. This project was as much a team usability study as it was a product task. I would have liked to see Tessa released into the wild, see how people use it, and enable them to be driving contributors to branding and internal process. I would also have expanded the scope fo the project to include brand guidelines and reusable code/web assets. Since this project, I've started making notes of the many minor tasks that fill the pipeline that could be solved for with a central repository.
The benefit of working internally is that user testing is free and constant. Getting to put every iteration in front of new people that actually use the product increased our velocity and gave us confidence in the usefulness of what we were building.
Though the team had to reprioritize our focus to externally-focused projects, the process effectively became a big UX exercise into how we collaborate and function internally. Through the process, we figured out how to get the most out of the new solution by identifying greatest needs, pain points, and redesigning not the product we use, but how we use it.
This was probably the most fun project I’ve ever done. I got brought on to design the product when the company was truly in its infancy; it was little more than sketches on a whiteboard and a couple Google Docs. The project was so much fun because it was all inclusive. I had the autonomy to look at the product holistically and take it from a blank page to a fully designed, consistent visual system. Normally you might start with something and adapt it to other media. Say for example, you have a simple website, and you adapt it to a product, then a logo, them marketing material, etc. With this project we started with nothing and built every aspect of the brand at the same time. Instead of renovating the kitchen based off what we had for the living room, we started with the foundation and built both at the same time, the product, the website, the logo, the interactions, the colors, the voice and tone, everything. The founders had great taste in design and gave me autonomy to take the design where I thought it should go.
It helped that the idea was good and one I could get behind. The essence of the project was to develop a user-friendly matching system to help people find a therapist that is best suited for their needs. It eliminates the overwhelming nature of databases and frustration with incomplete therapist profiles, both of which plague the current state of therapist search tools. To rethink this experience, Advekit takes both client and therapist through questionnaires and creates optimized pairings based on needs and services.
I started with long questionnaires/discussions about desired outcomes, target audiences, brand principles, values, and color theory. This helped us align on expectations and shorten the design process by having clear goals and phases to product launch. With goals in hand, we thought thoroughly through site architecture, spending quality time thinking about every entry point, interaction, user flow/task, and piece of content. Simplicity and ease of use was important to the founders, and optimizing for an excellent consumer experience drove decision making. We moved on to wireframes on InVision to think through how user flows would play out cohesively. This step helped us tease out aspects of the architecture we missed and consider microinteractions, error handling, etc, that we needed to plan for. The most essential component of the product is the client questionnaire, so we spent the most time working through the user's experience from arrival on the site, through onboarding, and eventually to making contact with the therapist they were matched with. Establishing confident, supportive voice and tone was a focus in this process.
Once these wireframes were complete and the direction finalized, we moved on to visual design. Brand personality was really important to us and we spent a significant amount of time exploring color combinations, illustration styles, and visual treatments to create a supportive, calming visual system. It was also important that the design and experience positioned the brand as innovative to appeal to a millennial audience. We focused this phase on the onboarding process and the in-product therapist experience. These pages were the most unique and most important to the functionality of the product. Once their design was finalized, we fleshed out the rest of the product using the established styles.
Once the illustrations were completed, photography styles selected, colors chosen, and the visual style was applied to all facets of the product, I handed off the files to development and we launched into identity design. Our early conversations on brand values, color theory, and company goals helped immensely at this stage, narrowing the possible direction for the logo. After only a few iterations, we arrived at an identity that fit the personality we’d developed. From this point forward, creating marketing and social media materials was merely a matter of applying our visual system and brand personality to new media.
Product design, prototype, web design, identity design, full visual system, marketing materials, voice and tone, blog
Sketch, InVision, Illustrator, After Effects
In order to cut the time needed for launch, we tried our best to design and develop in parallel. Unfortunately, this meant blurred hand-offs between design and development. In the future, for the sake of the developer, I would recommend finalizing design before starting development. This would allow the developer to better scope the project and not need to take guesses at the kind of functionality I would design into the product.
I think the key takeaway from this project was to get as close to design finality as possible before bringing on development hands. Our developer was excellent, but I think I shot him in the foot a bit by developing my vision for the UX after he’d already scoped dev time.
Trying to design and develop simultaneously meant there wasn’t enough dev time to implement all the interactions and intricacies that I designed. The resulting site is more than enough for a first version and will serve well for validating the concept. As a designer, it’s always hard to see your designs compromised for time. However, also as a designer, I recognize and support the mentality of moving quickly to arrive sooner at the best product and best user experience. So I am happy with where the project ended up, but I am happier with where it will go. I think we established an excellent roadmap for the visual direction of the company as it grows and adds features, and created a better v1 than most people get to launch. The design meets our goals of creating a simple, easy-to-use product that solves a real problem with a supportive, calming, well-design design personality. Within a week of launch, we already had users receiving messages from potential new clients.
This was an interesting project because it didn’t start with a product or even an idea. Most often designers get pulled in to improve the UX of an existing product, or (if we’re lucky) get pulled in from the very start, and bring the idea to life. With Rainy Day it was neither, there was just a question: how might we use technology to improve financial stability? It started with a couple designers and a researcher sitting around a table thinking about the question of financial literacy in the millennial population. We knew there was a problem and a solution to be found in the technology the audience was already using. We brought in a number interviewees, some who we considered financially literal and others who considered themselves quite the opposite. We asked about their current understanding of personal finance, their goals, and how the two were related.
After these initial explorations into the problem we narrowed our question to an addressable issue in reaching financial stability, the emergency fund. We found that both financially literate and illiterate understood the importance of establishing this safety net, but the illiterate had trouble understanding why it was important, how to set a goal, how to initiate the process, and ultimately how reach that goal. With this question in hand, we surveyed existing tools available and identified where they failed to address the need we’d identified. We established and initial direction toward a solution and did some simple concept testing with several quick interviews, and validated our hypothesis. We created a prototype in InVision and initiated a round of testing to evaluate if our direction addressed the goals we set out to fulfill and the pain points we sought solve for.
With more insights on the table, we started the cycle of iteration and feedback until we arrived at the design on this site. We knew we weren’t going to solve an entire generation’s financial literacy problems, but with an understanding of the target audience's needs and past experience, we could arrive at solution that establishes a foundation for financial stability.
The concept is that Rainy Day is essentially a point-of-sale savings tool. It integrates with the budgeting tools you already use, and recognizes patterns in your spending behaviour. Using your location, it provides frequent prompts for possible savings opportunities. Our users wanted reminders of their goals when it mattered, when they were about to spend. From our research, we found that telling someone who lives paycheck to paycheck that they should save $10k for emergencies was an excellent way to ensure that they never would even start. So instead of starting big, we started small. You may not be able to save $1000 a month from your paycheck, but you definitely can choose to buy drip coffee instead of a latte. It’s easy to tell someone they shouldn’t go to the movies, or they should find cheaper housing if they struggle to pay their credit cards. We spent the time to get a deep understand of our users needs, and found that their housing and their social lives were a huge priority to them. So instead of forcing them to change their priorities, we created a solution within the design constraints.
Instead of telling them not to go to the movies at all, we send them a notification when they step into AMC Theater downtown that says, “Hey Chris, enjoy the movie! Today, consider passing on the popcorn and save those $3 instead.” It’s a solution that meets the user where they are in their financial journey and helps them to establish better habits and learn the long-term value of small, incremental saving. It can be hard to plan for long-term savings, but at the point of sale, breaking savings down into an in-the-moment decision about the fate of $3 is much more practical. Establishing trust by presenting ourselves as a brand that understands where the user is in their journey gives us the opportunity to provide thought leadership that is appropriate for the audience through an in-product Learn section and periodic email marketing campaigns that build from the ground up. This ensures that Rainy Day isn’t just a safety net, but a foundation upon which financial stability is built.
What makes me most proud of the solution we arrived at, was that it was built on incremental understanding of user needs. What they wanted was $500 in their emergency fund, what they needed was guidance and small, attainable steps toward reaching their goal. It didn’t presuppose that we had the solution, but instead started with a question, found the root of the issue, and worked with real people to create a solution that directly addressed a real need.
Sketch, InVision, Illustrator
iOS designs, Android designs, UX research, full visual design, prototype
Alongside the company founders and a front-end developer, I designed a holistic brand identity from scratch. The process included web design, icon illustration, branding research and development, copywriting consultation, and corporate collateral design. Take a look at the site at CCaaSConsulting.com
Fullslate was a secondary company/web property our team managed outside our primary role. It was a lesson in waiting, waiting, waiting, and then doing everything in a week. Like demandforce.com, it fell victim to months of trying to find it’s place in Intuit’s diverse and (at the time) disparate ecosystem. (Bitterness over the divestiture aside, as a large company, Intuit has done an excellent job of moving from a house of brands to a branded house). You’ve heard old cranky people say “If I want to get anything done around here, I’ve got to do it myself.” This project was like that. The company went from a tiny startup where decision-making was in a room of 4 founders (that is, the only four employees), to big corporate where it got stuck in a strategy/messaging/whiteboarding/approval process/brand direction loop for months.
Until one day, when our lead developer and I had a candid conversation about the future of the project that soundeda lot like that old cranky person. So we decided to design and build the entire website on our own. And that was all the project needed. We needed something to start with, something to fix, something to run with or scrap or whatever. We just needed something. (And by we, of course, I mean our bosses and their bosses and their bosses who were stuck in that whiteboarding/strategy loop). After months of waiting it was all systems go. The site was fully designed, coded, and live within a week with our first test planned and ready to go after that.
See it live here (Some design/typography changes have been made since it transfered ownership).
We started with competitor analysis as well as an analysis of the other Intuit brands. We need to be independent without being disparate. I moved into wireframes with an initial layout concept, followed by synthesis and rehierarchicyization (not a word) of information from the previous site. This started a coevolution back and forth between wireframes and messaging until we were happy with both. It moved into dev in parallel with design of the visual system. Of course, it's never that simple, once the visual system was near completion, we reworked the messaging (and thus, everything), for a few rounds before setting on the final direction. We followed shortly after with rounds of testing, primarily on above-the-fold content, hierarchy, layout, messaging, etc. optimizing for demo sign ups.
Web design, responsive design, visual system, interaction.
Our product had recently gone through a redesign, which is something we really wanted to showcase. My original concept included a simplified click through demo of the product. I think it would have brought to the forefront the very things our customers love about the product. That never came to fruition, but I think it would have considerably increased engagement and benefited the marketing effort. At the very least, it would improve prospect understanding of the product and improve lead quality.
Like my experience with demandforce.com, I learned that the only way to get started is to get started. Make something, anything, as a launching point (but make it a good guess). It jump starts other people’s creative expertise and can give a disjointed project the framework it needs to get off the ground. In that same vein, I learned that small teams=faster. Need-to-know disclosure/keeping a couple well-intended secrets can let you get actual work done until the time is right to involve more stakeholders.
Fullslate.com got a much needed full redesign with improved brand consistency and intentional, relevent messaging optimized for conversion through testing and iteration. Unfortunately, all our analytics was lost in the sale of the company, but I seem to remember a 1000% improvement in conversion with the redesign (I think it was 6%).
This project was a monster. It was a design challenge in terms of the architecture and information design, but even more than that, it was a people challenge. It spanned 5 general managers, 4 directors, and almost the full three years I was with Intuit. It was more than just a facelift for a site that looked like it was there when the Internet started. It came at a time when our company was figuring out where we fit in Intuit’s brand identity, what we shared and where we should be independent. It came at a time when we were expanding but also focusing on our core product. With the leadership changes came the priority changes. With the priority changes came scrapping our whole plan and starting over. You know how design is.
Long story short, where we landed was that Demandforce wasn’t part of the Intuit brand at all, and after 3 years we were sold to another company (read: more changes to leadership/priorities/personnel/everything). Like I said, the project was a monster. But the fun kind of monster I guess, because now the site is done and we are really happy with it. It’s what we’d call a “journey” in the corporate world to make ourselves feel better about how long it took.
The project taking so long made it so much more than bringing the old visual brand out of the early 2000’s. It was part of a bigger project that included establishing brand identity, style guides, user research, customer archetypes and design personas, brand values, information design, SEO/SEM, and architecture.
See it live here.
This project started with a analysis of our massive site architecture and a large-scale retiring of legacy pages. We followed with a wireframe design concept which drove a full messaging overhaul. This called for the development of a new concept and new site architecture. In addition to being a marketing site, our product pages are regularly used as sales tool, so much of our time was spent weighing feedback from stakeholders around the company. Once our wireframe concept was approved, we moved into dev and visual design in parallel and launched the new site in segments. We actually produced the site twice. The site really needed a fresh code-base to manage the new design. In order to roll out incrementally (not our choice), we had to move through dev once on the frankensteined code-base until the entire site was live, and then again on a fresh, much improved code base afterward. Just a fun little twist management threw at us. The job's not done till you do it twice.
We left responsive design for last since our mobile usership was less than 5%. You can take a look at the InVision prototype of the mobile process. We left it for left, but it ended up being one of the most successful aspects.
What followed was ongoing, incremental testing of messaging and layout to optimized for lead conversion using GA, Hotjar, and Optimizely.
Visual system, 20 web pages, responsive designs, interactions/animations
I would round out our brand overhaul with an actual redesign of our logo. (I asked, they wouldn’t let me). We worked hard to bring our visual/interaction system into this century, but had to wrap it around Arial Black and a bad job of kerning. bleh. I would also go back and restructure our site for more dynamic content. We have 6 very different industries, and I would have loved to cater the experience to each. Designing effectively for auto shop owners and dentists is a completely different task. I would have like to collect industry information early on in the prospect cycle and provide a unique experience to that persona. I think it’s important to make the user feel understood. A generic website is an impersonal website.
Early on, I learned the importance of knowing your visual identity and especially your visual brand. A better way to say that is, I learned how important it is to have a visual identity/visual system. Try redesigning a website under the restriction that you cannot look independent from your parent company, but you also can’t look anything like your parent company… not a lot to start with. I also learned the best ways to cut through corporate decision making. The single biggest thing I learned from the project is that sometimes you just have to design something, anything, so that the powers that be have something to change. It’s easy to assume everyone can think abstractly about incepting a new web layout and generate content for it. But that also assumes they are all designers, so now I’m out of a job. As a designer, a big part of the job is giving non-designers a visual structure within which they can begin to think about their content/priorities/anything they are contributing.
The best outcome I could have asked for is just that the site actually went live (it did). Not just because I’m done with it, but because it means our company now has an intentional, organized architecture that’s built on what our customers are looking for. Before: we had a frankensteined legacy site (active pages from five different redesigns) that was used daily as a sales tool to explain our product, packed full of redundancies and name-drops to prep our company for sale. After: it was an SEO-keyword enriched, well organized site based on a strong understanding of who our customers are, what they need, and the role we can play in their success. To top it off our focus on an effective mobile experience lead to a mobile conversion rate of +17%.
The most productive test I led following the redesign was replacing our standalone form page with an ever-present drawer. The hypothesis was that keeping the prospective customer in the context that lead to their engagement would lead to more form completions. We found that the drawer led to a 35% lift in successful form completions, and that the majority of these came from deep within our site architecture, suggesting that our hypothesis was correct.
A collection of Marketo-ready emails including onboarding, prospect marketing, B2B, and B2C communications. I've also done a number of hero animations for marketing campaigns.
I wont lie to you, print isn't my favorite. But it's still a big part of design, so it's a big part of what I do. I've done lots of projects, from accordion fold brochures, to more standard bifolds, to corporate project briefs, to travel flyers, to packaging, to invoices and letterheads. Even though I prefer interfaces, there is always something exciting about holding a tangible print design piece in your hands.