Get in touch.

Nevermind
Thanks for reaching out! I'll be in touch soon.
Close
Yikes! Looks like the form is busted. Check back later, or try getting in touch with me on twitter
Close
Close
JournalContactMenu
Case Study

From Brand-less to Branded, and Wix to Wordpress

Graham Capital Wealth Management is a wealth management firm helping families and foundations strategically navigate their investments. They came to Brunch asking us to help them attract more young investors, while still catering to their middle-aged clientele. We proposed moving their website from Wix to a custom Wordpress theme so we could fully customize the look and feel of the site. We also worked with them to develop a blog and content strategy to build their reputation as a forward thinking, down-to-earth, and compassionate team of fiduciaries. As the lead UI designer, my main responsibility on this project was developing the visual language of the site, and creating the comps that our developers would use to build the theme.

Project Overview

After reviewing their old site content, we worked with the client team to choose pieces to keep, found a few parts that needed massaging, and then filled the gaps in between. To make the site easy to update and expand upon in the future, we chose to build the visual structure off of a lego block-like system. All sections of content could be dropped in and dragged around for easy reconfiguration. I had to design 14 unique pages with three different breakpoints, so there was no room for vague layer names or careless artboard placement.

My roles and contributions

  • Lead and executed the UI design
  • Assisted with content strategy alongside our creative director Andrew Morgan
  • Was one of three direct contacts for the client. This involved presenting work, packaging and sending final deliverables, and answering questions
  • Was the quality-assurance stakeholder for our development team
A mockup of the finished Graham Capital homepage above-the-fold area, alongside two photos of the Sketch design file used in the project.

Refreshing the UI alongside our design process.

Prior to starting this project, I had been researching ways to be better organized when designing website comps. After noodling around with ideas for process and naming conventions, I eventually had enough material to begin testing the system on an actual project.

Pressure testing my new Sketch file hygiene actually ended up being the most interesting challenge for me in this project. Since our client was in the finance industry, the visual design of the website did skew more conservative and simple. They asked for something new and attractive to their younger audience, but we still had to toe a line to not scare off their older clientele. Anything that came off as “trendy” just wasn’t appropriate for this project.

We used mood boards to help get on the same page with our clients about what kind of new look they were going for. I paired client-chosen descriptive words with accompanying visual treatments for different areas of the site:

A mood board that provided the visual foundation for the graham capital website aesthetic

They asked for boldness, confidence, and transparency; I suggested we dispel any feeling that they are hiding information “in the fine print” by making everything large. And not just “yeah, you can read everything comfortably”-large, but L A R G E to the point where text is “spilling” out of its container. This forces headlines to be short, to-the-point, and easy to understand.

They asked for crisp, clean, and easy to navigate. I made the majority of the interface subtle, letting the content take the spotlight. The goal was to nudge visitors to the blog, where the meat of their content lived, so I made sure to build in opportunities to highlight relevant articles without over saturating each page with desperate calls to action.

Building a Design System in Sketch.

While I was finishing establishing the visual design, I was also designing the way the Sketch file itself was organized. If you're curious about the details of this system I've documented it in detail over in my journal. I saw massive opportunities to save ourselves hours upon hours of headache and needless frustration (and, in turn, lots of money) by standardizing the comp design process. Working in Sketch (but keeping in mind how this would translate to any similar UI design tool), I was faced with the following big questions:

How can I standardize the way artboards are placed next to each other to make it easier and faster to find the one you’re looking for?

What’s the best way to organize symbols so someone can easily find the symbol that they need, or see if it hasn’t been created yet? How can we create symbols that let us quickly build new pages with existing components, but also have the freedom to expand and change the visual design as a whole when the time comes for a redesign (because those are inevitable)?

How can I make notes about interaction, animation, and any other non-static design elements easier for our developers to access and understand?

As I lead the charge developing this organizational system, I had to remind myself that it had to make sense for my teammates too. One especially valuable critique our lead developer, Andrew Dederich, offered was to change how I was naming the Pages in Sketch. Originally, I would have every “default” page state and its respective screen-sizes on one single Page titled “Base Page Templates.” Then, all of the user-flows that I needed to create for the InVision prototype would be separated into their own Pages, examples being: “Using Global Search”, “Adding Item to Cart”, and “Forgot Password.”

Instead, because Graham Capital’s site flows were mostly basic interactive states (hover effects and form field inputs), Andrew suggested each unique page of the website get its own Page in Sketch, and then any associated flow or interactive state also live on that Page. This was more helpful for the devs because it provided them a site map inside the Sketch file.

Wrapping it all up.

With final approval from the client on the visual design, it came time for “the handoff” between me and the development team. Since I had been working with them in the Graham Capital Sketch file to develop the organization system, they were already prepped on what exactly they’d be building.

From there it was my responsibility to regularly check in with the build to ensure the real-life thing matched what the client was promised in the visual prototype. This means keeping an eye out for all of this (across all breakpoints):

  • Type sizing is correct
  • Interactive behaviors are smooth
  • Links point to where they ought to point
  • The Wordpress custom fields are labeled well
  • The right images, icons, and photos are in their proper places
  • The margins between components and sections are correct

In the end, we delivered a robust website, an in-depth Wordpress tutorial, and a strategy for how to make the most of their new publication space.

Go to Graham Capital's Website

Three browser windows. The first displays the Graham Capital homepage, the second displays the Graham Capital blog, and the third displays a blog post.

Personal Takeaways

  • I gained greater confidence not only presenting work to tough stakeholders, but on calls with 20+ people.
  • I became comfortable breaking out of our typical waterfall workflow and adopting more agile-like methods to better collaborate with my teammates.
  • I gained more experience in crafting different viable solutions and articulating the consequences (both positive and negative) of each.