In July 2021, I was delighted to take on a side role with Texts, an incredibly powerful app that allows users to consolidate messages from different chat platforms into a single inbox.

When I started, Texts’ overall UX wasn't bad, flows were quite linear…

> But I didn’t think the same about user interface.

## The UI

The UX was good, however, I noticed some room for improvement in the UI design.

### **Icons**

The first thing that jumped out at me while browsing through Texts.com was the lack of visual consistency across the UI elements, particularly the icons.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2Fc6995a3e-6e6b-42e7-b042-c0d0e29f62f0.png?alt=media&token=68c61eaf-338e-47fd-b2f3-1af550e450e3","id":"c6995a3e-6e6b-42e7-b042-c0d0e29f62f0","width":690,"height":304,"filename":"txt-2.png","type":"image/png","caption":"Screenshot of Texts’ right header before my arrival.","border":false}]}
```

And of course, that’s were we started: giving some consistency to those icons with some 20x20px large, 1.5px tick alternatives.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F1270556f-0d14-4dca-8b4d-adde98f88234.png?alt=media&token=0a9afc87-c4d8-491e-92fd-120fdbb29fd8","id":"1270556f-0d14-4dca-8b4d-adde98f88234","width":858,"height":462,"filename":"txt-3.png","type":"image/png","caption":"Screenshot of Texts’ right header after my arrival.","border":false}]}
```

Obviously those are not the only icons that were replaced, I just picked and showed the ones that used to stand-out negatively at glance.

### **Colors**

You may have noticed that icons aren’t the only difference in the previous screenshot, even app’s background color changed.

Currently, colors aren’t handled that way I expected. By looking at the code I noted that:

* No color shades defined for such complex app

* Too many occurrences of few colors with uncontrolled opacity variants

* Non-existent naming conventions

Beyond color handling, even the look didn’t convince me. For example, the blue-ish gray used on dark appearance didn’t really follow the overall native feel of the app.

**It was quite obvious that the app needed an improved (and actually defined) color system refresh.**

I had to handle both the color system creation and its **application** inside code. So I needed a way to design, test and apply colors in a frictionless way.

**The approach**

I ended up going with design tokens — My primary goal was a design system when I started, so I wanted to build the foundations for it.

But let’s go deeper…

I created a file (library) for every context:

* **Styles - Light** for light appearance

* **Styles - Dark** for dark appearance

* **Styles - Common** for styles used on both appearances

**Base tokens**

Base tokens is where everything start from, they aren’t used directly but they are the origins of every other color that will be created.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F4e86cee1-ece5-4ec5-bcac-ec11e64e9117.png?alt=media&token=789effa3-7c22-4905-9e2a-98c672b9f25a","id":"4e86cee1-ece5-4ec5-bcac-ec11e64e9117","width":2544,"height":684,"filename":"txt-4.png","type":"image/png","caption":"Figma screenshot of the gray shades of the Styles - Dark file","border":false}]}
```

**Common (and component-specific) tokens**

Create common (and component-specific tokens) tokens and connect those to base tokens using Figma Theemo.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F40275c12-a5ed-4e00-9ca8-3a7948277f84.mp4?alt=media&token=83e43414-1bc5-4ecd-947f-9e8a53489bf2","id":"40275c12-a5ed-4e00-9ca8-3a7948277f84","width":2680,"height":1488,"filename":"txt-5.mp4","type":"video/mp4","caption":"Video showing the creation of a common color token `text/neutral-weak` from the base token `gray/110`","border":false}]}
```

**From design to code**

Seamless color tokens export from Figma to code with a custom script, in just a few of seconds:

1. Run `yarn tokens` inside project directory

2. Done. Colors are ready to be applied, tested and… committed.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2Fb44c4abf-b31e-4bf3-9403-ace2d8c8b299.mp4?alt=media&token=a3c22705-833e-43c5-bf10-ca2e2bbe3b8a","id":"b44c4abf-b31e-4bf3-9403-ace2d8c8b299","width":2866,"height":1160,"filename":"txt-6.mp4","type":"video/mp4","caption":"Video showing the transition from design to code.","border":false}]}
```

> This approach not only allows a frictionless design-to-code transition, but it even grants great usability in Figma.

By having light and dark colors split into different Figma files, colors can be bi-directionally tested: not only in code, but even in Figma thanks to the [Swap Library](https://help.figma.com/hc/en-us/articles/4404856784663-Swap-style-and-component-libraries) feature.

In fact, designing the **new platform authentication flows** has been flawless.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F684a7e32-8e3d-41df-9194-6b308bfc5519.mp4?alt=media&token=23d44376-ba2f-49d1-bb21-218788a4d005","id":"684a7e32-8e3d-41df-9194-6b308bfc5519","width":3734,"height":2016,"filename":"txt-7.mp4","type":"video/mp4","caption":"Video showing the agility of jumping from a theme (dark) to another (light) using the Swap Library Figma feature.","border":false}]}
```

