Back to Top

2D Designs

Collection of illustrations and UI designs I made for fun.
A cover photo showing a Figma like dashboard populated with my 2D artwork.

2019

Nike Next % Ekiden

Back in 2019, I bought these running shoes in Tokyo and felt inspired to draw my first pixel art :) This was also my first unofficial post on dribbble

A limited edition blue and orange nike Ekiden running show in pixel art.
128bit Nike Next % Ekiden

404 Page

For this randomly generated UI challenge, everyone in our office had to make a 404 Page + Flowers. When I think of flowers I couldn't help but think of the Thai Loy Kratong Festival.

A page not found error web screen that says "Oops the page you are looking for has floated away". The text 404 is reflected off the water, the Bangkok city skyline can be seen along with an assortment of flowers that decorate the banana trunk floating in the water.
The page you are looking for has floated away

Finn's Magical To Do List

This time we had to design a To Do App + Magical. Adventure Time was one of my favorite TV shows growing up, so I felt obligated to bring a little Ice King magic to our Finn the Human world.

A to do list that has an image of  Finn the Human reflecting Ice King's magic with his sword (from the cartoon Adventure Time). Some of the todo list items says "Save princess bubblegum", "Tidy up tree fort", "band practice with Marceline".
Finn's To Do List

Scheduling App + Time Travel

When I think of time travel I think of Back to the Future (with a little Elon Musk Tesla twist to the vehicle).

A time travel scheduling app in pink and blue. Users input their location then their date and time. Finally they select what mode of transportation they want to use. In this image the user has selected the Tesla Model TM.
Tesla Model TM (Time Machine)

Dashboard + Pet

At first I started ferociously sketching out wireframes but the layout quickly became jammed pack. So, I took a step back and created a persona of myself and the problems I had taking care of my Pomeranian. With a clearer scope to the problem, I was now able to sketch out the wireframe which I turned into a UI screen.

A dogcare dashboard for families to  manage the daily tasks of taking care of their dog.
Web Dashboard for Dog Care

Premium Timer

For this design challenge the prompt was to design a premium countdown timer. After brainstorming, I decided to incorporate a whiskey glass into my timer mechanism. Although I don't drink whiskey, I always found the blue and gold of the blue label classy so it could potentially work.

A timer on the iphone screen that reads 10 minutes. Instead of a numerical countdown a full whisky glass works like a time sand.
A Premium Themed Timer App

Weather App

I had just returned from a trip to Osaka and was inspired by my run around the city's majestic castle, surrounded by cherry blossoms.

A weather app showing the weather in Osaka, Japan being 25 degrees Celsius. There is a illustration of the Osaka castle with its cherry blossoms in blue, pink, and white. The castle's light setting would change depending on the time of the day.
A Japan Themed Weather App

Soft UI Garmin Connect

Decided to try experimenting with Neumorphism / Soft UI style. I really love using my Garmin GPS watch for all my fitness activities :) and thought it be cool to try giving the app a new look (while keeping the badges since I really love their current artwork!)

A dark UI theme design I made of the Garmin activity dashboard using neumorphism. The top card shows that the garmin watching is syncing information with the app. The second card below shows unlocking a Chinese New Year activity badge. The cards below show exercise activities such as cycling and running.
Garmin Connect Neumorphism Redesign

2020

Dribbble Debut

Some kind soul gave me a dribbble invite, so now other people in the community can see my work (before that it was only me who could see it). This was my official Hello Dribbble debut post.

The background reads "Hello dribbble". There is an image of a card and on it says "New badge unlocked: off the bench". There is an image of a basketball hoop with a dribbble logo ball. Below it reads a small text saying "Play your first minute on Dribbble! @johnsonmaung9 for passing you the ball". Finally on the bottom is a Call-to-action button that reads "Thank you".
Hello Dribbble!

No Internet

My playful interpretation of Google Chrome's no internet dinosaur. The dinosaur evolves into Godzilla and the final boss is the Fire Fox.

A playful scene depicting Google's no internet dinosaur, evolving into godzilla, and fighting against a fire breathing fox. Unfortunately for the player they lost, so it says game over.
Chrome vs Firefox

Shine Through the Dark Times

This was when the corona virus pandemic started and incidents of hate crimes against asians were on the news. It saddened me that innocent people were getting discriminated against because of the color of their skin.

In times of fear, we sometimes forget that we are more similar than different. Stay safe, stay strong, stay loving.

A yellowish tan desert in the background with the chinese flag as the core focus of the scene. However, instead of the yellow stars on the flag it is hearts instead. The biggest heart is smiling.
A cherry blossom tree branch in a blue background, instead of shedding leaves though it is letting its red heart float in the wind. At the foreground is the japanese flag with a big red smiling heart instead of a circle.
A korean flag with a blue and red heart in the middle instead of a circle. A dark blue background with pink hearts scattered around it.
Shine through the dark times

Signup Screen

I decided to try the Daily UI Challenges. Here was my take on #1 Signup. I used the bunny sickle logo I designed for my t-shirt for the splash screen and my low poly salad render for the main screen.

