The goal of this project is to design a website that presents information at two levels of detail: basic and extended. The site will be designed with both mobile devices and larger displays in mind. Working together will be myself, Liz, and my teammate, Kenie Tyree.
Our client is the nonprofit organization One Divine Line to Health (abbreviated as 1DL2H), which fights Human Trafficking here in Columbus. Our topic is the premiere of a documentary that features the organization with the intent of raising awareness and funds for its efforts.
Our first step was to create mood boards. Together, Kenie and I compiled screen captures of 18 different websites that we thought worked well on both desktop and mobile. These site's features in terms of functionality, overall page layout, navigation, clean type, and brightly-colored design will be the basis of our design inspiration for this project.
Our next step in our process was to create personas that fit the subject matter of our project. Kenie and I created these personas with the consumers that would be seeking out our product for help in mind, as well as people that would like to get involved with contributing to charities and philanthropies.
Susan is a 37 year old socialite and real-estate agent that works all over central Ohio, but is based in New Albany, Ohio. She enjoys philanthropic work, donating to charities and non-profit organizations, and giving back to her community, especially given the fact that her labors have proven to be quite fruitful. Susan is happily married with 3 children that are in grade school, and being a mother is the root of her connection to philanthropy and staying grounded as a more affluent individual. Susan is interested in funding projects that will build parts of her city up that need attention, and help funding in certain areas they may be falling short in.
Riley is a 22 year old college student in Columbus, Ohio. He attends Ohio State University, and is majoring in Communications. Riley lives on campus with two roommates, with whom he likes to eat pizza and talk politics in their free time. Riley is fairly aware of his privilege, and is interested in social issues, like police brutality and homelessness, and actively tweets about their reform. Sometimes, he attends protests or rallies on campus to show his support. Riley doesn’t know much about the human trafficking issue in Columbus, but heard about the premiere through friends who go to CCAD, and is interested in attending.
We began the design process by deciding what information we wanted to present on the website. Considering our personas, we knew we had to design two different pages for the information that both Riley and Susan were looking for. Beginning on mobile, we sketched some initial concepts for the landing page, and the subsequent "Watch" and "About" pages. We then moved onto desktop layouts.
Refined Wireframe Sketches
Next, we took our initial layout sketches and translated them into refined wireframe sketches that will soon be transferred into Figma Wireframes. We have 6 total wireframes (3 per device). We changed our arbitrary page names, "watch" and "about" to be a little more specific and engaging to our target audiences; they're now called "see the premiere," and "get involved." While they may not look like much at this point, these sketches will be the basis of our finished site.
Using a program called Figma (similar to Sketch Toolkit), we then fine-tuned our wireframe sketches digitally. While doing this, we realized that we actually needed a few more wireframes than we originally planned. Namely, a donate page, a "thank you for donating" page, and a version of each page with the mobile hamburger menu pulled out. These videos (made with the prototype function) demonstrate the flow between each page on mobile and desktop.
We then began to design our comps in Figma to bring these pages to life! Having made a collage board for the premiere campaign, we turned it into a GIF using AfterEffects to add a sexy feature to our home page. Here we have our progress so far, with videos of the GIF background in action.