A modular series of components created following the atomic design method to create a Figma design system for Kinexys' website relaunch.
As the sole UI/UX designer involved in this process, it was my responsibility to conceptualize a solution and scope that could deliver their website on time.
It was also my responsibility to redevelop the information architecture of their pages and the architecture of their sitemap, in addition to executing on the solution I suggested; a modular web design system that would enable us to build and launch their site in a fraction of the time it took them to previously build a single page.
J.P. Morgan has a suite of blockchain-based financial solutions. Through user testing and interviews we discovered that their current web presence was confounding to users. They didn't understand the offerings and even came away from their website believing J.P. Morgan was selling a cryptocurrency. Drastic change was needed to shift the perspective of their business in the market.
They redesigned their brand and messaging, reentering the market with a new name. Alongside this rebrand, they needed a completely new website and needed it within the span of a year.
I worked with them as a designer and expert consultant to guide their decisions. My solution for them was to create a modular web design system that allows any designer to quickly assemble pages using pre-built modules.
The most imperative step was to determine scope. I met with stakeholders to discuss their product offerings, what they wanted to get out of the site, what their vision for it was and develop a timeline and gameplan.
We agreed upon a set amount of pages to be constructed within a certain timeframe, since they had no current branded materials and their messaging was in it's infancy, I developed a plan that could accommodate them.
First I would organize the information we plan to present on each page and create a wireframe for each type. Next, I would organize the pages into a proposed site architecture based on their existing site and research we had done on it. Then, I would create an initial high-fidelity prototype for each type of page for review. Finally, with approval, we would continue to design and develop the necessary pages for launch.
During this process, I would create the groundwork for a design system, documenting styles and creating pieces based on the atomic design process.
During the initial step of organizing their information and setting their site architecture, I documented their current site's structure, weighing it against what I learned from my stakeholder interviews, which informed me as to what their offerings were, what changed, and what they hoped to communicate. I also analyzed competitors, like Ripple, Rapyd, Swift and Nium to determine if their approach was aligning with the industry. One of the issues faced previously was vague messaging; I focused on how these competitors were organizing their offerings, and how they communicated the complicated concepts underlaying their function.
After mapping out the pages and developing wireframes, I regrouped with my copywriter and presented to the stakeholders. Once they approved I proceeded to create a prototype of an initial page for their review
After a few rounds of back-and-forth to help strengthen and define their new brand as it would be presented digitally, I had tentative approval to move forward and finalize the initial round of prototypes.
I began to develop their design system in parallel with the prototypes. First I would create a rough design, then I would catalog the foundations into the system. Beginning with the atoms, combining those into molecules, and creating organisms that would then be assembled into refined components that would match the initial design.
Working in this method allowed me to accelerate the rate at which I could build pages with each page. Cataloging their pieces reduced the time required to build every subsequent page, I was able to identify missing or necessary parts and styles, adding and building as I went.
Eventually I had a design system that could be given to any designer; they could quickly drag and drop components into a pre-defined system and completely build a layout in a matter of seconds. I defined guidelines for each type of page as they were created in addition to setting up foundational guidelines like rules for spacing and a grid system.
In a matter of weeks I managed to single-handedly use this system to design 18 pages. Due to the quick turnaround we staggered their launch, my developer would work on them in groups of 3-4, taking the most time for the initial group to build the library in code.
Similarly to the design phase, doing this allowed him to work more quickly with each subsequent page we had built. We were able to work back and forth, enhancing the system and building it out while we were actively building the site.
We managed to launch all requested pages within the 2 month window specified. Over time we still continue to test and refine the pages, iterating them and the system and constantly planning improvements in both strategy and excecution.
By implementing a new web design system for Kinexys that included a strategy for presenting information and templating pages, I was able to launch their site much more quickly than has been done within the firm before. Being smart about the scope of the project and the method of implementation, one designer was able to design and launch their completely new site in a 2 month period, with a lean core team of one developer, one copywriter and one SEO expert.
Kinexys was able to go from an almost 5 month sprint to build a single page, down to roughly 2 month to launch up to 18 pages in one grouping. No small feat for the highly regulated space of blockchain financial solutions. We were also able to reduce the inconsistencies in style and UI between their pages and optimized their site architecture by ~42%.
Do I have your interest?
Then let's talk, reach me at
Matt @ Matthew Design.net
