```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2Fa3580798-8918-4436-ba15-97b7431854c8.png?alt=media&token=eb054af1-ae79-4be7-87a1-f5ae1fa77ca3","id":"a3580798-8918-4436-ba15-97b7431854c8","width":2048,"height":783,"filename":"ip_easywp-dashboard-iterations-2048x783.png","type":"image/png","caption":"","border":true}]}
```

EasyWP is a managed WordPress hosting product by Namecheap Cloud. It’s designed from the ground up to be affordable and easy to use for the rest of us.

When I joined in February 2017, EasyWP was still in its infancy. I was the first designer on the team and the main goal was to improve the design for a beta release in 3 months.

Since then, EasyWP has become the fastest growing product at Namecheap, with the best lifetime value, customer satisfaction and renewal rate, with close to 100K active subscriptions in 4 years.

In the latter years, as Head of Cloud Design, I led the design of Cloud products together with a talented team of designers, product managers, and engineers.

## 2017

First thing: we audited the existing product, clarified our strategy and reviewed our positioning. I was responsible for redesigning the product, the marketing pages and the brand.

We were designing for novice and beginner users of WordPress - people likely to have no experience setting up a hosting environment or creating a website.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2Fc64b6e2d-341a-44bb-9fc1-6c61a43ec3f8.png?alt=media&token=9b36a3a9-37bf-40cc-ade9-0a6fc0e2cfa6","id":"c64b6e2d-341a-44bb-9fc1-6c61a43ec3f8","width":1440,"height":920,"filename":"easywp-landing-page-2017-2.png","type":"image/png","caption":"Homepage","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2Fc9ec6dfb-c42a-4285-b627-331ed6227c7c.png?alt=media&token=e9fd77ab-c8ac-4340-ae77-975f04d29181","id":"c9ec6dfb-c42a-4285-b627-331ed6227c7c","width":1440,"height":920,"filename":"easywp-wizard-2017-2.png","type":"image/png","caption":"New website wizard","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2F51d9daac-4d39-43a2-aa21-552f01c5d116.png?alt=media&token=e1a63a68-7521-48d1-8af8-1b68272afe52","id":"51d9daac-4d39-43a2-aa21-552f01c5d116","width":1440,"height":920,"filename":"easywp-dashboard-2017-3.png","type":"image/png","caption":"Dashboard","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2Fa13e0d9c-e363-4152-bbee-9b52a8d44478.png?alt=media&token=f8c63449-02ca-45f0-a732-7d2bb9f1cdab","id":"a13e0d9c-e363-4152-bbee-9b52a8d44478","width":1440,"height":920,"filename":"easywp-settings-2017-2.png","type":"image/png","caption":"Website settings","border":false}]}
```

The goal was to build a simple and friendly interface that felt intuitive. As we were disrupting on price, we opted to use common interaction patterns from popular apps, so EasyWP felt instantly familiar.

We released our first design three months after joining the team.

## 2018

As we evolved our understanding of the product, it was time to systematise our work. The MVP was developed on top of Material Design framework and it proved to be difficult to maintain and scale.

Based on the first iteration, I developed a new design system called Coral, in close collaboration with the front-end engineer. This was an opportunity to optimise our interface for accessibility, usability and delight.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2F7737103b-6c04-44b1-b089-0c44a3ab0088.png?alt=media&token=93d043cd-e470-4a17-966e-eb151858673b","id":"7737103b-6c04-44b1-b089-0c44a3ab0088","width":1440,"height":921,"filename":"easywp-landing-page-2018-2.png","type":"image/png","caption":"Homepage","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2F1e4925c4-943d-4e76-bfed-0419c083be02.png?alt=media&token=702f6e52-919b-4a8f-8d5f-58b2cd31332d","id":"1e4925c4-943d-4e76-bfed-0419c083be02","width":1440,"height":920,"filename":"easywp-wizard-2018-4.png","type":"image/png","caption":"New website wizard","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2Fd95b328b-c9f3-4023-86c3-d6eb3f814e04.png?alt=media&token=c176e04a-e9df-4cef-b18f-f4df00f332e9","id":"d95b328b-c9f3-4023-86c3-d6eb3f814e04","width":1440,"height":920,"filename":"easywp-dashboard-2018-2.png","type":"image/png","caption":"Dashboard","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2F65551597-9f46-47c3-a546-08c4b97dda44.png?alt=media&token=c37e8c63-d04b-40ed-8a3c-ae6cafb5f1bf","id":"65551597-9f46-47c3-a546-08c4b97dda44","width":1440,"height":920,"filename":"easywp-dashboard-website-detail-2018-2.png","type":"image/png","caption":"Website detail","border":false}]}
```

In 2018, we also worked on features like subscription management, multiple website support, files and database access.

## 2019

