SAROJ GURUNG
UI Designer | Web Developer
HI,
I am Saroj Gurung, and have been working in the product space for over 3 years.
As a meticulous designer, I strive to develop key features such as empathy, observation problem-solving and visualization, which I believe form the foundation of design and align with my interests.
As a code lover, I enjoy crafting clean and efficient solutions exploring ways to bridge the gap between design and development.
Contact
saroj.grg567@gmail.com
https://www.linkedin.com/in/sarojgurung/
Education
Bachelors in Information Technology (Mobile Application)
Academy of Interactive Technology,
Ultimo, 2007
Diploma in Information Technology
University of Technology Sydney: Insearch,
Sydney, 2000
EXPERIENCE
Sole Trader | 2024 – Current
Web Developer
AEMO | 2022 – Current
UI Designer
Prospecta Software | 2022
UI Designer
Technology Rocks | 2021
Web Designer
TOOLS
HTML
CSS
JavaScript
ReactJs
Figma
PHP
Balsamiq
Illustrator
Photoshop
InVision
FRAMEWORKS
WordPress
Bootstrap
Tailwind
Overview
GEL – AEMO DESIGN SYSTEM
AEMO had reached a pivotal point where a design system was needed. It was needed not only for the unified look and feel of the different platforms used in the organization but was needed to create a unified approach to how designers and developers should work together.
My Role
As the core team member in the design team, my main responsibility was to create the UI component library in figma to be consumed by the UX Designer in their feature design. I collaborated with the design lead to ensure that the components created were consistent amongst each other and presented AEMO in every possible way.
Additionally upon completion of the MVP of the design system, I also helped in exposing the design system to other stakeholders including UX Designers, Developers, Product Managers etc. by creating a documentation website that everyone could easily browse. We achieved this using the open source platform, Docusaurus.
I took the ownership of the components created in Figma which included:
Team credits
Daniel Wang, Design Lead at AEMO
Bishakha Shrestha, Senior UX/UI Designer
Sergio Collumbetti, Senior UX/UI Designer
Abhisekh Chuggani, Front-end Developer
Bishakha Shrestha, Senior UX/UI Designer
Sergio Collumbetti, Senior UX/UI Designer
Abhisekh Chuggani, Front-end Developer
Issues
AEMO faced the absence of a standardized design system. The company utilized more than 20 applications for its control room, operations teams, and participants, yet none of these applications shared a consistent look and feel. This lack of uniformity resulted in a disjointed user experience for the users. Moreover, the presence of separate brands on the web with different teams independently defining their own UI elements, components, or modules, whether from internal or external agencies, further complicated the situation.
Our Findings
During our investigation, we identified the following key challenges:
Design Principles
Creating the design system was a collaborative process, therefore we ran a workshop within the design team including some developers to agree on some principles so that we can fall back on when we get stuck on a decision that requires discussions
Foundations
Essential to the GEL’s success was ensuring that all team members from different digital initiaves were on the same page regarding the fundamental elements for each brand. AEMO GEL was designed to be adaptable for every brand and various use cases across different platforms. The foundations encompassed our brand logos, grid systems, spacing scale, typography scales, color systems, and interactive language.
Tokens
As tokens serve as the fundamental building blocks of a design system, we opted to utilize design tokens as the central repository for all design-related values. This decision aimed to establish an efficient and scalable design process. By implementing tokens, we facilitated seamless collaboration between designers and developers, ensuring consistency throughout the development phase. Moreover, the use of tokens contributed to streamlining automation processes.
Typography and colour
We initiated the process by defining typography guidelines, specifying the appropriate usage and presentation of fonts to users. In alignment with usability standards, we created a comprehensive mapping of HTML tags corresponding to each font. Depending on the project requirements, developers could choose between pixels and rem units, and we ensured flexibility by accommodating both options and enabling smooth conversions when needed.
We cataloged every color by providing its HEX value along with an associated SCSS variable. To adhere to accessibility standards, we precisely defined colors meant for foreground and background usage. Our objective was to achieve a minimum compliance level of 4.5:1 contrast set by WCAG 2.0.
We cataloged every color by providing its HEX value along with an associated SCSS variable. To adhere to accessibility standards, we precisely defined colors meant for foreground and background usage. Our objective was to achieve a minimum compliance level of 4.5:1 contrast set by WCAG 2.0.
Governance and formalisation
We knew that documentation and governance around brand implementation into our design language was going to be the key to the success and sustainability of the system. Initially, we decided to create a Confluence space for the GEL Design system. However, after receiving overwhelmingly positive feedbacks from other stakeholders, we were greenlighted to create a AEMO GEL website for the Design System where all the documentation was captured. In addition to documenting all the components created in the design system, the website provided us the opportunity to showcase how different stakeholders could consume the new design system and how it could benefit their projects.
We used Docusaurus framework to create the website which allowed the usage of MDX, and also embed React components as needed.
The tremendous success of the design team’s initiatives to create the GEL website prompted other practices to propose the creation of a digital handbook. This handbook would mirror the principles of AEMO GEL, allowing them to share their standards with their respective communities.
We used Docusaurus framework to create the website which allowed the usage of MDX, and also embed React components as needed.
The tremendous success of the design team’s initiatives to create the GEL website prompted other practices to propose the creation of a digital handbook. This handbook would mirror the principles of AEMO GEL, allowing them to share their standards with their respective communities.
Overview
Prospecta DESIGN SYSTEM
AEMO had reached a pivotal point where a design system was needed. It was needed not only for the unified look and feel of the different platforms used in the organization but was needed to create a unified approach to how designers and developers should work together.
Why a Major Overhaul?
component Analysis and Goals
In order to better understand the current state, I tasked myself with finding all the outdated components used in the current design guide. I was assisted by another designer on board filtering through the designs. The plan was to go through all the components and see how they were created and note them down if unnecessary elements were found inside a component.
As a result, I was able to find quite a few components that had unnecessary elements alongside every component that had icons in it. The update required in almost all the components meant creating a updated version of the design system which would solve the following issues:
As a result, I was able to find quite a few components that had unnecessary elements alongside every component that had icons in it. The update required in almost all the components meant creating a updated version of the design system which would solve the following issues:
Updating Components
Documentation
While these components has been created for the product to be consumed by the UX designers and Product Managers, the same has to be true for the developers. I worked closely with the Product Manager and the developers to ensure that the new changes were reflected in the storyboard promptly.
Feature Design Case Study – Personal Project
Karya Zilla
Karya Zilla is a platform to connect casual job seekers and employers. “Karya” which in Nepalese means “Work” and the platform is therefore targeted towards people in Nepal.
The primary goal of the case study was to learn more in depth about how to create design system and how the Material design could be leveraged to do so.
For this I worked together with another design enthusiast and ran a daily workshop to bring our concept into life.
The primary goal of the case study was to learn more in depth about how to create design system and how the Material design could be leveraged to do so.
For this I worked together with another design enthusiast and ran a daily workshop to bring our concept into life.
Services
Branding, Design
Project Length
3 months
Resources used
Figma, Material Design
Using Material Design
Design System
We started out with looking for open source design system that could be leveraged to reduce the effort to create the UI elements from scratch. We chose Material design as the base as it is one of the most used and referenced open source platform with clear documentation.
To change the feel of the design system, we decided to use funky colors that would pop out to the potential users. Keeping a funky color scheme would ensure that the website feels less corporate and is more casual to potential user.
Logo Design
The logo for Karya Zilla needed to have connection with the Nepalese and resemble a way to signify earning. The logo features Nepalese style piggy bank made out of mud with a coin being dropped to notify saving money. The yellow color subtly notifies the user of the wealth.
Feature design
Over the course of three months, me and the other designer worked together delegating tasks to each other to create designs that would be compelling to the user. Since, both of us were into enterprise software in most scenarios, the goal was to create more casual and friendlier UI and popping colors.
Deliverable
Conclusion
In a span of 3 months time, we were able to come up with the most important designs for to what might be needed to run the platform. Some key takeaways were:
Logo Case Study
Everest Photography
Everest photography is run by Prakash Adhikari who focus on – wedding / family photography.
The design ask was to ensure simplicity and minimalism yet resembling the core of the business.
The design ask was to ensure simplicity and minimalism yet resembling the core of the business.
Services
Branding, Design
Platforms
Web and Images
Project Length
3 weeks
Resources used
Adobe Illustrator, Adobe Photoshop
Design Constraints
Requirements from the Client
The logo design had to include camera to portray cool modern vibe and mountain to portray strong connection to the family/Nepal.
The logo and watermark template had to be usable across variety of colors.
The logo and watermark template had to be usable across variety of colors.
Factors to Consider
Minimalism: To work around the constraints mentioned in the design bried, I decided to go for minimalist approach to reflect both elegance and sophistication. I used commercially free fonts NIkoleta and Opens sans for the text in varied size to display contrast amongst the texts.
Color: The particular aqua blue used for the logo envokes cool and vibrance. I had to make sure that the color is not too bright nor too dull which gave the logo its elegance.
Concept: After many sketches and experimentation, I came down to the concept of using line arts to create the logo. The Nikoleta font was chosen for the fonts to display similar font weight and feel as the camera.
Color: The particular aqua blue used for the logo envokes cool and vibrance. I had to make sure that the color is not too bright nor too dull which gave the logo its elegance.
Concept: After many sketches and experimentation, I came down to the concept of using line arts to create the logo. The Nikoleta font was chosen for the fonts to display similar font weight and feel as the camera.
Brainstorming
Thinking in pen and paper
Doodling random shapes and icons provided me with the gist of the requirement. Using pen and paper gave me a lot of freedom and find shapes that would match the idea.
On the right, you can see the first stages of my very messy creative process.
On the right, you can see the first stages of my very messy creative process.
Deciding on paper
After doodling around in pencil and paper, I sent the doodles along with what I found to be best to Mr. Prakash to choose from.
I provided 3 designs that I thought were best but provided him the option choose from other.
I provided 3 designs that I thought were best but provided him the option choose from other.
Moodboard
After I gave these designs to Mr. Praskash, I started working creating the shapes in Adobe Illustrator.
Mr. Prakash approved of Logo 1 and logo 2 as displayed on the right to be viable options and taking that into consideration, I started the design in Adobe illustrator.
Mr. Prakash approved of Logo 1 and logo 2 as displayed on the right to be viable options and taking that into consideration, I started the design in Adobe illustrator.
BEfore | After
Template Watermark
displaying business name for potential clients
The other requirement of Mr. Prakash was to add a custom watermark for each photos to be posted on his social media.
Each template would allow Mr. Prakash to watermark the photos and allow him to be contacted by potential clients who are viewing the photos.
The elements in the template should be translucent so the photo is not disturbed by the watermark.
Each template would allow Mr. Prakash to watermark the photos and allow him to be contacted by potential clients who are viewing the photos.
The elements in the template should be translucent so the photo is not disturbed by the watermark.
Delivery
Conclusion
When the project was completed, I provided Mr. Prakash with all the svg, png and illustrator files along with the template in a bundle. The logo presentation is sent to allow him to view the logo under different circumstances.
Whilst disappointed to see the logo color a bit too bright and not necessarily fitting into a lot of photos, the option to switch to either white(light) or dark(black) seems to have supplemented the design. Mr. Prakash was delighted about the logo and have been using the three combinations to meet the requirement.
In conclusion, I was able to create the desired logo in the given timeframe and learn more about sizing and color usage for better visibility. It warms myself as a designer to see my work being used by others.
Whilst disappointed to see the logo color a bit too bright and not necessarily fitting into a lot of photos, the option to switch to either white(light) or dark(black) seems to have supplemented the design. Mr. Prakash was delighted about the logo and have been using the three combinations to meet the requirement.
In conclusion, I was able to create the desired logo in the given timeframe and learn more about sizing and color usage for better visibility. It warms myself as a designer to see my work being used by others.