Step-by-Step: the Design Process, in Full

Yoon-ji Kim
The HOBC
Published in
8 min readApr 2, 2016

Last updated: 04/05/16

[WIP] 5.2 | Network is everything.

5.1 | Prettifying stuff. (Identity/Branding)

Once the website was finalized and published, we divided up the tasks for the sake of efficiency and productivity: much of the administrative things were in order, it was now a matter of producing actual deliverables...
– Identity/brand of the event
– Promotional posters/flyers
– Event stage
– Finalize event line-up & equipment needed
– Outreach

While Yoon-ji was in the process of putting together the video, Danae and Lucy tried their hands at some initial brand sketches (playing around with colors, looking up inspiration, etc).

We picked up the branding again post-website, this time for real.

Using patterns that were commonly used in 1930s publications/newspapers (the era when Savoy and Elmore was flourishing), Yoon-ji did some experimenting with patterning, overlays, and honing down colors.

Some examples of said experimentation. She went a tad crazy.

Then, in the midst of looking for more patterns, she came across a newspaper that had a diamond-esque graphic at the front that she was inspired by:

Original graphic –> Attempting to implement
…and going to town
Final logo (BOTTOM LEFT) & flyer iterations

We also invested in business cards to hand to people we talk to about the event, keeping it simple and clear (logo, GoFundMe URL, and e-mail address) to serve as a reminder of the conversations we had with them:

4 | And now…we wait. (But not really.)

Amazingly enough, the analysis of research, ideation/conceptualizing, initial copy, and trailer video took about a week to complete (guess the fire under our butts that is time constraint did us well)—and once the video was uploaded, so was our GoFundMe campaign to raise the initial budget that we need to get the event running (stage materials, food costs, sound…so on).

Speaking of event logistics, we got Dhruva on-board in helping us figure out part of the planning, as well as connect with sound people/local musicians. His expertise will be great in keeping us on track—yay Dhruva!

Note this screenshot was NOT taken at the time of release…we were at $0 for a couple weeks

After a week or two following the release, we found out that fundraising is super…super…super difficult, especially in convincing people to donate for a cause before the cause. While we had no issues getting the link shared and shown to a wide range of people, it was a completely different case when it came to getting donations. Because we didn’t have details ironed out at this time, and kept a lot of our copy rather generic, we realized that effectively piquing interest of the public is different from making people aware and convincing people to take action. We needed more deliverables that educated people and gave them context to our cause.

We decided that the best method to do that was via website.

Yoon-ji was put in charge of creating the flow of the site, while Lucy and Ismael would build the code to make it work; overall, the motive was to keep the message clear and simple to navigate. Keeping this in mind, Yoon-ji sketched out wireframes for an “infinite scroll” website, so that all the information we wanted to present was there—no clicking to page after page necessary. Each “section” would have its own full-bleed image in the background, making it clear when each “chapter” of the site (in correspondence to the “chapters” of the building’s story) is concluded. At the end of the site, we included a section that introduced the music event we were planning, with a blurb on what our vision for this event is to be, as well as links to the GoFundMe page. This served as a way to tie the history back to our initiative, how we were inspired by this rich history to design this sort of solution.

Laying out content/thinking of layout/flow (LEFT) & Initial wireframe sketches (RIGHT)
Digital, more hi-fidelity wireframes

^ Download the full, infinite-scroll wireframe HERE for a better idea on the intended experience

This new awareness piece was also an opportunity for us to reach people outside of our individual social circles—people who would have the connections/resources to help us push the event forward. The site would give them access to the building, its history, and the event in an instant, all in one spot.

http://www.olivetpgh.org, live and responsive

3 | “I hear music in the air”

