BBG Global Design System
Since 2023, GDS powers Berlin Brands Group with a scalable, cohesive design for all webshopsView case study
Helpicam
Empowering individuals to report incidents efficiently
01- Introduction
Helpicam is a Progressive Web Application (PWA) designed to assist people in reporting street incidents, either as witnesses or victims. Collaborating with Asper Brothers, we transformed the client’s initial idea into a functional and user-friendly product.
Company
Asper Brothers, Warsaw (PL)
Tools Used
Figma, MoSCoW Method
Role
UI/UX Designer
02- Problem Statement
Reporting street incidents can be tricky. Many existing apps are either too complicated or miss out on essential features, leaving users frustrated. Our goal was to create a tool that’s simple, fast, and effective, making it easier for people to report incidents and get help when they need it most.
03- My Role & Responsibilities
As the UI/UX Designer, I was involved in every step of the process—from understanding the user’s needs to delivering a fully functional design system. My key responsibilities included:
- Requirement Analysis: Collaborating with the client to understand their needs and define core features.
- Design & Prototyping: Creating wireframes and high-fidelity prototypes based on Google Material Design principles.
- User Testing: Conducting usability tests to gather feedback and improve the design.
- Design System Development: Developing a design system to ensure consistency across the application.
04- Research & Discovery
The first step was diving deep into understanding our users—who they are, what challenges they face, and what they expect from an app like Helpicam. We ran brainstorming sessions with the client and analyzed competitor apps to identify gaps and opportunities.
MoSCoW Method
To stay focused, we used the MoSCoW method, which helped us categorize features based on their importance. This prioritization kept us on track and ensured we delivered the core value to users first. Here’s how we approached it:
Must-Haves (Essential for MVP):
- A simple incident reporting form with photo uploads
- Real-time notifications to track report status
- Easy access to emergency contacts
- Multi-language support to reach a diverse audience
- Multi-language support to reach a diverse audience
Should-Haves (Important but not critical):
- A map to locate nearby authorities
- An option to categorize incidents by type (e.g., theft, vandalism, accidents)
- Push notifications for status updates
Could-Haves (Nice to include if time permits):
- A community forum for users to discuss safety tips
- Anonymous reporting for sensitive cases
- Social media sharing options
Won’t-Haves (Not for this version but maybe later):
- AI-based incident analysis
- Augmented reality features to highlight nearby safety spots
- Integration with insurance services
05- Design Process
Key Design Principles:
User-Centricity:
Prioritizing user needs and ease of use.
Clarity:
Ensuring information is presented clearly and concisely.
Consistency:
Maintaining uniformity in design elements throughout the application.
Step 1: Wireframing
Once the features were defined, I started sketching out ideas and created low-fidelity wireframes to map out the app’s structure. The focus was on making the navigation simple and intuitive, ensuring users could report incidents in just a few taps.
Simplified navigation
Clear call-to-action buttons
Logical placement of reporting features
Step 2: High-Fidelity Prototyping
After finalizing the wireframes, I moved on to high-fidelity prototypes using Google Material Design guidelines to ensure a clean and consistent look. We tested different layouts and flows to see what resonated best with our users.
Google Material Design components for coherence
A refined color palette and typography
Interactive elements to simulate real user interactions
Step 3: Usability Testing
We conducted several usability tests with a diverse group of users to identify any pain points. The feedback was insightful! Some key improvements we made based on their input included:
Making the bottom menu more distinguishable from the background
Adding clear labels to input fields
Introducing a "Back" button for easier navigation
Providing more detailed information in the dashboard, such as timestamps and incident details
Step 4: Design System Creation
To ensure consistency and speed up development, I built a design system that included:
A well-defined color scheme and typography choices
Standardized UI components like buttons, forms, and icons
Guidelines for spacing, alignment, and responsiveness
06- Challenges & Solutions
Challenge: Balancing comprehensive reporting features with a simple user interface.
Solution: We wanted to keep the app simple without sacrificing essential features. To achieve this, we focused on intuitive layouts and progressive disclosure—showing only the most relevant information at each step.
Challenge: Ensuring the application is accessible to a diverse user base.
Solution: Our target audience included users of varying tech literacy. We followed accessibility standards, including high-contrast colors, readable fonts, and voice-over compatibility to ensure everyone could use the app easily.
Challenge: Efficient Communication with Developers.
Solution: Handoff to developers was smooth thanks to the design system and detailed annotations within Figma. We maintained an open line of communication to address any challenges that arose during development.
07- Results & Impact
Helpicam evolved into a practical, easy-to-use app that empowers people to report incidents quickly and efficiently. The app was well received, with positive feedback from test users who appreciated its clarity and usability.
08- Key Takeaways
Reflecting on this project, here are a few things I learned:
Collaboration is key:
Working closely with the client and developers ensured the product aligned with both business and user needs.
User feedback is invaluable:
Early and frequent testing helped us refine the experience significantly.
Prioritization keeps things on track:
Using methods like MoSCoW helped us focus on what truly mattered.
Other Case Studies
View case study
BBG UX Analysis
Since 2024, the UX analysis of BBG webshops has enhanced usability, streamlined navigation, and improved accessibility, creating a more seamless shopping experience.View case study
Wheeshing
Built in 2019 as a PWA, Wheeshing transformed customer engagement and simplified tire selection for a leading tire companyView case study