The BriefProblemSolutionTakeawaysConclusion

Design Workflow Improvement

#Work Project #Design Guideline #User Experience #Cross-functional Collaboration

From May 2021 to September 2021, I worked as a UI/UX design assistant at NextDrive, which is an IoT company that focuses on energy-saving and electricity management. NextDrive has an app that can help users keep track of their electricity usage at home and save money over the long term. We have also customized this app with different brand colors and logos for diverse business clients (primarily electricity companies) to provide to their own customers. And I am in charge of customizing these user interfaces as well as logo redesign for different clients when I first joined NextDrive. However, I found the design workflow was really inefficient.

Teammates

Solo UX Designer

My Role

Design workflow improvement, Guideline establishment, Cross-functional communication

Timeline

June 2021 - Aug. 2021

Tool Used

Figma, Jira

What problems am I trying to solve?

01. Inconsistent design in different projects

Since NextDrive has provided customized App for many different clients for a long time, these projects were not designed by the same designers. However, different designers export clients' logo without a specific guideline or instruction, which make the final designs inconsistent. For example, some clients' logo is bigger than the others. Also, because there are three languages versions in the App, I found that some of the text in the app are set in the wrong text style such as Chinese information in the English text style. Due to these situations, when I first come to do the task, I was really confused because I do not know which previous project I can refer to.

02. High communication cost between designers and engineers

In addition to the problems mentioned above, the workflow to export different logos for development is inefficient as well. In order for engineers to develop, designers need to export one logo in different forms and there are about eight kinds of forms. Within each form, designers also need to make the same logo in different sizes. It was absolutely tedious and troublesome work for designers to do and repeating the same step many times further increased the chance of error as well. When there is a mistake, designers and engineering need to spend extra time fixing the mistakes which may delay the project's schedule.

How to solve the problem?

After noticing these difficulties, I decided to take the initiative to improve the design workflow. I first collaborated with the engineers to clarify the specification of the icon on our App and listed them on the design file that I created. Because of the specification I have added, each designer can have something to refer to when designing for a new client. More importantly, when new designers join our team, they can become familiar with the tasks more quickly, reducing the communication cost between everyone.

Next, I use the component feature in Figma to enable designers to automatically duplicate and export the icon in different sizes within a few steps, which vastly improves the workflow. This efficient and powerful feature replaced mundane steps to resize the same icons; one-step resizing and exporting also reduced their chances of making mistakes. Now, customizing the user interface for clients is no longer a tedious and troublesome task since it can be done efficiently.

After exporting icons to the developer, I also need to create a guidebook for our clients to help them be familiar with the app. I again used the component feature in Figma to finish this task efficiently. In the past, designers need to export about 90 pages of the user interface and import them in Adobe Indesign to change the content of the guidebook. But with the help of components, I can simply replace the logo and color style of the main component in Figma and then the new guidebook for client is done!

What I've learned

01. A guideline unifies design and produces consistent results

The design guideline and component feature in Figma allowed team members to create consistent designs. The unified components clearly showed what should a designer do and how to do it, improving the onboarding process for new designers. Also, designers could focus on designing details rather than spending efforts on checking specifications and sizes. We worked more like a team with a centralized procedure.

02. When facing problems, it is important to be proactive to solve it

It has been enlightening and enjoyable to use technology to provide simple solutions that make a deep impact on the company. During this experience, I try to step up to solve the problem that will affect the whole team. It allows me to develop skills in communication, collaboration, and managing multiple tasks and deadlines. I learned to discuss with different professionals to find a solution to work smartly. Furthermore, I found that it is important to be proactive, especially when being a great leader. While sometimes I may want others to give me some guidance, it is more crucial to search for the answer actively when facing problems. By doing so, I can not only be an active learner but also a leader to support others along the way.

03. New hand-off methods bring efficiency to designers, product managers, and developers

In contrast to the previous hand-off method, the new one enables designers to finish tasks more efficiently, so they can spend more time focusing on other works. At the same time, product managers and developers are allowed to work collaboratively in the same file, which decreases the communication cost between different professionals. Since all the colors used and specification details are stored in the design guideline, less time was devoted to checking.

Conclusion

To proceed this project alone was quite challenging. It took a long time and effort to clarify the problem and come up with a better way to improve the design process. But I think the design guideline was a must for NextDrive to make a big leap forward in the future and I appreciate this opportuninty to make a deep impact on the design team.