We implemented a new referral initiative, started supporting domains from other providers and continued refining our dashboard interface.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2Fd294de3b-3de7-4fec-9875-87c8a6f95338.png?alt=media&token=d4683603-f3cd-4e1b-86ca-36667ff7b4f2","id":"d294de3b-3de7-4fec-9875-87c8a6f95338","width":1440,"height":920,"filename":"easywp-homepage-updated-base-version-SEO-2.png","type":"image/png","caption":"Homepage","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FOQVLau5wZSKY2d7lZRqi%2F738ec5e5-c74f-4fab-8f7d-912599a1a5e5.png?alt=media&token=af20ca89-f600-4ab6-b43d-5f4b214bdd9e","id":"738ec5e5-c74f-4fab-8f7d-912599a1a5e5","width":1440,"height":921,"filename":"easywp-dashboard-website-detail-4.png","type":"image/png","caption":"Website Detail","border":false}]}
```

We created a new illustration system together with the in-house art team. We defined a modular and flexible system that would better communicate the EasyWP brand across all the ads, newsletters, landing pages, videos and product.

Designing the dashboard over the years

Coral is a design system developed to bring clarity, beauty and coherence across Namecheap’s WordPress hosting products.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2Fef41d01a-b34c-4924-9c49-d992d18842f4.png?alt=media&token=ae901bf1-d1e8-4d06-969f-dcba30fc8b40","id":"ef41d01a-b34c-4924-9c49-d992d18842f4","width":2048,"height":1365,"filename":"ip_easywp-coral-ds-4-2048x1365.png","type":"image/png","caption":"","border":false}]}
```

The system started in 2018. It is an evolving, iterative and collaborative effort done together with engineering.

After we released the MVP of EasyWP, we wanted to optimize our delivery speed of new features, improve our collaboration and refine our brand identity.

We started by auditing all our existing patterns and user interface components. We clarified our design principles, polished our brand and worked towards a flexible and accessible UI system.

### Principles

**Clarity**

1. Enable people to act with confidence. Not anxious or frustrated.

2. Be honest and clear. Don’t be overwhelming or deceiving. Go to the point. No bullshit.

3. Design primarily to be functional, usable and useful.

**Flexible**

1. Be consistent but not too rigid. Allow interfaces to adapt to user’s needs and perceptions.

2. Give power to the user while being focused and intentional. Don’t be overwhelming.

**Beauty**

1. Delight and provide beautiful interactions. Not at the expense of efficiency.

2. Design for users perception of the product through timeless solutions.

3. Make the experience lively and inspirational without distractions.

**Universal**

1. Design to be inclusive and accessible without being impersonal.

2. Use depth and contrast for optimal affordances.

3. Educate to help users succeed.

**Coherence**

1. Make the whole product harmonious. Everything should work together towards the same meaning.

2. Design a beautiful, singular experience throughout.

### Typography

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F77c2b12c-a0e8-41da-b4d3-5586242fc0f1.png?alt=media&token=98883b42-9ffc-476d-bd5f-0f69a76f18e7","id":"77c2b12c-a0e8-41da-b4d3-5586242fc0f1","width":2048,"height":772,"filename":"ip_easywp-coral-ds-typography-2048x772.png","type":"image/png","caption":"","border":false}]}
```

The first building block for EasyWP covers 90% of the interface: typography. For this design system, the focus was on defining a versatile tool for both developers and designers. At the same time, we made improvements on clarity, readability and coherence for customers.

For the design system, we continued to use Intelo. This typeface had already proved to have the right balance of character and efficiency.

Here's how it's described by it's designer, Kastelov:

> *Intelo was created with the single idea of redefining what makes a functional grotesque typeface nowadays. Its large x-height and letterforms with subtle elliptical finish create a distinctive look that can help brands cater to an increasingly design savvy audience. (…)*

> *To sum it up, the friendly and inviting letterforms of Intelo came as a solution to the need for more human fonts in our technology-oriented environment.*

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F501bac21-48d0-4c93-9652-b739847c68f1.png?alt=media&token=0be43bc8-4499-47f8-8669-63a287d9a458","id":"501bac21-48d0-4c93-9652-b739847c68f1","width":1093,"height":2048,"filename":"ip_easywp-coral-ds-type-pairing-1-1093x2048.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F37139e59-6d64-4150-88f7-da0f8a715cc6.png?alt=media&token=25c9cede-4475-49e2-946c-a6e8b3320230","id":"37139e59-6d64-4150-88f7-da0f8a715cc6","width":1671,"height":2048,"filename":"ip_easywp-coral-ds-typography-baselines-1671x2048.png","type":"image/png","caption":"","border":false}]}
```

The system includes guidelines for designers to achieve a clear hierarchy and nicely balanced type setting. We also defined baseline sizes that are set as defaults in CSS.

### Colors

