Pragmatic UX Design
How applying a no-bullshit approach to UX design led to exceeding projections and driving international expansion.
MY ROLE
UI/UX Lead – shaping the decision-making, mistake-handling, and growth principles of the department.
Close collaboration with the product team and CTO to align the internal processes with goal-oriented flexibility.
MY WORK
Impact-obsession – sketching, wireframing, and building in-house frameworks that facilitate fast-paced shipping cycles.
Super IC – user & market feedback evaluation, 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 overcome my own weaknesses and lead colleagues toward work 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, methodology-agnostic UX design framework based on common sense.
"The Infinite Diamond" – a task management framework for designers.
Three Core Aspects of Success
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 goal for the initial platform was to ship quickly to secure market share and incrementally improve while adding features down the line.
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.
iOS APP
ANDROID APP
WEB CMS
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 we hit the goal of 100 partner cities, things started slowing down. We had inevitably accrued a large amount of development and design debt.
This gave as 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 UX designers at CITIES, we are privileged to have access to various sales, support, and customer success teams, both on the field and in-house, giving us a wide funnel of available feedback channels.
Below are the main sources of input we considered when exploring what shape our 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. A combination of established UX methods and intuitive, common-sense approaches was used to break down the numbers.
Cohort Analysis
A cohort analysis based on behavior is one of my go-to approaches for identifying the underlying usage patterns across the platform. We were able to compare how real use cases align with our intentions and make informed predictions for the future.
This helped us pull back the curtain on how some of our core features, such as the city feed, post creation, and service administration, are used.
Predictive Scenarios
The way I like to ground raw numbers is by constructing a set of projected hypotheses about how a conceptual final product would work in a perfect world, as described in The Lean Startup by Eric Ries.
This is a great way to put your mind to work in the abstract realm. However, all of these hypotheses need to be put to the test at the launch of the MVP with specific tracking data and 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 we 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
Our 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 and plagued by poor tactility and a lack of direct feedback.
Faced with all these mission-critical pain points, as well as a massive stack of lower-priority issues, in classic CITIES fashion, our minds were set.
The decision was made to go all in on a ground-up rework of the entire platform, applying lessons from the past to deliver on the vision of the best possible platform experience for our users.
Shaping The Vision
The Landscape
A key to delivering a compelling product portfolio was understanding the target audience.
Since our 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.
B2C
B2B
B2G
Citizens
For our end users - the citizens - we needed to provide a reliable, up-to-date source of information and a genuine heartbeat of their city.
Business Owners
For our customers who run a business or a non-profit association, the path was clear: simple administration and eyes on the content.
Municipality Admins
For our 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 get 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.
Farming For Dissent
Blindly committing to an idea or concept is extremely dangerous, especially when solidifying the long-term vision of a product.
A tool I find crucial in the conceptualization and decision-making process of any designer: steelmanning opposing ideas.
You can do this to test the strength of ideas on your own or actively looking for alternative perspectives from the team.
The Design Pipeline
To genuinely weave our soul into the product, we needed an appropriate pipeline. I researched everything from Scrum to waterfall, and from Lean Startup to Amazon principles.
In the end, I took a little bit from everywhere and made it my own.
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 best practice, 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 focusing on resolving high-impact problems first and working your way down.
Agility First
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 when "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. I like seeing my products truly breathe and stretch their wings by going high-fidelity very early.
This has proven to have a massively positive effect on the general vibe 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 high-fidelity screens
Going high fidelity early allows me to avoid those time syncs that might not be executable in development because of unexpected content, element sizing, screen spacing or similar factors.
Solving With Pixels
When working on digital products, you eventually have to let your product breathe 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 clear up high-noise pain points first, get everyone on the same page, and then commit to look dev and exploring the real feeling 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 consistent and 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, we employed constant guerrilla-style testing with colleagues, stakeholders, and friends, along with moderated usability sessions to sanity-check our ideas and test their strength.
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 predicted scenarios and 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 a massive success.
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 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.
