The Blue Ridge Parkway Association (BRPA) is the officially designated marketing partner of the Blue Ridge Parkway. As a nonprofit organization of businesses and organizations that serve visitors along the Parkway’s corridor, BRPA needed a site that showcased the Parkway’s scenic experience and served as a database for the organization’s members.
I leaned on my experience as a developer to produce designs for BRPA that were modular and efficient, and allowed the Parkway’s beauty to take center stage.
From concept to system
When I joined the BRPA project team, visual design was already in progress. Steph Loughran, the project’s original designer, was leaving NewCity and I would be taking over afterward. The client team had chosen a design direction based on one of Steph’s element collages, so I had a great foundation to work with.
Instead of diving into page layouts, I started by creating individual design system components atomically based on the direction shown in the collage. Then I designed page mockups using those atomic design components.
Gallery: BRPA Atomic Components
Click to embiggen – use the zoom tool inside the lightbox viewer if you want to read all the
boring wonderful details.
Designing for development
Despite my long history as a design/dev hybrid, this was my first experience designing something that would be entirely coded by someone else. In all my previous work, if I did the visual design, I did the coding as well.
Most of my development experience, however, was in coding designs created by designers who were not me. During the BRPA design phase, I tried to draw from that experience and create design mockups that were developer-focused and addressed issues I often experienced as a frontend developer interpreting design work.
One of the ways I did this was to prioritize showing variants of patterns that I normally have to infer or invent as a developer: color schemes, active states, verbose content, etc. While designing, I made a prototype instance of Pattern Lab to test some of my ideas and ensure they could be built easily before showing them to the client.
Gallery: global navigation patterns
These mockups showed how the site’s global navigation would behave on large and small screens. The in-context examples show how the navigation would behave on an actual page, instead of in the vacuum of an empty artboard.
Gallery: section/sidebar navigation patterns
These mockups demonstrate the behavior of the secondary or sidebar navigation for large and small screens. On small screens, the section nav is collapsed by default and the user can click to expand it.
Click thumbnails to view in lightbox.
These selected page designs show the atomic patterns in action. Since they’re designed using a library of pre-defined components, the pages stay consistent and modular.
Working with third-party tools: TripAdvisor and Time.ly
For both the Parkway and BRPA’s member organizations: mostly tourist attractions, hotels, and restaurants, Tripadvisor is critical. To leverage online booking and showcase the excellent ratings of the Parkway and its member organizations, we needed to integrate Tripadvisor data into the site. To achieve this, we had to work with Tripadvisor’s API, within their visual design guidelines, plus get the designs approved by Tripadvisor before development could begin.
Due to my development experience, it was easy to review the API documentation and create designs based on what was possible within their framework.
Gallery: TripAdvisor mockups
In order to use data from TripAdvisor, the TripAdvisor logo had to be prominent and “as close to the data as possible.” I made these mockups to be approved by TripAdvisor as well as the developer’s reference.
Another third party tool the BRPA site makes heavy use of was Time.ly, an event calendar tool the client was already using on their old site. The new site needed to use the existing calendar data, reskinned to match the new look.
Because of my frontend background, it was easy for me to provide specific feedback to the project’s developers. Once the Time.ly integration was running, I made design changes in the browser inspector then reported those changes to the development team.
This sounds like a backwards approach, but it had a lot of advantages. It saved design time – I didn’t waste time drawing event feeds in Sketch that then couldn’t be applied due to how the markup and API functioned. It also saved the developers from having to review a mockup and reverse-engineer what actually needed to be changed.
Deliverables & Technologies
My contributions to deliverables on the project were:
- High-fidelity mockups of design system components
- High-fidelity design mockups for top level and interior pages using the design system components
- Design files were created in Sketch and managed through Avocode
- Front-end was developed in Pattern Lab (not by me)
- The final site was integrated in WordPress (also not by me)
UX Architect: David Poteet
Art Director: Jenny Slaughter
Designer: Steph Loughran
Frontend Developer: Jesse Janowiak
Backend Developer: Jesse Janowiak, Mateo Morris
Content Strategy: David Poteet
Analytics: Matt Gaskey
Project Manager: Lee Pannell, Nicole Mosley
Design system components and resulting pages were based on the initial element collage created by Steph Loughran
Blue Ridge Parkway Association team:
Brooke Losey, Communications Director
Michelle Summey, Office Manager and Bookkeeper