elaine villano
ux design
senior capstone
About
For my senior capstone, I wanted to explore design strategies to create an app prototype using the techniques I had learned throughout my time at ATEC. My app, Roadie, is for concertgoers who don’t want to worry about preparing for shows and would instead focus on the night ahead. This app provides tools to make going to concerts hassle-free while bringing fans closer to their favorite artists.
Starting off
In the making of Roadie, I wanted to address common issues and inconveniences among fans regarding concertgoing. I began the design process by listing possible features that would alleviate the problems I had faced at previous concerts. From there, I built a rough site map to visualize the elements I hoped to integrate.
Preliminary site-map
User Research
I conducted interviews with genuine fans to learn about their concert experiences and if they had run into the same problems I had. The interview process was crucial in understanding what possible users would want from an app like Roadie. I reached out to 6 individuals who had recently posted stories about concerts and/or their favorite artists. I curated my questions to prove or disprove my assumptions about the general concertgoing experience. To further refine possible app features, I sent out a survey asking which were most likely to be used. After gathering information from 15+ survey participants, I found which elements I needed to emphasize in the app.
Personas based on surveys and interviews
Designing Roadie
The preliminary screen designs combined the data from user research and the flow from the original sitemap. Using pen-to-paper for the wireframing process helped me expand the ideas I originally had and experiment with the transitions between screens. As I made more wireframes, I could evaluate each path to ensure they were intuitive.
Examples of initial low-fidelity sketches. Click the arrows to view more
After working on my low-fidelity designs, I brought them into Figma for further refinement. Here, I started recreating my designs onto a digital medium. My main focus was to get a better idea of how to navigate the app and establish the final layout. Finetuning is essential at this stage because I want to prioritize functionality before continuing the design process.
Medium-fidelity wireframes from Figma
Brand development involved testing palettes and typefaces that would work best on a phone screen. During this process, I wanted to prioritize readability as the interface would be viewed on a small scale. For the overall brand, I wanted to replicate the energy of vintage tour posters while maintaining the simplicity found in most modern apps. I chose a limited color palette to bring more focus to the app's interface with minimal distraction.
DM Sans
DM Sans Bold
DM Sans Italic
Final brand design
Ready to Rock n' Roll
The prototyping stage was the most difficult for me because I didn't know how I wanted to organize the hero screen. Because this screen establishes the overall look and feel of the app, I had to experiment with many different design choices. After refining the visuals, I stitched the screens together to make a navigable prototype.
Roadie's final prototype