How to improve my UI / UX to Development Workflow
If you are a developer, client or agency – your goal should be to ensure each project phase undergoes a smooth process from start to finish. Every instance where a project needs intervention, discussion, changes and revisions – you are slowing down your productivity and potentially augmenting your costs. Today we will look at this process, with a focus on design to code and how this process can be both streamlined to reduce excessive costs but also guaranteed in order to increase the quality of the resulting process. Who doesn’t want to do something faster and better at the same time?
Who is involved in the process?
First step is to consider your stakeholders. At our agency, we assess not only the client representation but also our internal teams. Each step of the process involves the project lead vetting the quality of the delivery in all prior and subsequent stages. This ensures there is a strong sense of cohesiveness at each point of the process and that the resulting product matches the design-intent.
Within our organization, we consider both business and marketing strategies from the beginning as part of the entire planning phase. This is where we collect requirements, make advisements and collect information on priorities and objectives for new or existing sites and applications. From here we move to UI / UX, which is where we build up simple wireframes and work out prototype interactions, collect feedback and discuss relative sizes and positions of screen elements. Subsequently, we translate this into a design and re-review the entire app again with all stakeholders. Upon pending approval, we then move on to the development (coding) phase of the project where we finally transform the app from concept to reality.
As a project moves through from planning to testing (and ultimately release), we want to ensure that the quality remains exceptional each step of the way. We do this by taking on a holistic approach: ensuring each subsequent step is reviewed by previous steps while pulling guidance and direction from future steps.
Parallel to this, we need a way for the Client to review our work and provide feedback throughout the entire process – in an efficient way that minimizes the need for the client to leverage their own tools. You want a process that lets clients with any skill level provide useful feedback, without requiring a project manager to copy-paste or add comments to a document or design manually – but you also need to ensure this process is managed and completed before moving further down the track to the programming and release phases of your application.
Improving the UI UX to Developer process
We could write about the entire process from start to end, but today we are focusing primarily on the critical step where a UI / UX design or prototype becomes code. This is the bridge point at which you can argue the phase shifts from creative to technical territory, or from form into function.
How can I minimize changes and iterations of work?
One of the quickest ways to reduce the amount of differences between each step of the process is to ensure there are none. Fortunately, there are more and more tools out there that do just this and we focus on processes that ensure source code is automatically generated by the developer’s design tools – often without any prior technical knowledge on the designer’s part.
Parallel to this, we make it easier for clients to get involved early with designs by enabling comments, encouraging collaboration and requesting feedback directly in the design files themselves. Project managers can then spend more time working to resolve the potential changes and less time relaying messages or compiling emails into task lists.
Together, with client input – the people responsible for project planning and the information architecture (marketing strategists, business analysts) can all add their input into the design process and review if the UI / UX solution meets the requirements for the new/improved application.
Effective smart solutions that don’t reinvent the wheel and keep risks to a minimum are ensured by proactively involving stakeholders from subsequent steps in the more current processes. For example, if we are currently at the green UI / UX phase, the prior step might be quality checking to make sure designs are inline with the client’s needs and future steps would be for clients to review all work to let the Provider know if those solutions are the best, and if not – are there any smarter, simpler, more cost-effective ways to get things done.
Brief process history
People have of course been working to streamline this process for several decades. The world seems to work in cycles and the internet is no different.
Back in the late 1990s, the rage was all macromedia and fireworks were the preferred tool to help speed up the design-development process, but after Adobe purchased and then promptly terminated the macromedia range of products, many web and app designers fled to the only tools left on the market: Adobe Photoshop and Illustrator. Sadly, however – this meant a step backwards in terms of productivity and efficient design-programmer processes.
Flash forward 20 years to 2019 and things have come full circle, only better. Adobe once again has competition in the UI / UX design tools arena, with many other resources out there. The most popular arguably being: Sketch, Figma and Adobe’s own XD.
Today I’ll skip comparing the three, but if you want to dive deeper into this, there is a good article on Smashing Magazine that looks at the top 3 UI UX tools and compares their features. Instead, I will be focusing on process and how you can ensure that you have strong efficiency in your creative-technical workflow to help reinforce both quality as well as cost-efficiency.
Traditional UI / UX Workflow
The traditional workflow in the early 2000s was that a designer would create their UI / UX masterpiece in Adobe Illustrator or Photoshop, and then hand this over as a series of images for a client to comment, then to a developer to cut up and export assets to get it into code. This process was tedious and extremely error-prone for a number of reasons:
- Annotating designs required importing them into a second tool like PowerPoint in order to add annotations.
- Client or team comments would need to be done outside of the design file and referenced, or involves clients manually adding circles around things to show what they wanted changed.
- Developers would need to own a license to Adobe products in order to open the source files to extract information like font sizes, colors, sizes and image assets
- Designers sometimes had to spend precious time documenting fonts, colors, sizes and batch exporting assets for developers if the developers needed more clarity or didn’t have the necessary software to self-obtain the styling information of the design.
- Developers needed to write their own style guides (CSS / SASS) in order to approximate the design. On large complex projects with many templates, this would quickly turn into a long process of refinement where all margins and paddings would either need to be documented as annotated rules the developers could reference, or tedious iterations of pixel changes in the various templates in order to get all the sizes to match the designs provided.
Modern UI / UX Workflow
Now with the advent of Sketch, Figma and XD and various other collaborating & prototyping tools, we have a far more streamlined process available. Of the 3, Figma and Sketch are still our preferred tools, so we will hone in on the differences and processes available in these two.
The full Sketch UI / UX process
Sketch allows you to leverage symbols and build up all of your various Web / Mobile app screens. Changes to the symbols carry forward to all of the pages and allow one to easily propagate changes across many pages or screen states. However, since Sketch doesn’t intuitively offer collaborations within the software – we’ve coupled Sketch over the last years together with Craft in order to pull designs over via synchronization into Invision.
Then clients as well as developers and other stakeholders can add comments and annotations directly to the design screens and discuss concerns, suggestions or necessary changes to the designs intuitively via Invision’s web interface.
Since Invision has different comment options, we like to group discussions and client changes under the default “comment” type and use “notes” instead as our way to communicate functionality to the developer so the developer understands how something should work later when coding.
Our process here becomes pretty straightforward in that all comments should be resolved before we are done with review, but all notes should remain open until all functionality in the designs have been implemented.
Figma UI / UX review and delivery process
In some ways, the Figma process is simpler than the Sketch process because you work from a single application. Each project can have View permissions set up for multiple collaborators and your customers. However, the one area that is lacking (at this time of writing) is a clear separation of comments (from a client or stakeholder) and notes (information for developers). So, a secondary process here is required to retain developer notes from client comments – this is a real consideration as it can lead to quantifiable lost hours in your process.
However, gone are the days where a second tool like Invision to handle the comment and code / asset export process is needed. And while Invision does have a free plan, this will not go far and you’ll need at least one paid account for one user, which is currently nearly double the price of a Figma account. Add to this the price of Sketch licenses (per seat and requires ongoing paid upgrades), and Figma is more than half the price of the Sketch+InvisionApp process – which is certainly a consideration for any growing agency that needs to watch cost overheads.
Prototype UI / UX workflow integration
While InvisionApp does allow you to sequence screens togethers into an interactive prototype, we personally enjoy using Principle as our tool of choice to animate our prototypes and build up a library of animated sequences. Principle will let you animate sections of the site and create a full experience for your clients and developers but it will not natively export those animations later on as code for the developers to integrate. In other words, developers will need to approximate the animations – which may not be ideal.
If you want to generate prototypes and have those be exportable to Javascript, you could focus on Framer X which uses Coffee script and further integrates your design-to-developer process. Deciding whether to use Principle or Framer (or other tools) has to do predominately with the scale of the project, complexity of animations, need to match fidelity, technical level of your designers to handle code and existing tools your team is familiar with – so certainly not a straight forward decision.
What works best for you?
In the end, the most important process is one where work can flow with as little intervention and wasted time as possible across multiple people in your organization. This applies both to internal teams as well as your interface with external organizations you are delivering designs to or getting them from.
The goal of any process should be to:
- Reduce confusion
- Standardize tasks
- Increase efficiency
- Reduce mistakes
- Increase quality
Do you have different tools you prefer to use? Do your processes work to accomplish a different goal?
Future of creative-technical workflow?
The goal here is/was to get from concept to code and bridge the gap between your creative-technical teams as effortlessly as possible. Most designers are non-technical and vise-versa. Some of the hardest to find (and therefore most expensive) people to hire are those that are both technical and creative at the same time. A solid process helps to minimize that gap and shorten the leap between these two brain-hemispheres of your teams.
As tools improve and new technologies appear, I think we could benefit from further User Testing capabilities in our prototyping tools. For example, imagine a way to capture heat maps and usage statistics directly from your prototype testing and how that could benefit the process.
Other directions I see the web going involve a reduction in the need for programming altogether, where UI leads to prototypes which then directly connects over into final web-based application flows. Webflow is one such tool and we could easily see more adoption of these types of UI-driven site builders in mass market tools like SquareSpace, Wix and/or Weebly in the coming years.
Or perhaps you will build a process around simple wireframe UI flows that lets you re-assign those as design assets and quickly toggle various skins in your design, all while only needing to build it once, as wireframe components in Figma.
Need help with your creative-technical bridge?
After reading all this if you feel you need some help with your own processes, let us know. We can help improve yours or plug into your teams wherever necessary. Let us leverage our years of creative-technical expertise in the industry for your benefit.
