Case Study:
Iowa City Downtown Arts Alliance Website

Device mockup showing the Iowa City Downtown Arts Alliance website on desktop, laptop, tablet, and mobile screens.

Overview

Organization Background

The Iowa City Downtown Arts Alliance was founded during the COVID-19 pandemic as a way for arts organizations with active community programming to collaborate and advocate for the arts in Iowa City. Representatives from each of the nine member organizations meet regularly to share challenges, successes, and best practices.

Challenge

The Iowa City Downtown Arts Alliance needed to build a first-time presence online. The organization was relatively new, and was seeking to design a responsive website that would provide information about their organization. With a limited grant-funded budget, they needed to establish a foundation for their website to grow from.

Approach

Wireframing
Prototyping
Development

Role

Project Manager
Web Designer
Webflow Developer

Tools

Figma
Webflow

Constraints

Strict Budget
20 Hours

Branding

Style Tile

At the start of this project, the organization provided a logo and flyer as a starting point. These were the only two designed pieces of media they had, which gave me the flexibility to expand their branding.

I pulled the first three colors directly from their logo. From there, I expanded the color palette in tints and shades, adding neutrals to balance them out.

The thing that I found most compelling about their logo design was the slash of color within the “A.” I thought that repeating that shape (a parallelogram) would bring cohesiveness and dynamism to the design. I repeated this shape with the hero images and used overlays in their brand colors to create additional visual interest.

Style tile showing 2 solid-color parallelograms overlapping a photo of people sitting in front of Public Space One. There are 5 color swatches off to the side and the text reads, "The arts are open. Our screens, stages, and spaces are vibrant once again. Downtown Iowa City's nonprofit arts organizations are ready to welcome you! Style tile showing 2 solid-color parallelograms overlapping a photo of people sitting in front of Public Space One. There are 5 color swatches off to the side and the text reads, "The arts are open. Our screens, stages, and spaces are vibrant once again. Downtown Iowa City's nonprofit arts organizations are ready to welcome you!
Style tile to establish basic visual themes and UI components.

Hi-Fi Responsive Wireframes

I used the expanded branding to generate high fidelity wireframes for desktop, tablet, and mobile.

Mockups of the Iowa City Downtown Arts Alliance website at desktop, tablet, and mobile sizes.

Publishing

Webflow Development

I used the designs that I created in Figma as the basis from which I developed the content in Webflow. I added some additional interactivity, including scroll effects. As the user scrolls down the page, the hero headline moves to the left and adds a color fill. I also animated lines between sections that move to the left and right as the user scrolls, mimicking the motion of a curtain opening at the theatre. I love adding subtle interactive elements like this to add small, delightful moments for the user.

Note: I am waiting on the client to connect their Instagram profile to re-activate the Instagram feed section.

View Live Site (Temporary)

Results

Next Steps

The website was developed and published on Webflow in early 2022. I am now working with their team to transition the site to Wordpress.

Reflection

Taking this project from concept to design to development was exciting, because I got to take part in every step of establishing the organization’s online presence. It was also an opportunity create work for a large number of stakeholders and collaborate with members of my local arts community.