Development Democracy: Building great UX through collaboration
A couple months ago we revealed some of our design principles of the BUX web app. We are excited to announce that we will release a first version of the BUX web app later this quarter — Q1 2023. In this first release, users will be able to view our entire asset offering without having to log in.
The making of the BUX web app has been a labour of love involving the whole team. The design and engineering collaboration has been essential to the product development process. I’d love to walk you through how we worked together to build the best user experience possible.
Building trust on our team
At BUX, the product development process is not an industrial assembly line — where designers and engineers function as specialised mechanical arms along a conveyor belt. Whether our job title is product manager, designer or engineer, we are all BUX users as well as BUX makers, and we believe that good product ideas can come from anyone.
At the start of the project, we were all strangers, only united by our common mission of building the best trading web app in Europe.
Working with new colleagues from different backgrounds, misunderstandings are commonplace. As a product designer, I’m used to Figma artboards with complex wireframes and large component sets. Meanwhile, that might seem like a mind-buckling maze and a collection of identical buttons to a non-designer. Similarly, for engineers, rudimentary terms like “web-socket” can be a mysterious technical jargon for us mere mortals.
From the start, we tried to patiently explain all design and engineering decisions to the team. Everyone is encouraged to ask questions, raise doubts and give suggestions. We understand that we are each experts in very different fields, so no question is considered too basic to answer. We always explain our ideas in layman’s terms and aim to reach consensus on contested topics. We don’t believe in design dictators or engineering tyrants. When everyone feels their voice is heard and their opinions are valued, we build trust within the team.
In the last sneak peek, we revealed that the BUX web app will have a different app structure compared to the BUX mobile app. This is to take advantage of the larger form factor as well as adapting to desktop user habits. To allow users to focus on a larger and more complex page packed with features, we are also introducing “depth” in our design language. Highlighted and activated modules will be floating slightly above the background to increase visual impact.
The depth in light mode is achieved by adding subtle dark drop shadow. My engineering teammates assumed the solution for dark mode would be inversing the dark shadow to a white glow. I drew some inspiration from real life to clarify the physics of neomorphism logic. Instead of thinking about black vs. white, let’s think about the shadow behind an object vs. the highlight on top of the object. Just like in day and night — in light mode, we can see the shadow but not the highlight, whereas in dark mode, we can see the highlight but not the shadow. This means instead of having white glow in dark mode, we lighten the object itself in dark mode. Even if this solution would increase the frontend scope, we have all agreed that an important design principle like this is worth the extra resource.
Constant communication
It’s true that I’m not fluent in CSS or Java. But just because we speak different languages doesn’t mean that designers and engineers can’t communicate effectively.
As two arms of the same team at BUX, designers and engineers always involve each other in every stage of their processes to avoid silos. Engineers already play an important role starting from product discovery and design exploration. With their technical input, we can make best product and design decisions that optimise development scope and avoid far fetched design ideas.
Good communication always goes both ways. We don’t believe in the trope of the unhinged designer’s wild ideas getting crushed by down-to-earth engineers. On our team, engineers provide fact checks as well as new technical opportunities.
We have included many micro animations in the BUX web app to brighten up the user experience and reduce cognitive load to aid focus. Thanks to our engineers’ technical input, we can offer all the animations while giving users with vestibular motion disorder a motion-reduced version of the BUX web app.
Collaborative QA
When I worked at agencies in the past, the design and development teams were often working separately. This resulted in some finger pointing during the QA process. Succumbing to deadline pressure, often we had to prioritise quantity over quality. It was frustrating but expected that the live product would miss some of the finesse of the design files.
When building the BUX web app, all members of the product team are involved in each stage of the product development, avoiding surprises for engineers that often result in design mutilation and preventing a classic designers’ mentality of hand off and forget. The design and build efforts are carried out together by the team and are iterated continuously.
One way we ensure high quality implementation is to take QA very seriously. Inevitably design files will have some discrepancy with the app in the dev environment. More than just bug shooting, we also test a wide range of edge cases. This helps us to make small UX and UI optimisations in a live environment.
We use the QA process as a chance to optimise user experience, not an occasion to police design. When we were fixing a bug in the pricing chart for mobile browsers, our engineer noticed that when interacting with the chart with fingers, the page goes up and down easily, which might be annoying for users. She suggested that we can implement a scroll blocker to improve the experience. This way when users interact with the chart on a touch screen device, they don’t have to be careful with the finger gestures and the chart is going to stay centre stage.
First launch in 5, 4, 3, 2…
We are working at full speed, testing and fine tuning the first build. We can’t wait for everyone to explore our more than 2,700 stocks, 200 ETFs and 40 cryptos in the BUX web app!
