🌎

EFG Hermes

Improving the design process, collaboration between designers and developers, and implementing features.

Role Icon

Role

Product Design, Research, Development Hand-off

Timeline Icon

Timeline

August 2021 — October 2022

Tools Icon

Tools Used

FigJam, Figma, Azure Devops

Tools Icon

Link

Available on Apple Store

An overview

EFG Hermes is the leading financial partner in FEMs and the top MENA ECM advisor. It also the leading investment bank in the MENA region.

I spent most of my time at EFG Hermes implementing new features, creating modular components inside of Figma, and most importantly analysing and improving our design process as well as collaboration between developers & designers.


The challenge

EFG Hermes is a development-led organization with its strong suite being business analysis, development, and finances. Only recently has it adopted a design approach and with that comes a lot of obstacles. Improving our design process was high on our priority list, specially with a trading app on the horizon.

‍

Proposed solution & reasoning

Often designers are looking to bridge the gap between design & development, why not close it entirely? Streamlining our design process had to start with getting everyone on board, especially developers. This section goes over how we closed the gap when it comes to translating designs into actual, usable applications, and not decision-making.

‍

• Create a design system featuring design tokens, this included spacing tokens, colors, typography, and much more.

• Unify naming between codebase and Figma file.

‍

Any component used in EFG’s products is essentially a combination of design tokens, and once we had nailed down the basics, communication would be a breeze.

‍

Auditing existing design & creating tokens

Before adding anything into our codebase, it was crucial that we audited our existing design and made sure that we're following what we were pitching. We went through multiple sprints to audit the entire application and made sure that we stuck with a 4 pt grid system. Afterwards, creating the tokens was a breeze, and documenting spacing throughout our designs was simple.

‍

Color palette

‍

EFG Hermes One web app

‍

Outcome

Our audits, constant communication with the various cross-functional teams, sprints, and efforts have allowed EFG Hermes to develop new features and products with breeze. With communication now improved, focus on business and user needs now takes even higher priority than before.

Position

Product Designer

Company

EFG Hermes

Year

2021

Product

EFG Hermes One