UI Designer at Niagahoster
Year: 2020 - 2022
Niagahoster is a web hosting service provider company that was founded in 2013. Headquartered in Yogyakarta, Niagahoster has served more than 29 million customers in 178 countries.
My Role
As UI Designer, I support the product team by providing high fidelity design of various Niagahoster products (Landing page, Member Area, Order Flow) to achieve the determined target and product improvement in each quarter.
To properly achieve that, I with the UI Designer and Developer team build a design system that improves continuously. I am responsible for creating and managing the design system component. Also, I conduct routine coordination between the UI Designer team and developer to track any issues and updates regarding the design system development.
Other Challenges that Solved Properly
1. Outdated Website Style and Design system Not Properly Utilized
Problem:
In my early days, there was a discussion that Niagahoster’s website fell outdated compared to the others. Besides that, I found some design inconsistencies either in Figma or the website. I checked it deeper with my UI Designer colleague and found many components on each Figma file that don’t use the components from the design system. It impacts the implementation of the website. To prevent any impact of having an outdated website style, stakeholders and the product team decided that we have to run a redesign project as soon as possible.
Outcome:
It’s a big improvement made by the Product team. The redesign project includes the website design style improvement, with the new design system implementation.
With a UI Designer colleague, we contribute by redesigning the layout and style of the website, creating various components needed by the new design, and did routine coordination with the developer team to ensure that we have consistency between component design in Figma and the website.
In the UI Designer team, we always remind each other to utilize every component from the design system to be implemented in every design. And now, after more than one year since this project started, either design in Figma or the website can keep consistent. We can produce design faster by consistently using the design system too. And we got so many good responses about the new website design from the customer.
2. Too Hard to Find a Specific Design
Problem:
Several times in my early days, I asked my colleague how to find a Figma file containing a specific design, for an assigned task needs. I can’t find it by myself, even though I tried finding it on the Figma file with the name related to the design. Even my colleague, who was already on the team earlier than me, has struggled to find that.
Outcome:
The UI Designer team decided to reorganize Figma’s team. Including file name format, page structure of each Figma file, project categorization, giving proper cover for each file on each category, and giving some guidance on each project. We give each file a code on it's name based on the project category, insert an improvement page on each file based on the quarter, move every file to the related project, and show the file name with detailed information (like thumbnail, assignee, date, etc) on each Figma file cover.
The result? No more confusion to find a specific design on our Figma team, since every design has been organized properly.
3. Design Version not Properly Documented
Problem:
Related to the previous problem, why it’s too hard to find a specific design? After I checked it, it’s also because there is no proper documentation for each design improvement on the Figma team. Every design improvement for a landing page is separated into many files. It makes finding the history version of a landing page very hard.
Outcome:
The reorganization process I mentioned before, includes reorganizing the page structure of the upcoming new Figma file for the new design, especially the Figma file for the main design. For example, every design related to the homepage will be placed on the main file of the homepage, including design improvements that will be placed inside the improvement page on the file.
The result? We have proper design versioning documentation for each design, and no more confusion finding a specific design.
Conclusion
There are so many, I with the team can learn during the design process until now. Try to solve simple until complex problem by discussing, adapting to many constraints, keeping up with the deadlines, making sure every design we produce have a high standard, and documenting every design we produce for long-term needs. We keep moving forward, and now, we are in the process of Member Area’s redesign, with a better approach to design system and high fidelity design production.