Client | School Project
Year | Fall 2022
Type | Web Design + UI
Role | Creative Design + Management
Skills | Webflow, Figma, Photoshop
Denver Interactive Timeline
Creative Design Lead
The Denver Interactive Timeline (DIT) is an interactive online learning experience designed to educate students on the geological and cultural history of the Denver Metro area. It also acts as a hub containing other localized educational resources. I worked with a team of six to design, develop, and integrate this educational resource into Colorado school curriculum. My role was to construct the website, design UX/UI, organize educational content into a visually comprehensive medium, and act as a creative manager.
Objective
Increase engagement with localized history resources in a user friendly and accessible format.
Process
Working as a tightly-knit collaborative team of six, the DIT production team identified a need for more accessible and interactive content focused on local learning. This process began simply, by marking down our exact goals for the project.
Establish Goals
Research
Design and Prototyping
Iteration
Present
Educate and inform about the history of Colorado through means accessible to all ages.
Create an interactive, immersive website with a scrollable and navigational timeline.
Integrate website into Colorado elementary and middle school curriculum approved by state school officials.
Incorporate multiple forms of media to educate, allowing a variety of learning formats.
Goals
As my role on the DIT team was largely creative, the research I conducted followed a few distinct categories.
Design strategies for education and accessibility
Most of the research I conducted in this category was dedicated to discovering educational websites and dissecting their design strategies piece by piece. As our target audience was middle and grade schoolers, most of the websites I visited were focused on educational content for young people.
Selecting a web platform
At the beginning of this project, I was not a web developer. I had no experience building or designing for the web, so it was important that I picked a platform that was simple enough to build a working prototype but also had the customization options required for such an ambitious project.
This research led me to discover Webflow, an online website builder that allows for unlimited flexibility in design without the difficulties of learning HTML and CSS.
‘Fellow travelers’
It was crucial that the Denver Interactive Timeline be just that - a timeline. A lot of the research in this section was spent unpacking how certain websites designed and presented information over a span of time. Deciding on the feasibility of certain approaches in this category was also critical to the success of the website.
Research
Iteration
At the heart of the DIT’s web development was the concept of iteration. As the scope of the project narrowed from a geographical timeline to a purely chronological left-to-right format, the site’s design shifted to reflect the change in our structure.
For example, the earliest form of our chronological organization featured a ‘tabs’ section where visitors could click through five different tab selectors that would show off each of the five historical periods we intended to highlight.
One of the earliest iterations of the DIT.
One absolutely essential piece of the iteration at the heart of DIT’s design philosophy was the concept of community feedback. Our orignal goal of increasing engagement with local history couldn’t be achieved without taking into account our target audience: learners of all ages.
After the website transitioned to the horizontal scrolling chronological layout, we were eager to see how students and educators interacted with it - as well as the feedback they would provide. The DIT’s outreach manager organized and solicited educator feedback through both physical and digital forms that were distributed to six different educators in Colorado’s front range. This feedback was invaluable, and would lead to further design refinements including:
Larger text
Simplified language
Stronger visual contrast to highlight key items
A functional timeline ‘bar’
Focus panels to highlight key themes
Shorter and punchier video content
A ‘For Educators’ page including comprehensive curriculum goals, further reading, lesson plans, and research content.
Iteration of a ‘focus page’ during the development process. Not pretty, but functional.
The final iteration of the focus page on the live site. Scrolling down reveals videos, focus cards, and further reading on the time period.
Design
The DIT’s design was broken into two distinct sections: UX/UI and Visual Design
UX/UI
The most important creative goal of the Denver Interactive Timeline was serving users first. This meant that intentional design decisions focused around readability and accessibility to young learners were extremely important to how the website was going to be structured.
An introductory page of the DIT detailing how the website scrolls.
After gathering a list of websites that laid out chronological events in various different ways, the team settled on a geographical-based approach that would incorporate ArcGIS to show off how Colorado’s landscape and peoples had changed over time.
As design and development began on this approach, it became obvious that a geographical approach was going to be far too time-consuming given the limited team size and short timespan of the project. Instead, the team chose to pivot to a side-scrolling chronological timeline that would allow for individual ‘focus pages’ covering each of our five historical time periods without the hassle of learning and adapting ArcGIS in a web format.
Visual Design
As the prototype for the website began to take shape, it was clear that a cohesive visual style would need to be developed for the project to ensure the experience would feel cohesive, expressive, and accessible. It was at this point that the team developed a style sheet that would serve as a guideline for future visual designs.
The team decides on font styling.
The Denver Interactive Timeline made intentional stylistic decisions in order to further the goal of creating a friendly and accessible learning experience. These include:
Large, bolded lettering
Encouraged easy reading and clear headings.
Concise presentation
Kept things easy to read and to-the-point to avoid losing younger learners.
Colorado primary colors
Site colors would be based around the colors presented on the Colorado and Denver flag to consolidate site identity and align it with the subject matter. Also allowed strong primary colors for visual contrast and hierarchy.
Rounded edges, friendly typography
Inviting clickable buttons, rounded header images and text boxes, and bubbly typography kept the aesthetic of the DIT feeling inviting and accessible.
‘Flattened’ drop shadows
Enhanced contrast and the visual hierarchy of important elements.
The Denver Flag, the inspiration for the DIT’s sitewide color scheme.
A mockup of the DIT’s style sheet and visual design.
Outcome
The DIT was delivered after sixteen weeks of intensive research and design work. The site - built as an educational resource for learners of all ages to engage with local Colorado history - was pushed to educators in November 2022.
The interactive website features a wide array of learning materials accessible to a target audience of learners aged 10+. The DIT addresses 15+ necessary curriculum requirements of local history for the Colorado State Educational Guidelines. A wide array of historical topics are discussed through a diverse range of media forms covering include reading, video content, audio, interactive quizzes, worksheets, and links to other resources focused on telling the stories of local history that may not be highlighted in traditional classroom curriculum.
Working alongside local educators allowed the DIT team to deliver a product built not just for the community, but also partially by the community. We are proud to be in dialogue with the learners we intend to serve, and the DIT formed a strong bond that will make local education easier and more accessible for teachers and students alike.