ArborBridge Website

When redesigning ArborBridge’s website, our goal was to make their brand feel more modern and welcoming. By blending hand-drawn elements with sleek geometric patterns, we crafted an aesthetic that was both approachable and polished. This redesign resonated with our client, leading them to keep us on retainer for continued design and marketing services.

Role

UI Design

Mood Boards

Based on their answers to our brand survey, especially regarding their target audience (parents and students) and their desired brand traits (modern, welcoming, polished), I put together two options for how their new brand could look and feel.

  • Fun, Colorful, Organic

    Abstract geometric shapes and expressive photography creates a warm, whimsical tone that would appeal to students looking for tutors they feel comfortable with.

  • Clean, Minimal, Geometric

    This feels like a more upscale, sleek, museum-like experience that would appeal to parents searching for a top-tier tutoring service.

  • Color Inspiration

    Smoky pastels with a strong pop of color for areas of emphasis feel both fun and refined.

Style Tiles

Round 1

The client wanted to blend elements of both the “Fun, Colorful, Organic” and the “Clean, Minimal, Geometric” mood boards, so I explored both in the style tiles.

  • Clean & Vibrant

    During our meeting, the client indicated they liked the clean monoline icons presented in the minimalist direction. At this stage we explored how (if at all) to incorporate color. In this option I kept the icons colorless to stay closer to the more minimal direction.

  • Warm & Natural

    This option incorporates warmer colors, organic shapes inspired by plants, and hand-drawn elements. It aligns more closely with the “Fun, Colorful, Organic” direction.

  • Innovative & Bright

    The font in this option leans more youthful and modern, and the cleaner patterns feel more techy.

Final Style Tiles

Fonts
 

The client selected this font pairing of a modern serif and a clean sans. The serif feels academic and elegant but not stuffy, while the designed-for web sans creates an easy, inviting reading experience. The balance of the two strikes a balance between approachable and polished — the sweet spot our client was aiming for as part of it’s brand refresh.

 
 
 
Colors & Icons
 

The color palette was a sophisticated take on a primary color scheme. Primary colors are often associated with education and children, so we thought giving these colors a modern twist would work well for our client, an online tutoring brand that targets middle and high school students. To symbolize growth, we introduced mint green into the palette. The complete color scheme consisted of smoky pastels with strong pops of color for imagery and areas of emphasis, balanced by light neutral tones for backgrounds.

The selected icons subtly integrate color with a clean, monoline-style, creating a modern and inviting aesthetic.

 
Patterns
 

The plus sign and arrow symbols in these patterns represent growth and improvement. The lightning bolts represent the efficiency of the program.

 
 
Image Treatments
 

The bright bursts of color paired with plenty of whitespace creates a clean and professional look while offsetting it with some fun elements, such as colorful patterns and upward-pointing arrows. The collage and layering effect also supports the idea that students are multilayered, multi-talented, and dynamic.

 
 

Wireframes

At the wireframe stage, I worked out the text hierarchy and general layout. For the scope of this project, we created desktop and mobile wireframes for just two core pages (the homepage and “Our Services” page), and then moved straight into UI mockups for the sake of efficiency.

 

Final UI Mockups

UI Details

  • Text Highlights

    We included a hand-drawn highlights and the ability to bold text for various levels of emphasis upon scanning.

  • Icons communicate at a glance

    We added icons here to create visual interest and to help readers get a quick overview upon skimming the page.

  • Drop shadow for emphasis

    We added a drop shadow here to increase contrast and emphasize that this contact form is interactive.

  • Coral reserved for CTAs

    We reserved the boldest color in the palette for buttons and links, ensuring a clear indication of clickable elements.

 

As the lead designer on the project, I designed most of the website, including the homepage, the services page, the about page, the resource library, the blog post template, the pricing page, and most of the individual service pages, including the SAT and ISEE pages. A very talented developer made my designs a reality. I was very grateful to work with such a talented team!

 
Previous

Rio Website
Next

Verve UX Design