Designing UI and UX for a complex and continuously evolving management application (and getting to write HTML/CSS at the same time) requires a focused mindset, flexible toolkit, collaborative team effort and never ceasing to improve and learn on both sides of my line of work, Design and Code. There is always room for a better understanding of the User Experience, for a better application of the User Interface and for better and cleaner code.
Case study
One of our long-term clients poses us with an interesting challenge. This client deals with product placement, operating in two, distinct but interconnected fronts: a customer side marketing site and a backend business management application. Both platforms are built in very different technologies (PHP on the website and Node.js on the app) and we work with them on both platforms
Our intervention spans across design and development processes. We’ve worked on marketing visuals, even aiding on campaign pieces, and we've also collaborated and developed bespoke front-end architecture.
My work as a web designer and front-end developer has varied throughout this long-term relationship. I’ve been involved in the design of a previous iteration of the marketing website and some other marketing pieces like newsletters and, simultaneously, I was involved in the design of the business management app. In the latter, when mentioning a design process, I’m referring in fact a complex and layered operation.
Procedure
The most prominent work I do with this client is on the management app, where I’m required to apply a wider spectrum of my skills set. I need to be able to alternate from mockup designs to writing CSS.
In-depth, the greater part of what I do on the app involves designing the User Interface (UI) and the User Experience (UX). The app is custom-built, and due to the fact that our client has business expanding quickly, with a lot of data and metrics to manage, there are plenty of requirements constantly emerging and eventually posing navigation and data consumption challenges.
I am tasked to work with two teams essentially, the marketing department and the development team. Generally speaking, the marketing introduces the needs and the development meets them with technology. In between, I’m engaged in getting the UI right and develop a proper UX.
This is not easy. There are some variables to consider here. For starters, the users of the app are actually the client. This is a proprietary app, used only by them, tailored for their needs. This means you will be proposing solutions and ideas in a more specific context. On one hand, that context might guide your process but at the same time limits it. This app is massive in terms of data, and it’s handling. I get to work very closely with the development team on getting the data display and data insertion coherent and making sense. This deeply shapes the UI/UX process.
So where to start?
Generally speaking, when a requirement appears or a new data display section is needed, I receive either a text description or a quick wireframe illustrating it. Next step is to get in direct contact with the developers and assess the limitations and feasibility of the intended need.
At this stage, if I was working for another client, I would be doing low fidelity mockups or wireframes to get things going, but for this client, I’m working on high fidelity mockups right from the start. The reason for that is quite simple: I’ve developed a design components library in Sketch App. By moving away from Adobe Illustrator (which is a good app for other scenarios), got to establish a more dynamic and fluid process.
In this Sketch library, I’ve designed a lot of components, ranging from buttons, iconography, image and text blocks, form items etc. All are built with Sketch symbols, allowing for an impressive freedom to extend, override and update them. On top of this, working with plugins like Anima App, and its Padding and Stacks options helps to easily construct a fully-fledged layout in no time, and just as easily, to change or correct it.
Since the marketing department has to present realistic mockups (with simulated data) to their stakeholders, this combination on Sketch allows for a work speed that pretty much matches building a low fidelity mockup or wireframe.
Usually, I get to design and discuss with the development lead, over screen-share. The UX process tends to be more collaborative than the UI. These meetings aim to get navigation and interactions sort out, so I can then refine the layout and present solutions or evolutions to the Interface.
Another outcome I outlined with this library setup was to mimic the front-end component structure and its logic. This is important, because it allows me to narrow the gap between design and implementation. Not only for myself but for who else picks up the project.
I also retrofit my Sketch library, in the sense of a component being created by the rest of the development team directly in code (like a new form field), I want to be ready to have it available in case a new design calls for it.
At all points, one must bear in mind that both UI and UX are subject to refinement, comment or disapproval. This might happen due to multiple stakeholders responsible for decision making.
And how about code?
As mentioned earlier, I am also one of the developers writing to CSS (actually SCSS), and to some extent markup. However, most part of the code is written by the other developers.
Here the work is collaborative and dynamic, following a revision controlled methodology. All implementations go through several validation points, being developed in parallel with other iterations and requirements. This branching management process accounts for better revision, and track the history by logging work through commits.
We work in a ReactJS component-based approach which, to me, makes a lot of sense and facilitates the comprehension of the structural architecture of the app since I mirrored my design structure based on it.
Another upside of working with Sketch is the ease of collecting the CSS properties and assets exporting. In all fairness when building the design components, previous knowledge of how to build things in code (HTML/CSS) helps in creating the dynamic of the Sketch symbols and how they perform and what to extract from them when making the cross from mockup to code.