At Leonteq, I designed a web application for managing and trading actively managed certificates. This application is used by internal certificate managers as well as Leonteq partner clients. The platform is part of a larger ecosystem called Lynqs and is available for white-labeling for our clients.

A detailed case study will follow soon.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2F8TV1yRGzKZ27nG5n0dun%2Fae97c612-c407-42e7-83f5-c8b218b2914b.png?alt=media&token=1a29b376-77c0-48b0-8439-391767ef609a","id":"ae97c612-c407-42e7-83f5-c8b218b2914b","width":3664,"height":2228,"filename":"amc.png","type":"image/png","caption":"AMC Gateway","border":false}]}
```

AMC Gateway

at Leonteq I was responsible for designing and developing the 'Moneypenny' Vue JS design system for our internal and client-facing applications. The design was created in Figma from scratch and developed using Vue JS, SCSS, and TypeScript.

This project began nearly six years ago, shortly after I joined Leonteq. Before this, our applications were developed with minimal designer input, leading to challenges in front-end maintenance and a significant amount of unusable legacy code.

We started by identifying all the design debt across our applications. We compiled and dissected all the components created over the years. After understanding the extent of the debt, we proposed a new project to the management team. We convinced them that a unified design system would expedite development and facilitate code maintenance across our many applications. We then received approval to develop a unified design system to uphold our corporate identity and align with the marketing team's vision.

After creating the system's main components and defining numerous patterns, we started redesigning our internal app using it, which is still ongoing. This system has also been used to create many new projects.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2FQf2wiVkQLRJtU0aocZam%2F33b164f1-5c55-4f2f-b180-a3e40a27babb.png?alt=media&token=d5306a5f-4987-4bc3-ba55-34223460434a","id":"33b164f1-5c55-4f2f-b180-a3e40a27babb","width":3664,"height":2228,"filename":"ds-home.png","type":"image/png","caption":"Moneypenny homepage","border":false}]}
```

The process of improving and updating the design is ongoing. The Design and Front-End teams are responsible for releasing new versions and updating all our front-ends accordingly.

A significant requirement for the site was that it needed to be incredibly fast for designers or developers to find a component. As such, we introduced a quick search feature accessible through the "/" hotkey, which brings up a search dialog from anywhere on the site.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2FQf2wiVkQLRJtU0aocZam%2F3c626d51-9b13-4993-b9b9-6db7207362e9.png?alt=media&token=a09dde83-a326-40c6-ac23-5afb458dd05a","id":"3c626d51-9b13-4993-b9b9-6db7207362e9","width":3664,"height":2228,"filename":"ds-search.png","type":"image/png","caption":"Site search","border":false}]}
```

The query entered in this search will display the results in a breadcrumb style, allowing users to quickly identify the primary and sub-sections to which the component belongs.

The site provides essential documentation for developers and designers to create front ends. There is a detailed section on component usage guidelines, and Figma embeds display component design files. This feature eases the designer's transition into Figma and conveniently displays documentation created in Figma on the webpage.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2FQf2wiVkQLRJtU0aocZam%2F493e60d1-77a3-43b0-a96d-4fdd59c0ebf3.png?alt=media&token=627db8bb-d480-41a1-a127-09837d70b851","id":"493e60d1-77a3-43b0-a96d-4fdd59c0ebf3","width":3664,"height":2228,"filename":"ds-design.png","type":"image/png","caption":"The Design section with Figma embeds.","border":false}]}
```

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2FQf2wiVkQLRJtU0aocZam%2Fbeedfca1-1f53-4e27-8e44-e5898f87e531.png?alt=media&token=fb517948-47b6-419f-b8d9-4f68d4859caf","id":"beedfca1-1f53-4e27-8e44-e5898f87e531","width":3664,"height":2228,"filename":"ds-playground.png","type":"image/png","caption":"Live component playground with code editor.","border":false}]}
```

Lastly, it provides Vue JS Props, slots, events, and styles for the developer's easy reference. It also includes a live code editor playground for direct component adjustment in the browser.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2FQf2wiVkQLRJtU0aocZam%2Fa0eab45d-ba93-430d-b3b3-c5b951d4d377.png?alt=media&token=6354d070-e2c2-4c3e-8226-45505b6a5c35","id":"a0eab45d-ba93-430d-b3b3-c5b951d4d377","width":3664,"height":2228,"filename":"ds-code.png","type":"image/png","caption":"The Developer section.","border":false}]}
```

Moneypenny Design system