## Features

### **Chat-bar**

During these months, I haven’t only refined the user interface. I contributed on shipping new and redesigned features as well, such as the one (partially) contained in the previous video and such as the \*\*redesigned chat-bar\*\*.

**Before the redesign**, it seemed that chat bar buttons were equally important, but it’s quite evident that they should not:

* Would user attach GIFs or Files with the same frequency with which he would send text-only messages?

* How many times would user schedule a message (the “clock” icon) instead of sending it instantly?

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2Ffc56da26-e8a2-4fae-850d-62013389b809.png?alt=media&token=27210eb2-c941-4d53-8165-d20f577522ee","id":"fc56da26-e8a2-4fae-850d-62013389b809","width":1256,"height":214,"filename":"txt-8.png","type":"image/png","caption":"Screenshot of an earlier version of Texts’ chat-bar","border":false}]}
```

**With the redesigned chat-bar** we improved buttons not only by changing their positions and order, but even by changing their prominence.

* “Attach a file” and “Attach a GIF” buttons are weaker than “Send” button and they have been put on the left of the textarea.

* “Send later” has been placed inside the dropdown you’d open by clicking on the arrow (chevron) on the right of the “Send” button.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F3c649928-7622-409c-8db1-f1746a3d4570.png?alt=media&token=3c1bc7ea-9ad0-47b0-aea4-d0f913ab4b28","id":"3c649928-7622-409c-8db1-f1746a3d4570","width":1136,"height":198,"filename":"txt-9.png","type":"image/png","caption":"Screenshot of current Texts’ chat-bar","border":false}]}
```

## Misc

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F15f5a15a-ded3-40c0-b136-4f2afaf6a9c7.png?alt=media&token=a9086303-18d4-4a5f-975b-b9aecf0425d3","id":"15f5a15a-ded3-40c0-b136-4f2afaf6a9c7","width":3351,"height":2022,"filename":"txt-10.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F4d9d1efa-d8d2-47fd-a362-a2d7301c49ee.png?alt=media&token=05d3ad3c-da27-4498-ad98-d88f8e43fdb8","id":"4d9d1efa-d8d2-47fd-a362-a2d7301c49ee","width":3360,"height":2100,"filename":"txt-14.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F729dce39-9a86-4590-8dff-9cf45b6e76b2.png?alt=media&token=2dfc734b-63f9-4f30-9d89-1bffe5eef8cc","id":"729dce39-9a86-4590-8dff-9cf45b6e76b2","width":3360,"height":2100,"filename":"txt-13.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F19e2157e-0194-4b1d-bc7a-714e0af242bf.mp4?alt=media&token=acd0117e-93ee-451d-8f13-818f80b8845f","id":"19e2157e-0194-4b1d-bc7a-714e0af242bf","width":1100,"height":1764,"filename":"txt-15.mp4","type":"video/mp4","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2F0b26905f-bdd0-488b-ac6d-f87a4a019377.png?alt=media&token=944cb0a6-c61b-4746-8c6a-60cd183761a2","id":"0b26905f-bdd0-488b-ac6d-f87a4a019377","width":3360,"height":2025,"filename":"txt-12.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2F9DwO0RPt9n6OYZuI7IDf%2Ff2c1e931-9893-4dcb-9c3a-86c2102527db.png?alt=media&token=ca8d35f1-cf6f-461a-8010-36cbf82361f2","id":"f2c1e931-9893-4dcb-9c3a-86c2102527db","width":3360,"height":2024,"filename":"txt-11.png","type":"image/png","caption":"","border":false}]}
```

Design Journey: Texts

Gesto is a tweak available for “Jailbroken” iOS devices.

## Why

Gesto is born because invoking the iOS control center with a top-to-bottom swipe was quite annoying, in my opinion at least.

> So I thought…

**Why not swiping from bottom to top of the screen as you would for invoking the app switcher?**

> but wait… there's the app switcher?!

**No problem: swipe from bottom to top and then swipe from right to left to invoke the control center.**

> and if i already got the app switcher open?

**Just swipe from right to left.**

## What

The problem is clear, but well, **we loved** problems while building Gesto — I’ll let the original tweak description explain why.

---

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2F3017ad54-045f-44e8-960a-ef0087c96a79.png?alt=media&token=f2b91ec0-883c-4841-bd31-6708b958e369","id":"3017ad54-045f-44e8-960a-ef0087c96a79","width":1600,"height":800,"filename":"gesto wall.png","type":"image/png","caption":"Image showing some frames of Gesto's features","border":false}]}
```

