Redesigning the DataScience@Denver curriculum page to offer greater clarity to the program’s courses.
The previous DataScience@Denver curriculum page consisted mostly of text, and major concerns revolved around whether people would still be inclined to read such technical language in course descriptions when the rest of the page is already so dense.
This project began as a proposal from Brand to bring greater clarity to existing page content through minor copy updates and revisiting page design. As such, we had to step away from our traditional workflow and first generate a mockup of the DataScience@Denver curriculum page to help our Brand Strategist make a persuasive case to the school. Balancing inspiration from the Berkeley School of Information MIDS curriculum page with our limited web dev capabilities, we were tasked with providing similar visualizations for each course listing to amplify reader interest.
Once we got word from the school to further develop this page’s content, I became heavily entrenched in the data science space as I worked to produce a collection of icon-sized [data science] visuals to help illustrate the nature of each course listing.
Part 1: Mockups
My first set of limitations came with realizing we were not going to be able to reformat our courses into smaller, digestible cards, the same way UC Berkeley’s have theirs. Each of their course cards featured the course title and a large corresponding illustration. Users were expected to click each course card and link to a new page for that particular course’s details. Since we were the ones proposing this work, it would naturally be harder to persuade the school to commit to last minute additions of new pages to their site as opposed to a simple remodeling of their current page. Additionally, there was no reason to allocate complex and unnecessary extra work to our Web team.
Conclusions from that discussion meant that I would need to come to a design solution that kept the presentation of each course fairly simple while incorporating the dense course descriptions that, evidently, would live on the same page.
This was a mockup after all, meaning the school could take it or leave with a single glance. To ensure I allocated my time efficiently, I prioritized the component exploration process, using simple placeholders to temporarily fill in for the more time-consuming individual course illustrations/graphics.
During this process, I also consulted a member of the Web Production team to make sure they would be able to implement my design solutions, given certain platform limitations on their end. We were able to run some test devs of each option, and eliminate ones that would cause issues down the road. My goal here was to finesse the usability and design of this mockup, so that all that would be left for me to do, if the school approved, is to drop in the illustrations.
Part 2: Web Page Design
Brand returned with school approval for compA of our mockup deliverables.
The focus of my work in Part 2 of this project was the course-specific illustrations/graphics. I approached these in a similar manner as one would icon designs, since there was limited space within each course component for them to reside.
I pulled all the course descriptions into a Google doc, then read through each one with a highlighter, marking key terminology so that I would be able to use those as key words in my research of existing icon representation and imagery that I could then reference.
Check out the updated DataScience@Denver live site here.
These new course-related graphics needed to reflect existing iconography styles across the DataScience@Denver website to ensure that the school’s brand remain cohesive throughout.
Credits
Brand Strategy: Melanie Martinez | Marketing Management: Abbey Wood | Traffic/CPM: Shelby Bossert | Design: Mimi Shang | Copy (Proofing): Ashley Brown | Art Production: Storm Sebastian | Web Production: Mary Adams