Leonteq HUB is an internal application designed to replace Confluence. It serves as an all-in-one tool for finding relevant applications, staying updated on the latest company news, consulting documentation, identifying key people for each project, and much more.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2Fleonteq-hub%2Ff3fcff95-84d2-474d-92cb-740b65f8085f.png?alt=media&token=298dd458-8df8-4dbe-851c-3c17c390cf09","id":"f3fcff95-84d2-474d-92cb-740b65f8085f","width":3664,"height":2228,"filename":"hub.png","type":"image/png","caption":"Hub homepage with application ecosystem overview.","border":false}]}
```

The idea originated from internal research indicating that most employees found it challenging to understand the company ecosystem and locate the right links, documents, and responsible people for each project. This issue was particularly pronounced for new joiners who struggled to navigate the sea of detached, unstructured documents and pages created on Confluence and left unmaintained for years.

Our web development team took it upon themselves to find an in-house solution to this problem. After our initial Design POC, we received the green light to take this on as a side project.

Today, the Hub is solving many of the previously mentioned issues and is extensively used across all teams. It has improved application visibility and employees' understanding of how the teams work together and what tools are required for each position.\
\
Each app we've developed now includes the Leonteq "HUB Burger" - a small menu button located at the top right of each app. This button opens a floating sliding panel that shows a search bar to quickly find any other app and jump to it. The HUB Burger is a micro frontend introduced into each app, allowing users to link back or manage their app from within each of their main applications.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2Fleonteq-hub%2F9606dd59-7414-4679-9ce5-e804473b081a.png?alt=media&token=4d585a7e-b72d-48d7-878e-abf15ffa1943","id":"9606dd59-7414-4679-9ce5-e804473b081a","width":3664,"height":2228,"filename":"hub-burger.png","type":"image/png","caption":"The HUB burger with hotkey shortcuts, for quick access.","border":false}]}
```

Another feature of the Hub is the Search function, which is easily accessible through the hotkey "/". Like the Hub burger, it allows for searching anything within the Hub, whether it's documents, people, or even an internal GPT-based AI for asking questions about the company.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2Fleonteq-hub%2F7ded2cde-3b09-4294-babd-97d0a2a5c008.png?alt=media&token=be381091-e3f6-44c4-9ce1-f1a249b23a9a","id":"7ded2cde-3b09-4294-babd-97d0a2a5c008","width":3664,"height":2228,"filename":"hub-search.png","type":"image/png","caption":"HUB search finds anything within our app ecosystem and includes an AI.","border":false}]}
```

Leonteq HUB

At Leonteq, I designed a new search page to locate crypto-structured products. This is an expansion of the already offered Equity structured product universe. A few years ago, Leonteq introduced these types of crypto products. Now, they needed a way to highlight these new product types and make them stand out from the rest of their product offerings.

Therefore, we decided to create a dedicated search feature for crypto. This lets users quickly view the offerings and learn more about the underlying crypto assets.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2FduLUx6JbX9uefhecsu6Y%2Fc96636f8-9cd8-4ea0-a89e-69f45cadcc25.png?alt=media&token=dc717149-aa20-490a-a295-2eed69536e38","id":"c96636f8-9cd8-4ea0-a89e-69f45cadcc25","width":3664,"height":2228,"filename":"sp- crypto poroducts.png","type":"image/png","caption":"Dedicated Crypto stuctured products page with market data.","border":false}]}
```

We provide a detailed page for each of the crypto assets available. On this page, users can quickly see the structured product that Leonteq offers, which contains the selected crypto.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2FduLUx6JbX9uefhecsu6Y%2F5dd77a03-64df-40fb-a3b1-a167905f2479.png?alt=media&token=c9ed22ff-1729-40bf-80f0-5897d0a7e8b6","id":"5dd77a03-64df-40fb-a3b1-a167905f2479","width":3664,"height":2228,"filename":"sp-details.png","type":"image/png","caption":"Bitcoin details page.","border":false}]}
```

In addition to the client-facing application, there was a need for an internal tool to manage liquidity. This app allows for adjusting positions between custodian accounts for trading purposes. We used several liquidity providers and custodian accounts to develop the app, such as Metaco Harmonize, Fireblocks, Bitstamp, and Kraken.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FLX32kaypltRQznNb1tl2ZUppauo1%2FduLUx6JbX9uefhecsu6Y%2F8a11dbd9-b595-463d-b895-55228713a81b.png?alt=media&token=f126ea31-cf4c-4a5d-9f08-6fb2466ec482","id":"8a11dbd9-b595-463d-b895-55228713a81b","width":3664,"height":2228,"filename":"sp - liquidity.png","type":"image/png","caption":"Qrypto app for liquidity and custody management.","border":false}]}
```

Crypto structured products

Product designer

Company internal application hub (Not for public)

Crypto structured products search and product details page.

Crypto Structued Products

a Vue JS Design system (no longer available for public)

Moneypenny Design System

A complex trading and actively managed certificate platform

Lynqs AMC management

Productization as a service. \
Provide a subscription-based product design service encompassing all aspects from design to implementation. The front-end was designed and coded in Vue JS. For the back-end, [Stripe](http://Stripe.com) and [Linear](http://linear.app) API were leveraged to develop an application that manages subscriptions and creates project boards and tasks, respectively. This app is deployed on [Vercel](http://vercel.com) and uses cron jobs for scheduling tasks.

Digital Products Bureau

Redesign interface for swapping assets on multi-chain wallets

Swim.io

Introducing a Lean UX strategy to fit the Agile development environment.\
Setting up a UX design process for ongoing and new Leonteq projects.

Senior UX designer

Architectural and Interior product designer for corporate and residential projects, yachts and private aircraft.

Product Designer

Product design for Private aircraft interiors.

Designer

Consultant for startups participating in the accelerator program.\
\
Founding designer for Weavr AG, A startup in Virtual Reality for storytelling. \
Responsibilities: UX UI design and front end development.

UX UI design consultant

Designing and developing a Design System for Leonteq applications.

Design crypto structured products platform for clients and other internal crypto trading tools.\
\
Build an application ecosystem hub, and redesign existing trading and management tools to fit within the design system and adhere to design standards.

Leading team of 4 Designers.

Glenn Moris

2024