Most Ohio State sites offer a simple conversion to BUX, with a site’s existing components easily matching to components and templates offered on the BUX website. But some sites have needs beyond what BUX offers, allowing for an opportunity to create something new while still following our brand digital design principles.
Earlier this year, University Marketing and University Communications launched the For Ohioans campaign, which highlights the university’s impact throughout the state. We wanted to create a web presence that emphasized compelling visuals that put Ohioans front and center, using their testimonials to show how the university supports Ohio’s communities — while also using data and proof points to illustrate the big picture and expand individuals’ stories.
Our For Ohioans website design and content goals
The For Ohioans website required:
- A story-forward platform with a strong emphasis on compelling videography and photography to emphasize emotional storytelling
- Displaying of stats and facts that illustrate the problems facing Ohioans and what Ohio State is doing to address them
- Integration of a statewide map that displays Ohio State’s impact in each of the state’s 88 counties
- A robust filtering system to help users sort stories by topic and location
From template to For Ohioans customization
We needed a great BUX starting point to draw our audience into the For Ohioans site, starting with the homepage. That ended up being the BUX Landing Page template, which offers expansive space for photography, more areas for large headlines versus small paragraphs, and multiple ways for users to experience a website.
The For Ohioans homepage needed to include a large image preview of a story and a version of the interactive map. There were several iterations of potential hero areas. Did we want it to be a carousel? A full-width image? A singular story highlight? Should the story title be above or below the story image? We narrowed the options to an extra-large slider that allows multiple stories to be highlighted. The design includes a “peek” of the next story and previous story images to let users know there are more. This is especially important for mobile users, as the left and right arrow controls can be easily missed. Despite this being a totally new component, all of the spacing, typography and other details were informed by current BUX components, mainly the BUX Storytelling Card. This kept the new design visually in line with the BUX component family.
There were several iterations and considerations in hero areas, such as if the story title should be above or below the article image.
There were similar explorative questions for the top navigation. Should the campaign logo be centered or left-aligned? In line with the menu items or above the menu? We explored many ideas on different devices and ultimately chose a centered logo in line with menu items, with the logo slightly overlapping the bottom menu underline. This option best aligns with the look and feel of other Ohio State storytelling sites such as the Ohio State Alumni Magazine as well as upcoming storytelling site redesigns, helping to establish a cohesive experience across multiple sites. Because the number of menu items would be limited, this layout accommodates all menu links and maintains visual balance. While this centered logo layout is different from standard BUX sites, we maintain visual alignment by keeping similar typography, layout and spacing choices.
Next, we took a look at the individual Story pages and immediately knew we wanted the BUX Story page template as our starting point because it offers a solid foundation for displaying long-form narratives and imagery in a clean and user-friendly way. There were fewer unique components for the Story pages, because the default layout is already so video- and photo-friendly. We swapped the single CTA at the bottom of the story for a row of three Cards to guide users to other related stories, and we added in the interactive map. We’ll dive further into the map in a later section.
We repeated this explore-and-narrow process throughout the design process. It allowed us to flex our creative boundaries while staying true to BUX design principles. Once we had near-final designs, we looped in our development team to assess feasibility, refine ideas and uncover any gaps. One key insight from that collaboration was the need for an “All Topics” page — a catch-all for users who wanted to browse by date, tags, or explore all stories without filtering by topic.
County statistics considerations
The display of county statistics was a special feature of this project. We needed to adapt an existing interactive map to display in three distinct versions:
- A full-screen version nested within the For Ohioans site
- A smaller version on the For Ohioans landing page that displays a smaller subset of stats per county
- A small version on a story page that highlights the county where the story takes place.
Given the difficulty of tapping individual counties on a small screen, we added a dropdown selector as a secondary interaction method. Our talented team developed the homepage and full-screen maps to be fully interactive, while the story-page version uses a lightweight SVG that dynamically highlights the county based on a spreadsheet — avoiding the overhead of interactive code.
There was also a design question of how to show off the stats, especially on the homepage. Our usual go-to BUX component for stats and big numbers is the BUX Factoid, and while we loved the visual punch of attention it drew, it had to be adjusted to work with the map. Reworking an already established component kept new designs aligned with all other BUX websites.
(Top) full-screen county map; (Middle) homepage county map with two stats per county; (Bottom) story-page map that highlights the relevant county
Bringing it all together
The final For Ohioans website is a great example of teamwork, creativity and the guiding light of the digital design principles. While the screenshots shared here are from our exploratory Adobe XD files, the live For Ohioans site looks a bit different — and that’s expected. Websites evolve over the course of a project, and iteration is part of the process.
If you have questions or comments about how we used the BUX design principles and design templates as starting points for fully functioning, customized webpages, feel free to email the BUX team. We are happy to discuss this more!