Most of the interface is bright and light. Colour is used for specific accents and to communicate different meanings inside EasyWP dashboard.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2Feda32ace-4933-4640-8cd7-53a05159a481.png?alt=media&token=5f282027-3b93-4fc6-a0ac-51c2a9cd4362","id":"eda32ace-4933-4640-8cd7-53a05159a481","width":1220,"height":540,"filename":"ip_easywp-coral-ds-colors-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F066f2309-28b3-4a2d-a278-35f7ab7ddaa5.png?alt=media&token=78945169-4396-4e98-8a8c-6f6108a35f44","id":"066f2309-28b3-4a2d-a278-35f7ab7ddaa5","width":1119,"height":408,"filename":"Alerts-2-3.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F82ed15e6-32a0-4fd5-b180-50f77abf0814.png?alt=media&token=cb903d63-46ac-45c9-8d07-4de630b07a69","id":"82ed15e6-32a0-4fd5-b180-50f77abf0814","width":1024,"height":945,"filename":"illustration-2-3-1024x945.png","type":"image/png","caption":"","border":false}]}
```

The goal was to have a palette that could convey the playful character of the brand in marketing contexts and used in the product with great legibility and contrast.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2Feb17e465-de10-49cd-a2a5-65251b803b30.png?alt=media&token=ad0dad3d-20f9-40ec-9702-2ded7d0c2999","id":"eb17e465-de10-49cd-a2a5-65251b803b30","width":1220,"height":1552,"filename":"ip_easywp-coral-ds-colors-code.png","type":"image/png","caption":"","border":false}]}
```

For each colour we defined roles classes in the system, so that their purpose and usage is clear also for developers.

### Buttons

For buttons we introduced three variants in three different sizes:

* **Ghost**: this is the default button for the app. It iterates on the previous version of white background and dark text.\
  It’s the most used style.

* **Primary:** uses the brand colour and signals significant actions. To be used with intention.

* **Dangerous:** the most attention grabbing button was created mainly for irreversible, delicate or dangerous actions. To be used cautiously.

For each variant, we also defined hover, active and disabled states.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F24d92e0d-140c-4893-a215-a01bcfa6487e.png?alt=media&token=2ff3afca-fd5e-4d30-8e43-558d741cf861","id":"24d92e0d-140c-4893-a215-a01bcfa6487e","width":1220,"height":756,"filename":"ip_easywp-coral-ds-buttons-sizes.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2Fd0914b4d-edaa-4803-bbcc-6de9fd8e0abb.png?alt=media&token=cd4bb834-a157-40e6-8e91-65ae00e1c9a1","id":"d0914b4d-edaa-4803-bbcc-6de9fd8e0abb","width":2048,"height":785,"filename":"ip_easywp-coral-ds-buttons-states-1-2048x785.png","type":"image/png","caption":"","border":false}]}
```

When hovered, the buttons appear to subtly raise as if they are brought closer to the screen. It was important that the hover effect didn’t affect the elements surrounding the buttons. We could use a different border width to achieve the effect, but this would mean the button would jump and shift things and require us to use negative margins. So: borders were avoided on all buttons and states. To achieve this effect we use a double shadow.

### Grid and Spacings

For EasyWP we use a soft-grid approach based on coherent spacings and flexible components. We’re using multiples of 8 to generate margin and padding values, card sizes, round corners, shadow effects, etc. This guides our interface to feel more harmonious and structured and helps in our internal communication.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F89b60ded-4fe4-4903-90c0-0692469d9513.png?alt=media&token=13227b0f-408e-4cd0-a2b9-3f5d95d56c66","id":"89b60ded-4fe4-4903-90c0-0692469d9513","width":2048,"height":590,"filename":"ip_easywp-coral-ds-spacings-2048x590.png","type":"image/png","caption":"","border":false}]}
```

Even though this is the rule, occasionally we might need to break the grid to achieve the right optical balance. This is the case, for instance, on inputs, where the padding on the sides had to be adjusted so that inputs can feel right and work on smaller screen sizes.

### Forms

For the design of the inputs, we sought to keep the same fluid and light interface from other elements for a cohesive and consistent feeling. We also wanted to make its multiple states clear and clearly identifiable.

