Lexend – collaboration with developers
Tools
Figma, Trello, Lean and Agile UX work, Scrum, Sprint
My role
School project
Scrum master
Duration
Apr-June 2023
The project
How do we present a design to developers in the most effective way possible?
The project specification and goal was to successfully create a brand and deliver a landing page, product category page and product detail page. This include handing over to developers.
There is always the challenge in handing over a design to developers and in that handover loose details. To avoid this to happen, we as designers need to strengthen our job. How do we translate our work so that it is both easy to code, while maintaining high quality design?
For this project, the biggest challenge where to create a design in a development friendly way. This is how we did that.
Development friendly UI
So, to begin with, we had to understand how developers work. How could we create a design that is easy to translate to code. Blocks, blocks, blocks.
At the same time we have to create a Figma file that is easy to navigate in. Also a clear design work and brand identity to create room for ideas and thoughts. We have different areas of expertis, so we need to contribute to each other to reach a well done product.
We wanted the structure and components for the developers to work with to be simple, yet sophisticated, and easy to work with.
Wireframes & Design
As I mentioned earlier, we wanted to keep it clean and simple design so that developers easily navigate. Me and my team started to sketch a low/mid-fidelity landing page. Here we could structure a clean and spacious design.
Already here we would have like to include the developers, however, due to other projects, they were not able to attend at this point. We could only prepare as much as possible at this point.
We decided to create a “brand book” with all information needed. Heading size, paragraph size, font-family, margins, padding and image library. Further we created components with instructions.
For this to be successful, we planned a walkthrough of Figma to make it more effective.
Iterative design to develop phase
As we prepared for, the UI work we had needed to be changed to fit the knowledge and ability of the developers. Because of our “open” design file, we successfully communicated the vision and goal of the design, allowing the developers to work independently, however with us designers managing the end result.
Hand-off
Pixel perfect design hand-off to developers with design guidelines.
Pain points
Design cannot be clear enough. There will always be details that will be forgotten and missed.
Interation
Fixing those together with the developers will eliminate the risk of this to be repeated.
Presentation
Once the project was finished, we presented the work. Keeping the brand identity, we decided to make the presentation stand out.
Instead of only presenting the site, we created a story telling, showing the audience what the background story was, how the concept and vision was created and how that was applied to the site.
Below you’ll see a fragment of what the presentation was about.
Learnings
To begin with, I am grateful for having this early introduction to working with developers. Together with my coding experience I can confidently say I know how to communicate as good as possible with developers, from a UX designers point of view.
It has also been confirmed how important and effective it is to include developers as early as possible. You will erase many obstacles before they become a problem with doing this. Having UX designers with an eye for front-end and front-end developers with eye for design, you will work faster and more efficient.