Street Culture
Making non-permanent, hight quality
street culture accessible.
Project facts
Case study
part of the CareerFoundry UX Immersion course
Tools
Miro
Figma
Pro Create/ Pen & Paper
Usability Hub
Google Forms
Optimal Workshop
My Role
UX Research
UX Design
UI Design
Timeline
Overall: 18 weeks
Full flechesd process
Design Thinking
This project is based on the design thinking process. It fosters creative problem-solving and iterative development, leading to an innovative and human-centric solution.
Problem
High quality street food, art, music, and performances form a strong part of the local cultural diversity. However, since they are non-permanent, they are hard to find for users and not integrable into Google Maps or similar products. For providers of these cultural elements, it is difficult to advertise their offerings to potential users since they are available at different locations and have no recurring opening hours.
Solution
"7 Days of Street Culture" provides a map-based solution to find local street culture, with the ability to see what's happening in the very moment as well as to plan a week ahead. It connects people who provide and seek local street culture.
Competitive Research
I conducted competitive research to gain insights into the features and solutions of our competitors. Identifying 4 of our direct competitors was the first step. The main learnings form the research were.
Most products cover only one Street Culture category.
There is a need for products covering festivals.
A one-week preview seems to be a realistic planing scenario for food trucks.
High diversity in the business models:
B2B, B2C, partner cities, exclusive products.
Some of the main competitor and adjoining products.
Surveys
After the project kickoff, I defined the research strategy and objectives. Understanding the target audience and their challenges were my priority. First, I built an online survey and shared it in various relevant communities. In just a few days, I received 25 submissions. Based on these, I identified learnings which helped to sharpen the focus of the project.
The initial three categories are not clearly understood.
The already existing apps in that field are rarely known.
There are generalists and specialists in the field of Street Culture.
82% of the participants are interested in a product that makes Street Culture more accessible.
Food is the most common interest.
Interviews
During the ideation phase of the project, I conducted user interviews to build new personas and inform the design. I prepared an interview script with 16 open-ended questions, focusing on my target audiences’ values, motivations, and daily routines. In 2 days, I recruited and interviewed 4 users. 2 remotely and 2 in person. I referenced the user interview findings throughout the entire design process. The most important outcome of the interview process was:
Interest profiles: Showing the personal involvement in the 4 categories of each user.
User insight to inform the design.
Personas
I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, I created 2 personas, one for each main planning behavior.
"The Planner" and "The Floater"
They were based on my interviews and surveys, and I kept updating them throughout the project as I gathered more data. I used these personas whenever we wanted to step out of myself and reconsider my initial ideas.
User story 1
As a cultural interested person, I want to find out what kind of cultural events are taking place around my current location, so that I do not have the feeling of missing out.
User story 2
As a cultural interested person, I want to plan a walking tour for tomorrow based on my preferences so that I can enjoy the cultural events with worrying about getting lost.
User story 2
As a cultural interested person, I want to plan a walking tour for tomorrow based on my preferences, so that I can enjoy the cultural events with worrying about getting lost.
User Journey
With the business goal in mind, I made sure that our users reach their goals with ease. I sketched a current-state user journey map to identify opportunities for improvement. The two types of exploring behaviors, and with that, the two personas, have been reflected in the journeys.
User flows
To further narrow down the features and functionality of the product, I generated user flows for the main features based on the User Journeys. They helped to clarify the structure and information flow of each feature. The main learning here was to keep the complexity to a minimum. The simpler the structure, the smoother the user experience.
Sitemap
I created a sitemap to plan and layout the overall structure of the app. From the first draft to the current state, this document has changed a lot based on new learning and insight.
Especially the Card Sorting and Usability Test had a big impact and led to restructuring and refining the sitemap.
Card Sorting
To make sure that the site's information architecture is aligned with user expectations, I conducted 10 remote card sorting sessions using Optimal Workshop. The goal was to find smaller, intuitive groupings for the existing 19 product categories.
After organizing the data, I ended up completely restructuring the site's structure to reduce complexity.
The resulting changes are already reflected in the Sitemap above.
Sketches
I began the design process with low-fidelity sketches and wireframes to accelerate decision-making through visualization without losing time. My sketches were based on the initial user interviews, the business goals, and the heuristic evaluation. I revisited the sketches throughout the entire design process to ensure that I don't lose sight of my primary goals and ideas.
Initial sketches showing the map flow and the onboarding.
Full Lo-Fi to Mid-Fi process (PDF download)
From Mid-Fi to Hi-Fi
Wireframes
Using Figma, I translated my initial sketches into mid-fidelity wireframes. Then, I enhanced them by incorporating relevant stock images and using copies provided by Chat GPT. Adding transitions between screens helped identify weak spots within the flows and refine them. After one round of iteration, the wireframes were sufficiently defined to be transformed into high-fidelity wireframes for user testing.
Remote usability test.
Usability Testing
I created a high-fidelity prototype displaying the three user stories using Figma. At the same time, I started recruiting subjects who fit my criteria for the test. I conducted six usability tests to identify the issues with the prototype.
All findings have been evaluated with a rainbow spreadsheet and sorted by priority using an adapted version of Jakob Nielsen's four-step rating scale.
-
Breaking down the results.
-
Breaking down the results.
-
Breaking down the results.
-
A rainbow spreadsheet was used to rate the issues.
Usability test execution (PDF download)
Usability test report
The results of the clustering and rating process have been presenter into finding slide with actionable optimisation suggestions.
Those findings have been used to enhance the further iteration of the prototype.
Preference test
Based on the findings, I tested three screen optimization ideas in a quantitative, unmoderated preference test with 15 participants. The users had to pick their favorite among two different screen versions and had the chance to rationalize their decision. The outcomes were pretty clear for the Day Picker and the Filter Tab screens. The result for the Bottom Sheet was rather indifferent, but the comments helped to inform the design decision.
Design system
Design evolution from Lo-Fi to polished wireframes.
UI Design
Once the usability issues were resolved, I moved on to designing the final screens in Figma. My goal was to create a visual identity that's aligned with the key values and message, which are "High Quality, Lively, Excitement".
Additionally, I checked the competition and dove into my catalog of references for inspiration.
The process included many optimization steps like:
Grids & Spacing
Material Design Integration
Design for Accessibility
Below you find 3 example slides from the process. A broader overview of the process can be downloaded here:
Design Development (PDF download)
Polished Prototype
Feel free to get a firsthand look and feel at the current results of this case study. To the left, you'll find a walkthrough video of the prototype (1 minute).
If you scroll down, you'll find the interactive prototype to click through yourself.
Design System
With establishing a visual design language I also put a design system into place.
It has significant value by providing a consistent and cohesive user experience across various screens and interactions, enhancing usability and familiarity.
It also promotes efficient collaboration among designers and developers, streamlining the design and development process, and allowing for scalability and faster iterations in creating new features and maintaining the app's visual and functional integrity.
Next steps
01
I would like to spend some more time refining the prototype and implementing some of the secondary features to test them.
02
I would like to conduct user research to investigate the perspective of the providers and artists. There are important questions to clarify before building "their side" of the application.
03
I would like to evaluate the business case. It's a niche product, and the research has been based on people living within that specific street culture bubble. Conducting a more extensive quantitative research would be great to determine if the niche is large enough to build a market for such a product.
Learnings
There have been so many learnings throughout this project that I can't possibly name them all. Coming from hardware design, the most important learnings are in the similarities and differences between both disciplines.
I really loved how easy it is to build and test prototypes. The usability testing procedures in hardware design are similar, but the effort (time & budget) required for conducting hardware tests is significantly higher.
The fact that everything can be tested helps take the guesswork out of designing products completely.
I also learned the power of reusing patterns and frameworks.
Thank you for reading my case study!
Want to work with me? Feel free to contact me!
...or just say hello on my social media.