Behind the Project: @folk iPhone App Design
March 11, 2017
This project is an app I designed for Myers School of Art students for my 4D Interactivity class. Named after the building, Folk Hall, @folk is meant to be a resource for students to stay organized and informed while taking classes at the school. This app design is one of my favorite projects I’ve completed because I got to experiment with tools for wireframing and prototyping (Sketch and InVision). I wanted to share the story of how this project was completed by showing pages from my process book alongside my personal commentary.
The first step for this assignment was to research and brainstorm ten app ideas. When brainstorming, I tried to think of apps that I would want to use in my everyday life. Two of the ideas on my list were music-related because I am a very passionate music collector. Ultimately, I ended up with the Folk Hall app after discussing the list with my instructor because we found it was practical and would be a useful resource.
After narrowing down the principle idea for the app, I began to come up with possible features and screens that the app could include. I also made some quick sketches and some of these early ideas would end up in the final app design.
Continued research included app name & icon ideas as well as potential questions for a user profile questionnaire. I landed on the name @folk after a few initial ideas because it represented the essential domain of the app: something you would use at Folk Hall.
I realized during this point in the process that the icon had to be cohesive with the name, which meant that my original icon sketches were not useful going forward. I experimented with different forms of the at symbol using an f instead of an a inside. I also started to nail down some tighter screen concepts on paper.
User research was conducted with my classmates, and the results were insightful. I discovered that practically zero of the six individuals I asked used the Myers School of Art website, and some also complained about the quantity of emails from the front office and other departments in the school. Overall, there was a strong enthusiasm for my app idea which I was glad to see. Moving forward I used this information to add additional features to my app, including Room 151 Lab printing instructions and customizable push notifications for announcements.
I looked into many typeface options for my app UI. I picked ITC Avant Garde Gothic because of its geometric qualities; the typeface family also evoked an artist-like feeling which felt appropriate for my subject, and it included a large amount of weights including condensed styles.
I enjoyed wireframing my app screens because it gave me a sense of confidence moving forward knowing how the app would fundamentally function. This part of the process also allowed me to think critically about my app features.
I created an icon and wordmark for my app using the red from the identity for the Myers School of Art. Refining the shape of the icon was somewhat frustrating; however, I think it ended up working well.
The @folk screen designs came together over the course of a couple of weeks, and I think they look very close to my original intent for the feel of the interface. I sourced and licensed iconography from the Noun Project, which saved me time and allowed me to focus my efforts on refining the small details.
Thanks for reading!