Gesto enhances iOS's multitasking view, making it powerful yet familiar, with a native-looking design and gorgeous animations.

### CC + App Switcher

Multitasking is now more true than ever. Gesto lets you combine app switcher and control center in two ways:

### Side-by-Side

iPhone X users, there's no need to adjust your grip to reach the top of your screen! Just swipe up from the bottom of screen, then left. Need to quickly go to your app switcher? No problem, just swipe to right.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2F6e519fb0-5699-4439-892a-56536078df7e.mp4?alt=media&token=f4b66b75-29d5-4c3f-82b7-02f624eb1d91","id":"6e519fb0-5699-4439-892a-56536078df7e","width":960,"height":2080,"filename":"Side-by-side.mp4","type":"video/mp4","caption":"Video showing the \"Side-by-side\" feature","border":false}]}
```

### Multi-Side

App switcher and control center in the same view, the first at the top and the latter below, explorable by just swiping horizontally; giving you the best multitasking experience ever. It awesomely fits with all iPhones, from the smallest to the largest.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2F02149303-9694-4500-98f1-800468fbfab9.mp4?alt=media&token=cfb9d29c-0e5e-4e1e-9291-803a4d88b477","id":"02149303-9694-4500-98f1-800468fbfab9","width":960,"height":2074,"filename":"Multi-Side.mp4","type":"video/mp4","caption":"Video showing the \"Multi-side\" feature","border":false}]}
```

### Quick Actions

Toggle what you need in a swipe without leaving your app switcher. You can access your CC, clear your apps, control your music and battery and much more with ease, all by swiping your first card in the app switcher to the left.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2F3dcd86de-16bf-4067-b158-659f2f08ae48.mp4?alt=media&token=6c5bc82c-53f5-442f-8823-a324d4e4ab00","id":"3dcd86de-16bf-4067-b158-659f2f08ae48","width":960,"height":2080,"filename":"Quick Actions.mp4","type":"video/mp4","caption":"Video showing the \"Quick Actions\" feature","border":false}]}
```

### App Lock

Never accidentally close an app you need open again. Swipe down on any app in the app switcher to lock it, preventing you from closing it by mistake.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2Fd19f3401-82ce-4cbe-bd2e-82ff69ea664c.mp4?alt=media&token=2b8eba03-46df-460f-9fe6-2f908a50376f","id":"d19f3401-82ce-4cbe-bd2e-82ff69ea664c","width":960,"height":1706,"filename":"App Lock.mp4","type":"video/mp4","caption":"Video showing the \"App Lock\" feature","border":false}]}
```

## How

Everything has been meticulously thought and over-thought.

### Branding

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2Fc2613c16-0ceb-4590-99ea-6af39cd274e3.png?alt=media&token=951fad73-69f7-4168-a5e6-a78efb8bf360","id":"c2613c16-0ceb-4590-99ea-6af39cd274e3","width":3026,"height":1654,"filename":"branding.png","type":"image/png","caption":"Image showing brand iteration","border":false}]}
```

### Icons

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2Fe91b9980-9101-4eb5-929d-fc0b908a04fa.png?alt=media&token=ef4895f5-8d7f-41d1-8e22-50e3a4e775b8","id":"e91b9980-9101-4eb5-929d-fc0b908a04fa","width":3690,"height":2164,"filename":"icons.png","type":"image/png","caption":"Image showing some Gesto's icons","border":false}]}
```

