brazilian community portal
Startpage | Event part
PROJECT OVERVIEW
The Project
Zuca is an association for Brazilian culture in Germany. It offers courses and educational opportunities for music, dance, martial arts, language, cooking, political exchange and more in Dresden. In addition, it organizes concerts, theater and other shows around the theme of Brazil.
Key challenges
Users find it frustrating not to receive bundled information about the Brazilian scene in the city. There is little information about events, concerts, courses and other activities.
The Goal
Set up a portal to report on all activities that are offered in a clear and timely manner. There should also be a link to a forum. A blog should be kept regularly. The site should feel like a home for the scene.
The Portal
The app focus lies on a clean look almost reminiscent of a magazine, the style is appealing, fresh, modern and elegant.
The quality of the images is an important factor in standing out to prospective customers, which the app already centres.
My role
UX designer in the development of an internet portal for the ZUCA association from conception to the final product.
Responsibilities
Conducting interviews, paper and digital wireframing, low -fidelity prototyping, designing mockups, conducting usability studies, accounting for accessibility, and iterating on designs.
Target audience
Brasilophile people of all origins, ages, sexes.
UNDERSTANDING THE USER
In sum, users want to know exactly what takes place, when, where and how much it costs. The app should be visually clear, with all the necessary information. Furthermore, there should be a possibility for interaction in the future.
USER RESEARCH | PAIN POINTS
Time :
Time is precious for working adults, they want to use the app efficiently.
Simplicity:
Many todays apps are visually overloaded, too nested and simply not quick enough to grasp.
Information:
There is a lack of information regarding the offers.
29 | Dresden | Shared apartment | Full time student
Marissa
enjoys the bohemian lifestyle with leisure activities, part-time jobs and studying. She is finishing her degree and enjoys spending time with friends. She loves brazilian food, music and culture.
Goals
Receive information about activities
Be part of the Brazilian community
Frustrations
Missing a great concert
Not knowing when and where the next dance class will take place
STARTING THE DESIGN
PAPER WIREFRAMES & DIGITAL WIREFRAMES
Taking the time to draft iterations of each screen of the app on paper ensured that the elements that made it to digital wireframes would be well-suited to address user pain points. As the initial design phase continued, I made sure to base screen designs on feedback and findings from the user research.
LOW-FIDELITY PROTOTYPE
Using the digital wireframes, I created a low-fidelity prototype. The primary user flow I created was to set a reminder, navigate to all tracking details and contact the driver so that the prototype could be used in a usability study.
USABILITY STUDY
I conducted usability studies. Findings from these studies helped guide the designs from wireframes to mockups.
STUDY BACKGROUND
Before launching, I need to find out if all these interactions are easy for users to find. I want to understand what specific challenges users have in using this website to get all the information they need as quickly as possible.
RESEARCH FINDINGS
RESEARCH INSIGHTS
P0 | Users need better cues for what steps are required to find the events page.
P1 | Users need a clear indication where to find the menu.
P2 | Users need a more intuitive way to find classes.
RESEARCH GOAL
Figure out if users can complete the core tasks within the app.
How long does it take for a user to find different pages and more information about the offers?
REFINING THE DESIGN
DESIGN DECISIONS
The goal was to develop a simple and clear visual language so that one does not get lost on the pages. The design should be very appealing, modern and fresh. In a bold style reminiscent of outdoor advertising.
“I am looking for something like an internet magazine about the scene to have all the info and be well connected.” | Hans
MOCKUPS
ACCESSIBILITY CONSIDERATIONS
Provided access to users who are vision impaired through adding alt text to images for screen readers.
Apply a significant tab order.
The possibility to use the site in several languages.
Used detailed imagery and colours to help all users better understand the designs.
The use of a dark mode for sustainability and readability.
TAKEAWAYS
IMPACT
The app offers users a real help in finally finding out about all the services and keeping track of them all.
“The app is great. Finally I can see which shows are on and when my favorite classes start. ” | Edu
WHAT I LEARNED
Through the interviews and improvement loops – the great images and outstanding colors
and the elegant typography – the app almost feels like part of a real product. The consistent application of the product lifecycle was a revelation.
NEXT STEPS
Conduct another round of usability studies to validate whether the pain points users experienced have been effectively addressed.
Conduct more research to determine any new areas of need.
Completing the app with the full range would be the biggest challenge.
