When I started as Yotpo’s first UX/UI designer, my first task was to redesign our customer-facing dashboard, which is where people go to access their data, manage their features, and moderate their reviews.
The old interface badly needed attention—it had a confusing navigation and a complicated set-up process, and its overall look hadn’t been updated since the company started—but I quickly realized the cause of all the UX and UI problems: a lack of communication between designers and developers.
“The cause of all our UX and UI problems was a lack of communication between designers and developers.”
So this project was much more than a feature redesign—it was a redesign of the way we design, and it called for new processes to be put in place in order to keep from repeating our same mistakes in the future.
Here’s a look at the issues poor communication caused and how we solved them for good.
“This project was much more than a feature redesign—it was a redesign of the way we design.”
The issues:
1-way communication
Previously, the UX/UI designer had no role in the final version of the product. We realized in order to design effectively, it shouldn’t only be the responsibility of the product manager to communicate with research and development—there should be 2-way communication between designers and developers.
And to keep teams in sync, there need to be multiple touching points during the development cycle where developers, product managers, and designers could give feedback on the current progress as well as talk about issues and brainstorm ways to solve them.
The designs didn’t match the finished product
When developers received a design, they’d just develop it without regard for design elements that may be missing. This was largely because the developers didn’t always know the reasons for the choices the product team made. Had they understood we put the button there because it was close to the settings and above the fold, they likely wouldn’t have moved it.
How we tackled these communication issues
Slack
Our entire company had recently signed up for Slack as part of efforts to improve company-wide communication. We had many different channels pertaining to different departments, but in addition to our UX/UI channel where anyone in the company can share articles or other things of interest, we decided to open a dedicated group for every major project (such as the new B2B design). To this channel, we invite relevant developers and designers as well as more people who may have valuable input, such as customer-facing and marketing employees. The Slack group can be open to many people because it’s an open forum for input from many people.
Kickoff meeting
We held a kickoff meeting with a small team of relevant people. Normally, this includes the product manager, designer for the project, head of research and development, and designers who’ll work on the project.
The designer leads the meeting, explaining and sharing the values, functionality, and reasons for the design choices. The goal: by the end of the meeting, developers understand the why, instead of just receiving the requirements—plus, they felt invested in the process. The meeting happens so everyone can be on the same page from the very beginning.
Design QA
We added required steps in the process, such as design QA, to make sure the developed elements functioned and looked the same way they were designed.
Accountability
We also used the PerfectPixel Chrome extension so developers can check their outcome compared to the design before the design QA. An added advantage of this: developers delivered higher quality work because they were accountable for the way it looked.
“Developers delivered higher quality work because they were accountable for the way it looked.”
InVision
We used InVision to add specific comments, so there was no question what needed to be revised. While Slack was great for questions and answers, InVision was the most comprehensive way for us to communicate.
“We used InVision to add specific comments, so there was no question what needed to be revised.”
Facilitating communication and consistency through a UI library
Good communication practices are key in improving design processes
, so in order to facilitate this, we saw the need for a UI library.
We noted that some consistency issues existed after implementing good communication, so our answer was a UI library where developers and designers could both reference the same elements. This leaves room for no mistakes. Combined with good communication, having a UI library leads to a streamlined design process.
“Combined with good communication, having a UI library leads to a streamlined design process.”
While many companies avoid using a UI library because they want “something special,” UI libraries are actually easy to customize. Plus, they save tons of development time and create consistency across the look and feel of components. They also allow for full-responsive elements.
The benefits of having a UI library have been huge. With our UI library, I can direct developers to the exact component I want to include in the design.
Want get started with one? Here’s a 3-step guide on how to implement and begin using a UI library.
1. Choose a UI library
We use Wrap Bootstrap, but if you’re looking for a fantastic, free tool, try Semantic UI. You can customize your library by modifying the elements just for your product.
2. Number all the components within the UI library
To easily refer to specific elements, number all the components in the UI library. This helps us easily reference through InVision, leaving no question about what’s needed.
3. Refer to those elements by their numbers while passing design to development
Our UI library didn’t just create consistency—it’s saved us tons of development time. With all the elements available, developers can quickly and easily create well-designed products.
Our results
During our customer-facing dashboard redesign, we created more consistent and transparent processes to aid communication. Below is the comparison of our old and new B2B.
Lack of communication is a common issue not just for us, but many companies. Take a look at not just the user-experience issues you have, but how changing the design process can prevent future issues.
“Take a look at how changing your design process can prevent future issues.”
Tips for improving your communication and design process:
- Always check how the process impacts the final product. If you notice that there are recurring issues, ask yourself how the process contributes to this and what you can change to make the design process smarter.
- Communicate clearly and often. When design and R&D work together to create a product, they have to speak the same language.
- Make your process of design and development a cohesive circle. It needs to be together and not divided between departments. Communication must be a conversation—there can’t be a 1-way dialogue.
- Don’t be afraid to take time upfront to rethink how you’re working—it’ll save time in the long run. Investing time to make the process perfect is worth it later to help you work more effectively.
- Explain to the development team the meaning of the user experience so they know the why and not just the what. Remember you’re coming from a different point of view and need them to understand the importance so they see the value in developing it as designed.
“Communication must be a conversation—there can’t be a 1-way dialogue.”
The bottom line: take the time to stop and fix your process so it’s solid in the long run. This isn’t just an enormous time-saver—it’ll help you avoid costly mistakes in the future.
by Adam Morad
Adam Morad is the Head of UX/UI Design at Yotpo. He doesn’t play basketball, although he’s over 6 feet tall.