A app splash screen showing the plant slayer text and logo (looks like a modern sleek sickle and a bunny). The second screen shows the sign up page. It reads "Welcome to Plant Slayer, be the hero of your own story and embark on a journey to reclaim your health."
Daily UI Challenge #1: Signup

Checkout Screen

My take on challenge #2 design a credit card checkout form.

A organic food grocery checkout screen, where you can select your delivery method and review your produce order. The second screen is the payment screen, where you input your credit card details.
Daily UI Challenge #2: Checkout

Website Landing Page

Today's design challenge was a landing page. Taking the Plant Slayer mock brand concept a bit further, I designed the landing page for a fresh produce subscription kit and incorporated a 3d piece I had rendered as the hero image.

A dark purple website home landing page. It reads "Welcome to the Plant Slayer's Guild. Our subscription box of locally sourced organic fruits and vegetables, makes it easy and affordable for anyone to eat healthy".
Daily UI Challenge #3: Landing

Juice Be Yourself

I have always had such difficulty drawing perspectives, so I thought it would be a good learning experience if I created a low poly scene in Blender then redraw as a vector using Figma.

A scene showing a low poly orange slice and a cold glass of orange juice with some ice cubes floating in it.
Juice be yourself

Calculator Screen

For this UI challenge, the prompt was redesign the calculator. I tried going with a more colorful and modern theme, using gradients that are typical amongst startup apps and websites.

It reads "the answer to life, the universe, and everything." and a redesigned UI screen for the iOS calculator in the foreground. The background shows stars and planets in the galaxy.
Daily UI Challenge #4: Calculator

Icon Design

I was sending emojis on my phone when I had an idea that the eggplant emoji could make for a cute icon. Continuing with the plant slayer theme, I added in a ninja star for good measure.

A blue app icon with a plump green and dark purple eggplant with a ninja star thrown at it for the logo.
Daily UI Challenge #5: Icon

2021

McDonald Design Challenge

This year one of our office resolutions was to have more UI design challenges. The first prompt we each had to do was to redesign McDonald Thailand's application.

A redesigned McDonald app screen showing the delivery tab. It reads "What are you craving" with the yellow logo and bold red color for the top navigation. Underneath it displays the featured menu items such as Cheesy Bacon burger.
McDonald Thailand Design Challenge

Mock Neural Link UI

This one was a interesting one. The prompt was design the UI for a hypothetical startup that uses Elon Musk's Neural Link to be able to understand your pets. So I experimented with a clean chat based UI concept mixed with Apple's Siri. The star of this app is yours truly, Salapao my doggie.

Some UI screens of Petbit showing a chat screen made from analyzing my dog's thoughts (this was a fictional app pretending that Elon Musk's neural link was capable of doing this).
Neural Link Babel fish for Pets

SAii Hotel App

The prompt this time was redesign a hotel app that guests on Phi Phi island use to book activities. I had been seeing cool frosted glass ui effects on dribbble, so I wanted to try and experiment with it.

The home tab for the SAii app for its hotel customers. It reads "Hi Tavin, Welcome to SAii" beneath it shows key information such as boat trip, diving, etc. and beneath that shows popular activities such as long tail boat ride.
Hotel app for SAii

Strava for Beginners Challenge

Redesign the Strava app to make it more friendly for running newbies.
When you are just starting out, it can be intimidating to see your friends who have been running for a while do these seemingly impossible distance. Because of this I thought it would be a cool concept if users could also see their friends activities back in time. On my feed, I can switch to time machine mode and see the activities of my friends at the same point in time after joining as me. For example, after if I've been using Strava for 2 weeks I can also see the activities my friends had logged back when they had been using Strava for 2 weeks.

UI screens for a redesigned strava exercise app. The feed is on the "Time Machine" tab, so it displays all the activities of my friend back when they started exercising.
Strava for exercise newbies

Pomodoro Gamification

For this office design challenge, we had to explore a gamification concept to use with www.gather.town (think zoom meets discord meets pixel rpg). I designed a add-on feature so users could complete pomodoros (25 minute blocks of focused work) and compete with colleagues to see who could be the most productive. In turn, the winners of the leaderboard can unlock avatar or room decoration items. Additionally, It was important that users could be able to see when other people are in the process of their pomodoro as to not distract them and can leave a note that appears only after that person's pomdoro is completed.

The gathertown app displaying a game like pixel version of me completing my Pomodoro 25 minute of focus. On the left of the screen shows my statistics such as how many focus sessions I done today, for the entire week, and my stretch goal to receive decoration items for completing focus sessions.
A popup screen that occurs when I complete a pomodoro. It shows the experience points I get which I can later use to redeem for decoration items like a shoe for my avatar.
This image shows the benefit that I can now see in this zoom like gathertown environment if my coworkers are also doing a pomodoro and don't distract them but rather add a message that will notify them later so they can come talk to me. On the left of the screen it also shows the leaderboard, where the office can compete to be the most focused.
Gather.town Pomodoro feature
Back to Top