Projects
MyNeighbor - NPO
Goodkind - Indonesia
TradeGrid
A B2B marketplace platform for gas and energy exchange
Role
UX Designer
Timeline
Aug - Oct 2022
(3 months)
Platform
Mobile application
Team
UX Team
Product Manager
Developer Team
Context
Overview
TradeGrid marketplace is a mobile platform that facilitates gas and energy exchange for buyer and seller across Africa. It connects thousands of product off-takers and suppliers both locally and internationally, creating a digital eco-system that delivers increased levels of commercial activity to users.
My Role
As a UX designer, my responsibility is to create a design system that prioritizes user experience while aligning seamlessly with the client's brand identity and goals, achieved through clear communication to understand and translate their requirements into a cohesive and user-centric solution.
/01
Project Kickoff
💼
Project overview
The primary objective of the project was to enhance the user experience of the B2B marketplace platform in the African gas and energy sector. Specific goals included improving usability, streamlining workflows, and establishing a cohesive design system.
Target audience - Gas and energy buyers and sellers from across Africa, including energy providers, distributors, and procurement managers, form the primary audience for the B2B marketplace.
Timeline - The project spanned three months, starting in August 2022, focusing on developing the initial look and feel of the design system to ascertain stylistic compatibility and outline the subsequent development timeline.
Problem Statement
How might we establish a cohesive design system that aligns with our client’s brand identity?
The current lack of a standardized and cohesive design system in the mobile application hampers user experience and brand consistency, necessitating the development of a comprehensive design system that addresses usability issues, streamlines communication, and aligns seamlessly with our client's brand identity and goals.
/02
Branding and Visual Identity
🖼️
Building a brand
I worked closely with the stakeholders to align the platform’s visual identity with the brand strategy. Then I conducted a workshop and brainstorming session to further understand the brand values and visual preference. Through this findings, I was able to start constructing a design system that ensures a harmonious integration between the platform and the brand ecosystem.
Color palette, typography, and iconography
I started by carefully curating a color palette, typography selection, and iconography that reflects the energy sector while maintaining the current brand identity. These visual elements were also chosen to resonate with the target audience while maintaining a modern and culturally inclusive aesthetic.
Developing a style guide
A comprehensive style guide was created to document and communicate the visual elements of the design system. This included specifications for colors, typography, iconography, and other UI components. Special attention was given to mobile interface considerations, ensuring a seamless and responsive experience across various devices. The style guide served as a reference for both design and development teams, fostering consistency throughout the implementation process.
/03
Design system development
⚙️
Developer handoff
As the design system neared completion, I initiated the documentation process for the design assets and interactions that had been developed. The primary focus during the handover to the developer centered around the delivery of the following key assets:
Comprehensive documentation - Provided detailed documentation for all design system components, including buttons, forms, navigation elements, and any other UI elements, ensuring clarity for developers.
Style guide and pattern library - Included a comprehensive style guide and pattern library as part of the documentation, offering a centralized resource for design standards, visual elements, and interactive components.
Accessibility standards - Clearly communicate accessibility standards implemented within the guideline, emphasizing the importance of creating an inclusive and user-friendly experience for individuals with diverse needs.
#ProjectTakeaways
Reflection
Cross-collaboration communication
Through this journey, I've come to realize the vital importance of clear communication between designers and developers. It's not just about aligning on goals, but also about creating a shared understanding that paves the way for efficient collaboration and timely issue resolution. As I navigated the complexities of developing the design system and UI components, I discovered the invaluable need to forge a close relationship with developers. This personal connection proved to be a key element in overcoming challenges and ensuring the seamless and successful implementation of our shared vision.
Designed and developed by david.riadi with 🤍 and ☕️
©2024