### Prototypes

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2F7b0caef4-5e07-444c-bf9d-9434087e8d15.mp4?alt=media&token=46c95c02-2fbf-444b-ae6b-4257e4999b8c","id":"7b0caef4-5e07-444c-bf9d-9434087e8d15","width":498,"height":1080,"filename":"Switcher to CC.mp4","type":"video/mp4","caption":"Prototype of the switcher → cc animation","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2F2fef2b95-ba32-4cc2-ba1e-7d0765a5a911.mp4?alt=media&token=01cdd11c-9b2b-485e-ba9d-42fd58de70f1","id":"2fef2b95-ba32-4cc2-ba1e-7d0765a5a911","width":498,"height":1080,"filename":"Lock-Unlock.mp4","type":"video/mp4","caption":"Prototype of the \"App Lock\" feature","border":false}]}
```

### Graphic Material

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FB5Zq008A1pjKx98b8Jvv%2F23c1fd86-3969-4714-bbfd-217f0d008254.png?alt=media&token=ad77a949-fb03-4234-a875-52075c695efa","id":"23c1fd86-3969-4714-bbfd-217f0d008254","width":3636,"height":1634,"filename":"graphic.png","type":"image/png","caption":"Image showing some of the graphic material produced","border":false}]}
```

### Communication

The announcement (and the video teaser)

