Re:Design Blog

The Lenoir-Rhyne University Web Redesign Project

Website Design Explorations

Two students show "LR Bears" signs they painted

In early December, BarkleyREI, our website partner, presented us with design explorations for the new website. Everything we have done to this point builds on our previous work with project research and discovery, strategy work, sitemap and information architecture development and testing with primary target audiences, etc.

Revisiting Strategic Needs

During the design explorations phase, we focus on #1 in our strategic needs list.

  1. Create a visual design aesthetic that brings to life the unique LR experience felt on campus and messaging that feels less institutional.
  2. Develop an intuitive, user-driven architecture with clear navigational pathways for prospective students, current students, parents, and other important tertiary audiences. [this was done during our site map and information architecture development and testing phase]
  3. Ensure that all campus and graduate pathways are represented to support an engaging, efficient user journey.
  4. Create more robust program detail pages that fully showcase all that the programs offer to prospective students.
  5. Establish governance guidelines and workflows to help ensure future site quality and success.

In the past, website design typically started with seeing several possible design directions for a website homepage. Once a homepage design was selected, the design direction would inform the design of high-level landing pages.

Since the new LR website is going to be modular in design, we flip this on its head and first start by designing and building out design elements, design patterns and components, which are then incorporated into template designs by arranging components to support the overall purpose of a page. This will provide us with a very flexible and robust website framework that can grow with us and adapt to changing needs over time.

What are Design Explorations?

Before diving in, it is important to define what design explorations are and what they are not. The elements represented within design explorations are NOT intended to be representative of an actual webpage or website.

Leveraging the LR brand, we create various Design Explorations that bring our digital presence to life by including potential user interface (UI) elements, patterns, textures, photography style, typography treatments and more. Each exploration will tell our brand story in a different and visually engaging way. Design Explorations focus on what a screen can look like, not what it does.

—Marketing & Communications

LR’s design explorations are influenced by the Carnegie-Dartlet brand messaging work LR did in spring-summer 2019 and by all of our work on the project to date. Design explorations are a starting point. They are the foundational building blocks of a design system that includes color, iconography, typography, etc. These building blocks will be used in functional patterns that are repeatable configurations of elements that perform specific functions through user interaction (buttons, input fields, dropdowns and so on).

After our selection of a specific design exploration, BarkleyREI will continue to build out the design into a component library that accounts for all content types, and how they will be displayed to website visitors.

The following two images are the design exploration that were selected by LR for further development.

Design exploration showing future website colors, various sans serif typography, buttons, input fields and iconography treatments
IMAGE 1: LR has asked for some modifications to Image 1, including (1) use of a more bold specialty headline font that offers less kerning, (2) use of a sans serif font for the primary, secondary and tertiary buttons, filter chip, checkbox button text and radio button. In this design exploration, you see the introduction of a dark red secondary accent color and tan. These additional colors provide some additional depth and warmth to the overall design exploration.
In design exploration 2 you end up seeing a combination of photos and colors with student quotes, university facts and figures and marketing language.
IMAGE 2: In this image you see a design that utilizes angles and angle textures to break up the design and have it appear less “grid-like” or “blocky.” The design elements complement each other and showcases university photography. The angles are influenced by the use of the chevron used in the Lenoir-Rhyne University logo. Requested changes included, (1) avoid overuse of the chevron like in the three headshots of the students, (2) avoid breaking up the color of featured text, which makes text statements harder to read as is the case with “We Work Tirelessly, and Together, (3) avoid having to upload multiple versions of photos and instead use CSS to change photos to black and white and (4) avoid having to mask or “cut out” people from their photo backgrounds in Photoshop as is the case with the three student headshot selector.

Next Steps in Process

The next couple months will be busy for the Marketing & Communications team…

  • Website content strategy (early December 2020)
  • Select and set up a website hosting platform (by early January 2021)
  • Review component library design (mid-January 2020)
  • Implementation and rollout of new Localist campus calendar

You might be interested in …

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.