Over the weekend, we all worked separately on different tasks. Danae talked to Dhruva (a CMU student and friend who is experienced in coordinating music events and part of a local band himself) about music festival event planning, and getting him on-board; Ismael wrote about the history of the building, Lucy looked up old photos of the building and influential people, and Yoon-ji pieced together clips and edited sound (using both sound from the footage and music compiled by Danae) into a rough promo video that will serve as a “trailer” for what’s to come. We met up late Sunday afternoon and took a look at the video Yoon-ji started putting together. It was a good first pass, but too long to pass off as a trailer. It could work as the framework of a longer documentary video (which could serve as a nice final deliverable), but as a trailer it gave too much info. In order to figure out how we could shorten it, we wrote down each piece of the video on pink post-its and took a stab at trying to rearrange them.

Meanwhile, Danae started looking at trailers for other music festivals to get some inspiration. Ismael suggested looking at a trailer for the Fun Fun Fun Fest, which, compared to a lot of EDM music festival promos, had a unique (kind of creepy) style of its own. Danae then googled “music documentary trailer” and found one on Sound City Center. The trailer for Sound City was similar to what we were going for, and thought we could use inspiration from that trailer. Through observing several videos, we learned that we could be even choppier with our clips and overlay/insert large text—so, after getting a sense of what a trailer could look like, we picked out some main points from the original pink post-its,wrote them down on blue post-its, and tried to arrange them in a way that would flow best. In the end, we were able to establish the final order of the trailer, what story to tell, and what points to highlight. Yoon-ji took the new game-plan and took the next 2–3 days to run with it.

The final order of the trailer

After some pushing & pulling, struggling with AfterEffects, and a couple nights of little sleep…the final trailer came together and went live.

Oh, and a pretty little GoFundMe page to go with it, too– https://www.gofundme.com/offday

2 | Let’s make a Thing—but what is that thing?

Now that we had our research in order and findings/insights to work off of, coming up with our solution was next—which, to all of us, was possibly one of the most overwhelming moments of our academic career, considering the scale of the problem, the evident doom that was looming over the Hill in the form of urbanization/gentrification, and the giant time constraint we had, which is graduation.

Yikes.

For starters, we took a stab at laying out the scope of possible projects in the church with the Reverend. There are many, many areas within Olivet Baptist Church that need help, and we had to keep in mind to focus on areas that are high-impact, attainable with what we got on-hand, and able to happen in our allotted time.

From there, we took segments of our initial brainstorm piece that resonated with us and wished to see reflected in our solution and grouped them together. That led us to deciding to focus on one of the most exciting parts of the church history — its community and music — and leverage this history to help Rev. Munson raise funds for the Church.

What better way to fundraise for this historic building than to call back to its history of music and culture? “I hear music in the air…”

…and so began the planning of an Olivet Music Festival.

1 | Take-aways from our previous findings

  • From the get-go we realized that the building we were working with is rich with history — past reincarnations that shook a number of cultures. A lot of our research consisted of finding these stories and understanding the various stages the building went through. We took the time to sit down with Reverend Munson and just listened to him speak, be it about the building’s history, how he got to acquire it, and his vision for its future.
  • For a space that was once so renowned for its major involvement in the growth of African-American history, jazz and gospel music, it is difficult to see such influence within these silent, decaying walls. The church has been left to neglect by the city of Pittsburgh to the point where it is considered “off the grid” in official databases. We saw this since the beginning, and further exploration of the building confirmed this to be true.
  • For 50 years Olivet has been a place of worship, but recently has been weighted down by tragedy, housing funerals, often for people who didn’t even attend the church, for basically no money, and commonly for young people in the neighborhood who fell to violence. While the Reverend sees this as a need and provides for it — “It’s not about preaching doctrine. It’s about meeting needs” — the church is not doing “as much as bigger churches with bigger budgets…’cause [it doesn’t] have a budget.” For the Reverend, his faith is his budget.

TL;DR, what we came to realize was this: Within the timeframe that we have, the most effective way to ground the building as a prominent figure in the Hill & Pittsburgh in both the present and future, is to spread awareness as well as raise funding/revenue.

--

--

Yoon-ji Kim
The HOBC
Editor for

part ux, part visual designer // shoot, scribble, push