What is the most effective way to improve UI design in the page? I bet for Typography and Icons. When you just design, you can see a perfect, beutifull, well aligned website. You may hand off to the developer. You didn’t get any inquires or issues. However when you checked the website after development, you may find a different website. This happens here. Since we are all junior lever designer and developer, lack of communication leads a total different website you never expect it to be. Therefore, the team agree to settle typography and Icons again.
- Overview
- What was the problem?
- How I solved it?
- What I’ve learned?
1. Overview
-
Goal
Make a Design style guide for the responsive web v.1.1and maintain the component effectively.
-
Project for Moneystation Style guide of Moneystation
2. What was the problem?
Right after Moneystation web Beta service released, I joined the team ‘Money Station’. Team members expect me to be a person who is good at communication. As a junior user experience designer(UX designer), I didn’t have a clue what should I do. So I started with a Quality Assurance(QA) Process.
All Icons and fonts were different and the margin and gutters are different. The size of the buttons is not equal. The ways it works such as open a new window, pop-ups or moving within the current page were different.
Consistency is the key to making better usability.
With a lack of consistency, the site looked messy. That was because of the unplanned process of development. The team just made up a new component when they need. Because of that, the development process took so long and ineffectively.
We had used Zeplin for design hand-off. However, Zeplin was not enough. The developer wanted to know all the details to ease his work. But the designer didn’t even know what information should she give to him. I heard many dramas in between developers and designers. But it was a different kind of drama. They are too considerate and shy to bring up any issues. The developer didn’t request and the designer didn’t know. The worse part was they don’t want to share their works early on their stage. They wanted to show their works when everything is perfect.
In real life, there is no such thing as perfect.
We need a system to communicate effectively through the process.
3. How I solved it?
In a nutshell, I made and maintain the style guide for the service. I researched many other cases where use style guide for communication and also it helps to improve the usability by consistency. These are the references I found helpful and inspiring.
- The Guardian Digital Design System
- Duolingo Design
- Remain Style Guide
- Twitter Style Guide
- Australian Government Design System
- Atlassian
- Mailchimp email design guide
- mailchimp web design guide
- Uber design guide
- Lonely planet design guide
- Google Material Design
- CSS Grid: Style Guide
With the help of ‘Zeroheight’ and examples I could settled all the policies that spread across Slack from buttons, Interactions, Form status, Global Navigation Bar, Grid, Breakpoints for responsive web, Colors, Fonts, Icons, Images, Sign-ups, data policy, SNSCards, Email forms, Graphs, IA, Pop-over and etc.
Keep up with issues, histories and maintain the component was much easier. Also, unlike pdf files or Powerpoint/Keynote, I could show and prove what I had wanted to make with interactions. The team could check all the details about the service anytime.
This is the Style guide of Moneystation.
4. What I’ve learned.
It was a quite huge project. At the beginning of the project, no one had liked my idea of making a style guide for the service. Because they think that this is not the right time for it. Our team had started working on V.1.1 and I thought that it is the perfect time for it. I had been started to write and organize all the rules at Zeroheight as if it is my side project. By doing it, I’ve found interactions more proactively and learnt more about coding. Interaction might be a small part in the whole process, but it will decide the first impression of the service.
P.S. I found it that it works in other companies as well. Hope you find it helpful. 2019 Design Systems Survey
Comments