By bridging the gap between our design team and development team, I designed, developed and maintained a Front-end Style Guide for Baidu Map’s mobile Web app. It helped increase the consistency of user experience and improved the average page loading speed by 11%.

Problems

Baidu Maps is the most popular map app in China, and it has hundreds of millions of users. However, in terms of UI/UX, code, as well as efficiency, the giant had some big issues before we did this project, which we had thought could be solved by a front-end style guide:

  • Different engineers have different implementation for the same UI elements, and this caused different user experience.

  • The repetition of developing same UI elements reduced the efficiency of whole team.

  • Redundant codes have a negtive impact on page loading speed, which related to CTR(Click-Through Rate) tightly.

  • It's extremely hard to maintain the style-related code that at different places.

Project Goal

Aimed at delivering a better user experience and improving the performance, we decided to create a front-end style guide for our Web app. The style guide should target at mobile web, features all the components that we used back then, and covers all the targeted browsers that in our QA's list. Besides that, it should also be reusable, easily maintainable and conveniently accessible.

Process

After understood problems, set up goals and sent out schedule and cost documents, I started the project with a general research on style guides. There were many different kinds of style guides — content style guides, brand style guides, UI style guides, development style guides and front-end style guides. Then, I read some books and articles about front-end style guides, and also found some best style guides from companies like Github as great examples.

Then, the process was followed by a technical research. Which kind of CSS preprocessor should we use? LESS or Sass? Which kind of automation tool should we adopt? Grunt or gulp? These were just a tiny part of all the questions I needed to answer. It was also important to me to consider other engineers' opinions since they would use my code after I finished the project.

As a project lead, I also collaborated with Product Manager and UI/UX designers at the same time. On the one hand, I need to spread the idea of what front-end style guide is. On the other hand, we spent tons of time to decide what UI/UX elements should be included in the style guide. I was quite happy with what we achieved — we deleted 4 background colors (-36.7%), 3 opacity values (-60%), 1 font family (-50%), 4 font sizes (-50%) and 22 colors (-75.9%)! The process not only helped us realize how terrible things were, but also helped designers and manager start to rethink their design process.

Then, I built style tiles with PM and finished 50% of design and development work with another senior front-end engineer. By integrated KSS, Sass, gulp, fontcustom and other related technology and tools with innovation, the result was better than what we expected.

Detailed process can be found in the slides below, and you are also welcomed to check out the front-end style guide here.