Pragmatic UX Design
How a no-bullshit approach to UX design led to an industry-leading municipal platform with international reach.
MY ROLE
UI/UX Lead – shaping the decision-making, mistake-handling, and growth principles of the department.
Close collaboration with the product team and the CTO to align internal processes with goal-oriented flexibility.
MY WORK
Impact-obsession – building in-house frameworks that facilitate fast-paced shipping cycles.
Super IC – user & market research, data analysis, sketching, flowcharting, look dev, and design systems.
THE CHALLENGES
At a defining time for CITIES, as it transitioned from a startup to a more mature company, the ground-up rework of the platform posed steep leadership challenges.
As a founding product designer, I felt the responsibility to expand my own competencies and lead colleagues toward autonomy and trust.
THE IMPACT
Incredible feedback from team members on the way I approach leadership – with honesty and vulnerability.
"Neutralizing the Noise" – an impact-oriented UX design framework based on common sense.
"The Infinite Diamond" – a task management framework aimed at flexibility.
Three Core Aspects of Success
From my experience, there are three fundamental aspects that will determine the success of any collaborative project to a very high degree.
Unsurprisingly, these three factors are also the most defining elements of a company’s culture, so getting them right is essential.
Communication
I always strive to set up an environment of direct, actionable feedback and autonomy when leading or mentoring. The result is an incredibly high degree of buy-in and ownership of work.
I achieve this by being open about my strengths and shortcomings, and by actively inviting colleagues to solve problems as a team. This inspires internal feelings of contribution, belonging, and motivation.
Mistake Handling
The mindset of learning through trial and error has run through my veins since the early days of learning from obscure forum posts and 240p YouTube videos.
In a professional setting, I handle mistakes by acknowledging them and extracting the lessons without any finger-pointing. In a leadership position, I make sure to lead by example and practice what I preach.
Decision Making
I found that two decision-making principles can 10X the effectiveness of almost any organization if practiced faithfully:
Disagree and commit – the ability to put trust in your team and follow through with an idea, even if you personally disagree with it.
One-way and two-way doors – separating decisions into those that can be adapted later and those that are final allows for quick handling of low-hanging fruit and resource allocation towards demanding topics.
The Old Platform
The idea for a digital platform that would offer municipalities, as well as their businesses and associations, a holistic digital presence, complete with enterprise services such as a waste management system, was born in 2018.
3 Applications
The product stack at launch in 2019 consisted of iOS and Android end-user applications for accessing information and services, and a browser-based CMS for administration and content creation.
Rapid Growth
As the platform picked up speed, we internalized the startup spirit of moving fast and breaking things. We were adding features left and right based on feedback from our municipality partners and users.
The focus was squarely on speed and agility, rather than the long-term picture and scalability.
Evaluating the Status Quo
As the goal of 100 partner cities was hit, things started slowing down.
This gave us time to get more in tune with our platform and the users as we started looking at different ways to refocus the product stack, scale up our infrastructure, and clean up our internal workflows and values.
The Input
As a UX designer at CITIES, I am privileged to have access to the sales, support, and customer success teams, both in the field and in-house, giving me a wide funnel of available feedback channels.
Below are the main sources of input that I considered when exploring what shape the new platform should take.
App & Play Store Feedback
Sales Team Insights
Platform Usage Data
Support Team Emails & Calls
Usability Testing Reports
In-house Suggestions
Competitor Analysis
Lessons Learned
Processing the Data
Raw numbers only tell part of the story. The vital point is extracting value from the data. I used a combination of established UX methods and intuitive, common-sense approaches to break down the numbers.
Cohort Analysis
A cohort analysis based on user behavior is one of my go-to approaches for identifying the underlying patterns across the platform. This helped me pull back the curtain on how the core features, such as the city feed, post creation, and service administration, are used.
VALUABLE INSIGHT
The administrators with a complete page profile were 2-5X more likely to post actively than those with empty pages.
Based on this a page onboarding & setup flow was concieved, which contributed to a 51% increase in administrator engagement.
Predictive Scenarios
The way I like to ground raw numbers is by constructing a set of projected theories about how a product would work in a perfect world, as described in "The Lean Startup" by Eric Ries.
I then validate these theories through the launch of the MVP by tracking specific, predetermined KPIs.
Mission-critical Pain Points
After sifting through mountains of data, making sense of it, and prioritizing it, some large, make-or-break issues were revealed. Issues that could prove fatal in the long term.
Severe Feature Bloat
An honest, common sense heuristic evaluation, complemented by insights from the sales and support teams, sometimes works best. That’s how I approached the re-prioritization of features aimed at end-users, the citizens.
Less than 1% usage
Some features, like the city audio guide, that were included in V1 of the platform were almost never used.
Rigid Architecture
The internal workflows and the resulting tech stack were established with the classic quick-and-agile approach, prioritizing velocity over long-term thinking. Decoding this required some good old-fashioned retrospection and best practice research.
2X longer development times
A pattern of development taking twice as long as predicted was observed, caused by complex dependencies and the inability to work in parallel.
Unintuitive, Isolated CMS
By dividing the users of the admin CMS into different cohorts based on feature use and comparing their patterns to hypothetical ideal-case scenarios, some critical CMS dashboard problems were identified.
Strikingly low engagement
Engagement with baseline features, such as creating content or adding additional information, was unexpectedly low because of poor tactility.
The Decision
In classic CITIES fashion, we made the decision to go all-in on a ground-up rework of the entire platform, applying everything we had learned through research to address these critical problems.
Shaping The Vision
The Landscape
A key to delivering a compelling product portfolio was understanding the target audience.
Since the product portfolio covers everything from regular citizens to enterprise administrators, the challenge lay in presenting tailored experiences for the needs of each user group at exactly the right time.
Citizens
The end users, the citizens and tourists, needed a reliable, up-to-date source of information that captures the genuine heartbeat of their city.
Business Owners
For the customers who run a business or a non-profit association, the path was clear: simple administration and eyes on the content.
Municipality Admins
For the enterprise municipality partners, an overview of services and centralized administration of every aspect of the city was vital.
The Meetings
Shaping a product vision for a complex, interconnected product portfolio is a hugely collaborative process. This means meetings. A lot of meetings. And meetings get a terribly bad rep in tech.
My approach is to reframe the meeting culture to achieve better buy-in.
Diplomatic Innovation
Meetings are susceptible to wasting people’s time through flawed execution, lack of structure or unclear goals.
Shifting to collaborative workshops solves this by adding a moderator who oversees the agenda, sets time limits for both discussion and quiet contemplation, and tables off-topic conversations for later.
The Design Pipeline
To genuinely weave my soul into the product, I realized a tailor-made UX Design process was crucial.
Neutralizing The Noise
After spending a decade in the industry, I gradually realized that if I wanted a UX design framework that goes beyond abstract methodology and focuses on real-world impact, I’d have to create one myself.
That is how "Neutralizing The Noise" was born.
This approach focuses on removing all bottlenecks and pain points from the product development process by adapting at every step, and resolving high-impact problems first then working your way down.
Goal-oriented Flexibility
Another step forward was crafting a task management framework that could keep up with the demands of a dynamic startup environment prioritizing output and flexibility.
This is how "The Infinite Diamond" emerged.
A diamond shape which breaks down the design process into its two core aspects: deep understanding and high impact output.
It can be scaled and chained as needed to reduce the complexity of large projects, manage switching costs, and plan the roadmap.
Crafting The Product
Keep Things Moving
In the early stages of a massively complex project, the most impactful decisions happen while sketching on a whiteboard or flowcharting in FigJam during workshops, meetings, or spontaneous chats.
These methods are top-notch in terms of speed and fluidity when the main purpose is making sense out of noise and moving things forward.
I use them throughout the stages of a project for quick iterations, flushing out edge cases, and ideating abstract concepts.
Look Dev
There is an integral step in the VFX pipeline called Look Dev. It involves exploring different visual and technical styles to preview before deciding on the desired final aesthetic.
I have a similar approach in product design. Digital products truly breathe and stretch their wings in high fidelity, so I bring them there very early.
This has proven to have a massively positive effect on the motivation of both the development team and external stakeholders.
Avoiding Dead Ends
Working with mid-fidelity wireframes leads to misappropriating hierarchy, scale, and space, leaving you to deal with those details in final screens.
Going high fidelity early allows me to avoid layouts that might not be executable in development because of unexpected element sizing, screen spacing or similar factors.
Solving With Pixels
When working on digital products, you eventually have to solve the challenges in pixels.
This includes platform-specific patterns, like the quirky components and colors of Material Design or the vibrant blur effects of iOS.
The way I treat product design is to resolve critical pain points first, get everyone on the same page, and then commit to exploring the real feel of the product in high fidelity.
Systemic Design
Many designers struggle with the fact that a design system is not just a Figma file, but a set of principles that lives across the design files, tech stack and the hearts of minds of both designers and developers.
A Problem-Solving Framework
Most challenges that pop up within a mature product stack have already been solved in the past. A well-rounded design system serves as a framework for solving problems in a time-efficient manner.
A seasoned designer knows when to stretch or break the boundaries of the system if needed and how to retroactively apply the updated principles back into the system for future use.
A Shared Vision
The most underrated payoff of a design system is that it helps create a unified vision in the minds of everyone involved.
This makes it easier to discuss concepts and refine ideas, reduces the steps needed to reach decisions, and smooths the process by providing a tangible reference point during development.
Before Release
During development, a constant guerrilla-style testing with colleagues, stakeholders, and friends was used, along with moderated usability sessions to sanity-check more tangled ideas.
However, the moment of truth came with the company-wide stress testing session.
MVP Stress Test
A focused, multi-week, company-wide testing period was put in place with time allocated for design improvements and bug fixes.
The weeks-long session was not only about fixing bugs and testing the infrastructure along with the UX, but also, crucially, about collecting data that might help us predict what could happen at launch.
112 bugs or UX inconsistencies were resolved during this period.
Validated Learning
The worst way to gather feedback from a release is to just wait and see as the numbers and responses start rolling in.
Before launch I set up a specific set of KPIs to track, such as average time spent on posts or number of page visits, based on cohorts of users who access the app multiple times a day, daily or weekly.
Along with tracking, I also laid out rough outlines for how to react when things go wrong.
Major improvement to tab handling was incorporated quickly after launch, always leading the users back to the last active tab.
The Success Since
A big release is a turbulent time full of uncertainty and expectation, but the path since has been nothing short of spectacular.
A QUARTER MILLION USERS
Since the launch of CITIES V2, the platform has reached over 250,000 users across more than 300 cities in Austria, Germany, and Switzerland.
FLEXIBILITY PAYING OFF
The parallel service development proved to be invaluable, allowing for the lightning quick introduction of an integrated website builder with over 100 websites going live since.
DRIVING TEAM GROWTH
By establishing the in-house frameworks, direct, honest feedback channels and constant retrospectives I achieved a high degree of team member growth and satisfaction.