* [On Reddit](https://www.reddit.com/r/jailbreak/comments/bd9end/upcoming_gesto_true_multitasking/)

* [On Twitter](https://twitter.com/aesign_/status/1117580012214005761?s=21&t=aXauOXFHZbs54spqB8B7pw)

```cv
youtube
{"url":"https://www.youtube.com/watch?v=6HI7dqsQHko","width":200,"height":113,"thumbnail":"https://i.ytimg.com/vi/6HI7dqsQHko/hqdefault.jpg"}
```

### Profit

Gesto sold **13457** **copies**, with an estimated personal effort of **20 days of full-time**.

Design Journey: Gesto

## **👋 Hello, I'm Alessandro.**

I’m a 25 year old designer from near Rome, passionate about code and automation.

In 2020, I graduated in Interaction Design at [Quasar](https://quasarinstitute.it/en/homepage/) with a 107/110 score. However, I started designing much earlier...

Everything began when I got interested in the "Jailbreak" community, back in 2014; I started to design iOS icon packs like [Sential](https://repo.dynastic.co/sential-basic) and tweaks and apps like Gesto and [Sileo](https://twitter.com/getsileo?s=21).

In 2017, I joined Supercharge with the purpose of allowing users to modify existing apps and install new ones, outside the App Store's limitations. Here I handled everything related to product design (the iOS and macOS app) and front-end development (the website).

In 2019 (full-time from 2020), I started working for a digital agency called [Humans](humans.tech) where I vice-lead the product design area, from a simple icon to a complex app. We have been working with some relevant multinationals, like [Angelini](https://www.angelinipharma.com/). Right now I’m managing the design of internal projects and the design of two Airbnb products.

Beyond Humans, I've been helping [Texts](texts.com) shaping current app's UI and some of the new features shipped from 2021 until nowday.

I'm also good with HTML, CSS, and JS (TS). I love React as well — building the [Sketch extension](https://www.raycast.com/aesign/sketch) for Raycast has been super fun. It was fun using it too until I moved to Figma.

If you want to get an generic idea of my designer eye and style, head over to my [Dribbble](https://dribbble.com/aesign).

Intro

Untitled

### "What exactly is time?" asked King Solomon. "The antechamber of eternity," replied Melchizedek.

An answer that makes you think, or at least, it made me think. According to Melchizedek, King of the kingdom of Salem, time is precisely the gateway to eternity. An answer as interesting as it is vague. Time has been the subject of study for centuries, but so far, no one has been able to scientifically explain what it is.

An inquiry that perhaps is as eternal as time itself.

**Time** and **eternity**: two purely abstract concepts. Apparently, the former the cause and the latter the effect. But what would happen if we inserted something more concrete? Let's insert the human being, let's insert ourselves.

With us "in the game" something changes: time acquires a meaning less abstract but more conventional.

By convention, the time on our clocks is the same throughout the entire area of a time zone. Also, always by convention, all days have the same average duration of 24 hours. In reality, every location has its specific time, every day of the year has its own specific duration; as well as every hour, every minute, and so on.

Time and eternity may have congruences, but we humans have nothing in common with eternity, as we are not immortal. Hence, we can begin to speak of "our time," no longer absolute but relative to us and our existence. Not only relative to us as a species, but relative to each of us individually. In fact, we all sometimes feel that moments pass more quickly or more slowly depending on what we do. There are boring moments when we watch the clock, cursing the time that never seems to pass, and there are moments when we feel so good that we hope they never end.

In these moments, we do not think about the passing time: we never look at the clock except to hope that the hands stop for a few seconds, a minute, or an extra hour. Time can be mysterious and cruel.

Nowadays, the society we live in gives us no respite, the perfect example is an anecdote that happened in Ecuador about 5 years ago:

A sloth, an animal famous for its slowness, tries to cross the road and then gives up, frightened by the traffic, remaining "embraced" by a guardrail in the middle of the road. Ultimately, the sloth was rescued. A simple metaphor for the slow approach to reality, opposite to the frenzy of today's society.

> Today, we live in a sort of interim, as Gramsci wrote, where the rules of the past no longer apply and those of the future have not yet been written; uncertainty urges us to live faster, in an attempt to reach something that appears elusive.

A reality dominated by frenzy that confuses us, irremediably blocking us if we do not keep up. We must focus on the finish line, and it is not simple; often, we do not even know where it is. Our actions shape us, much like a sculptor working on marble. Mistakes can be made: a small error may go unnoticed, but if we do not remain focused, we risk persevering, and poorly sculpted marble cannot be corrected.

The sloth made a mistake in trying to cross the road, but when it realized the error, it stopped and waited for someone to save it. The concentration and lucidity of the sloth overcame its "slow foot" and led to a happy ending.

The metaphor of this fortunate animal can be applied to numerous situations in our existence in the society we live in, particularly interesting to transpose into the engine of society itself: **work**.

Concentration, efficiency, and determination are fundamental bases for growing in any profession. Bases that can be severely tested by many obstacles, especially distraction and lack of inspiration.

Time

Supercharge has been my first product-design project. It is an iOS app planned to not be distributed via App Store.

> Exactly, no App Store

```
It follows an extract of a pitch deck we wrote 1 year ago at Supercharge.
```

### The Problem

It’s a topic that makes headlines almost every day — users/developers/businesses in the Apple ecosystem want the ability to [install apps that Apple doesn’t like](https://www.theverge.com/2020/8/6/21357771/apple-cloud-gaming-microsoft-xcloud-google-stadia-ios-app-store-guidelines-violations), [theme their device](https://www.cnbc.com/2020/09/21/ios-14-drives-aesthetic-iphone-home-screen-trend.html), [distribute apps without paying Apple a 15-30% “tax”](https://www.businessinsider.com/apple-developer-rage-30-percent-app-store-tax-2020-6), and so on.

Historically, breaking out of this so-called *walled garden* has required complicated and extreme measures: hacking (“jailbreaking”) your iPhone, using glitches that **get patched** once Apple gets wind of them, or **giving up** entirely on the ecosystem and switching to Android.

### Our Solution

At Supercharge, we're building a revolutionary new product: **an iOS app that cuts out the middleman, enabling decentralized app distribution outside the App Store, as well as infinite app customization**. Supercharge has two core features, which put users, developers, and businesses back in control of their experience:

**Distribution**

Supercharge provides multiple options for app distribution, which are simple for both users and developers. Developers can:

* Add an Install with Supercharge button to their website with one line of code. Provide a download link to a .ipa file, which users can then open inside Supercharge

* Offer apps through our own Supercharge Store, which makes it easy for users to discover them.

[Early Supercharge Demo](https://twitter.com/kabiroberai/status/1275853345454985218)

**Customisation**

Supercharge also provides powerful tools to customize apps by adding tweaks. Tweaks give users and businesses complete control over the functionality of their apps.

Tweaks can be created on-device using a no-code graphical editor, or with a programming language that we created ourselves, called ObjectiveScript. Just like apps, tweaks can also be shared through the Supercharge Store.

```
End of extract
```

## The macOS Installer

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FkbnQ1iWLgcoX7UBeE6nu%2F6c71ff94-7cb0-4b1c-bb5e-09f731ce6915.png?alt=media&token=8db050b9-d966-4be6-a34f-468474173155","id":"6c71ff94-7cb0-4b1c-bb5e-09f731ce6915","width":1956,"height":1160,"filename":"supercharge installer.png","type":"image/png","caption":"Image showing Supercharge Installer's before and after connecting the device in which installing Supercharge","border":false}]}
```

## iOS App

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FkbnQ1iWLgcoX7UBeE6nu%2F718505e9-334c-4229-8171-cac0188c7709.jpg?alt=media&token=df313b56-de2c-494b-ae37-17b03b48ce39","id":"718505e9-334c-4229-8171-cac0188c7709","width":3156,"height":1800,"filename":"supercharge.jpeg","type":"image/jpeg","caption":"Image showing Welcome, Tweaks, Tweak and Apps screens","border":false}]}
```

## Website

I had a lot of fun building our (unfinished) landing page refresh. Many details there. I personal prefer it on mobile views.

[Redeigned Landing Page](https://supercharge1.netlify.app/)

Design Journey: Supercharge

Elevate is the largest software I have designed for Airbnb so far, requiring the consideration of numerous variables.

Elevate serves as a centralised platform for hosts to manage their services and make new requests. Before Elevate, quotes for a host were separated. They had to open all the links to check the progress of their shoots.

To ensure that I didn't overlook any potential improvements, I took on the role of a host for a week. This allowed me to personally experience the entire process, from accepting a quote to scheduling a photoshoot with an Airbnb photographer.

Below, you will find the results of this comprehensive test, which made everything possible.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FljzO9UcUvI2k6HskkYnb%2F014e69e5-e5ce-4881-a72e-739686cf28bb.png?alt=media&token=932194f8-fbab-4cfc-a23d-34b905f233a4","id":"014e69e5-e5ce-4881-a72e-739686cf28bb","width":7680,"height":4320,"filename":"ele-research.png","type":"image/png","caption":"User Journey","border":false}]}
```

Next, I began the UI design, frame by frame.

You can find some screenshoots taken from the Figma file.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FljzO9UcUvI2k6HskkYnb%2Fa40e4b8d-e413-4f2c-9c1d-5042a7236cff.png?alt=media&token=f0d4b37b-583f-4b95-af75-dc3ab8d143e7","id":"a40e4b8d-e413-4f2c-9c1d-5042a7236cff","width":7680,"height":4320,"filename":"ele-zoomout.png","type":"image/png","caption":"","border":true}]}
```

The homepage, there hosts can accept their quotes and manage their in progress services.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FljzO9UcUvI2k6HskkYnb%2Fe461bcff-e87e-40cd-acd3-f97e3b0e39d3.png?alt=media&token=7dd15408-7155-40be-ab37-5e4c27cc4fb6","id":"e461bcff-e87e-40cd-acd3-f97e3b0e39d3","width":7680,"height":4320,"filename":"ele-home1.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FljzO9UcUvI2k6HskkYnb%2F77273126-6cc1-477b-a9f6-e075200bae8b.png?alt=media&token=e5c764c6-0cfc-4d7d-b219-8fc02b29cae7","id":"77273126-6cc1-477b-a9f6-e075200bae8b","width":7680,"height":4320,"filename":"ele-home2.png","type":"image/png","caption":"","border":false}]}
```

Alternatively, they can request photoshoots for their desired listing.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FljzO9UcUvI2k6HskkYnb%2F2eb808e3-8453-4363-8fb4-104acff24ffe.png?alt=media&token=387b546f-7a09-4875-ae53-e829d9bba780","id":"2eb808e3-8453-4363-8fb4-104acff24ffe","width":7680,"height":4320,"filename":"ele-request.png","type":"image/png","caption":"","border":false}]}
```

The timeline page is where hosts can check the status of their services, which is a crucial part of the web app.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FzeJm5BB2rCdW3idD3K6j7hMbLho2%2FljzO9UcUvI2k6HskkYnb%2Ffc1aed08-9cdd-4d8e-8a56-4013cb1fa4ce.png?alt=media&token=13ab4113-d72d-4ed2-ad53-3ed7e99d7ca2","id":"fc1aed08-9cdd-4d8e-8a56-4013cb1fa4ce","width":7680,"height":4320,"filename":"ele-timeline.png","type":"image/png","caption":"","border":false}]}
```