All inputs have an always visible label to communicate the exact purpose of the field in all states. Placeholders within the field are used to provide examples of the kind of information the user should provide. Hovering the inputs with the mouse suggests interactivity by subtly increasing the size of the input. When the users selects a field, either with mouse or keyboard tab, the field is clearly selected. This gives the user a precise sense of location within any form.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2Fc748adb7-a119-41c2-a9be-6fdd1ac67038.png?alt=media&token=cdf613b4-9f07-4ee5-bb39-20c649081f80","id":"c748adb7-a119-41c2-a9be-6fdd1ac67038","width":2048,"height":955,"filename":"ip_easywp-coral-inputs-2048x955.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F8acf9029-2e43-4635-83cd-cdb16abdeb36.png?alt=media&token=96a1d3b3-ef12-49d5-903c-ccce8b28fe2a","id":"8acf9029-2e43-4635-83cd-cdb16abdeb36","width":2048,"height":955,"filename":"ip_easywp-coral-input-group-2048x955.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F305efba0-4cd1-4b1a-bcb8-2ba46962dabc.png?alt=media&token=c92bde2e-29fd-4bbf-92d6-bdab0a71433f","id":"305efba0-4cd1-4b1a-bcb8-2ba46962dabc","width":1220,"height":1888,"filename":"ip_easywp-coral-ds-combo.png","type":"image/png","caption":"","border":false}]}
```

In usability testing, it was determined that the cross icon resembled too much like a close button. We later decided to change this icon to an exclamation point.

### Toggles, Checkboxes and Radio Buttons

Interactive components were designed following the soft grid and brand identity. It was important that each component’s state were unambiguous.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F149ae550-9e27-456f-983f-cc6e0d3b2295.png?alt=media&token=c2c20498-7ad8-429d-b040-690f9c59d8fb","id":"149ae550-9e27-456f-983f-cc6e0d3b2295","width":1220,"height":610,"filename":"ip_easywp-coral-ds-toggles.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2Fd7ba5066-800e-41b6-b791-c870a06cc4d5.png?alt=media&token=79536692-1043-4c00-a79f-0762ccd4d0e4","id":"d7ba5066-800e-41b6-b791-c870a06cc4d5","width":1220,"height":956,"filename":"ip_easywp-coral-ds-checkboxes-radio.png","type":"image/png","caption":"","border":false}]}
```

### Illustration and Motion System

Together with a communication designer, an illustrator and animators, we designed an illustration system to support our communication.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F19461d0f-e446-4969-99ac-e0e73890cc98.png?alt=media&token=7a7e6047-815e-4892-9355-889e57e2cebf","id":"19461d0f-e446-4969-99ac-e0e73890cc98","width":1200,"height":900,"filename":"illustration_test_3_a-2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2Fbc895927-ead6-4008-bb8c-deaaa9ed5582.png?alt=media&token=b94be0a5-0cf9-4a29-95e4-ad18b6bb5814","id":"bc895927-ead6-4008-bb8c-deaaa9ed5582","width":1200,"height":900,"filename":"illustration_test_3_f-1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F0f726c62-fcb3-4b9c-8cde-fd56ab8acfd9.png?alt=media&token=6cc9bb75-5f25-4b03-8c55-728ea9da82d6","id":"0f726c62-fcb3-4b9c-8cde-fd56ab8acfd9","width":1200,"height":900,"filename":"illustration_test_3_e-1.png","type":"image/png","caption":"","border":false}]}
```

The new illustration system was designed to be flexible and expressive in our marketing materials. This made EasyWP recognisable and distinct from other WordPress Hosting brands.

It was important to create illustrations that were captivating, that communicate ideas of playfulness and ease of use. We feature familiar and diverse characters that tell the story of building, of collaboration and fulfilment.

We developed a template system that enabled us to quickly put together a graphic or visual for social media, newsletters and other needs, while keeping things coherent and beautiful.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2Ff16456b0-3ba2-4e80-9b79-459cfde1151c.jpg?alt=media&token=98670748-7e01-4565-acca-cd7bd76ef28e","id":"f16456b0-3ba2-4e80-9b79-459cfde1151c","width":1097,"height":737,"filename":"templates-type2x-2.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FRKnedWbRXxYPluALIy4zWVYZQ5i1%2FeyouCth9rDD8V6GFZb04%2F4eddd22f-f988-4be0-bc0f-c4645d7d21c0.png?alt=media&token=6f96509c-2d21-4c4b-9ebe-0776c34c83b3","id":"4eddd22f-f988-4be0-bc0f-c4645d7d21c0","width":2048,"height":1329,"filename":"Screenshot-2021-01-24-at-20.53.11-2048x1329.png","type":"image/png","caption":"","border":false}]}
```

Illustration is used inside the product in onboarding flows and growth actions like Refer a Friend.

In animation, we also defined key loops that can be easily reused in different videos like intros, outros, walking cycles and others.

Creating a design system

Product Design

Merit Scholarship

UX Management Certificate

All-new UI for GYANT's virtual assistant

EasyWP

Coral DS

Livrux Club

Guest Lecturer

Led design of EasyWP, a managed WordPress hosting product from the ground up. Created Coral Design System.

Product Designer, Head of Cloud Design

Led the redesign of the AI virtual assistant with a focus on ADA-AA level accessibility and modular customisation. Created a new design system in close collaboration with product, engineering and QA teams. Implemented design processes, hired new designers and assured high-quality delivery.

Igor Pascoal

2021