Interface Design: Mobile App Concept (Process Walkthrough)

No items found.
April 7, 2020

One of the joys of being a UX / UI designer is being free to create interface designs for fun every once in awhile–unbridled by business objectives and, honestly, reality.

This is one of those times that I wanted to do something UI designing just to see what I can do.

I wanted to explore colors, shapes, and calls to actions (CTA’s).

The topic I chose? Tea.

Tea is a huge part of my life.

From boiling the water to pouring the tea into my clear, glass cup to drinking the blessed taste of nature, I find every part of the process soothing.

Naturally, I had to choose tea as my topic of choice.

Let’s step through my process of creating this for-fun design of a tea-themed marketplace.

But I need to note: this is only for fun. We cannot consider this UX design because it’s not connected to a business goal or user research. It’s more of a visual exercise than anything–just fun for fun sake.

Let’s dive right in!

Naming the App

The name for this (pretend) app actually came pretty quickly to me.

SpillTheT felt like a fun play on words involving tea.

By shortening tea to T, I felt like there was something there that could be plausible and advertisement-worthy.

I went with cursive because, just like the pouring of tea from a kettle, cursive is fluid.

Home Page

Information Architecture

Like most home pages of marketplaces, I wanted to show a summary of the teas and teapots that are most popular (in our made-up “research”) and new.

I wanted to be space-efficient while not bombarding the user with many products.

This is where making categories is important. Separating the items by category makes it easier to find products for users who just want to explore without a specific preference in mind.

If you scrolled down, I could have added popular or new teacups, teacup/teapot sets, and items on sale.

I also kept the bottom navigation simple: home page, catalog page, digital shopping cart, and profile page.

These felt like the main essentials for this (fictional) company.

Visual Design

Like many on Dribbble, I went for a more rounded shape approach.

Rounded buttons suggest playfulness and friendliness.

That’s my idea of tea, so I felt that it was appropriate.

Teacups and teapots tend to have rounded shapes as well, so mimicking this physical design added to my reasoning.

I didn’t feel that the popular tea section needed much vertical space because most people wouldn’t need to zoom into the images, so I kept them small.

You can find more options by swiping horizontally which certainly saves space and gives more room for the teapot images underneath. Having the option to do this is a great affordance of mobile design!

I chose blue as the main button color because, well, it’s probably the most recognizable color for a button on digital products.

Product Page

Information Architecture

I wanted the price and title of the product upfront and center along with adding the product to your cart.

Any details of the product, in this case, the teapots, would go below.

I kept this area really loose with lorem ipsum, but I can easily imagine showing users information like a general description, the best temperature to use with the particular teapot, the dimensions of the product, and more.

This interface assumes the user pressed the teapot image on the home page, so the home icon is still selected in the navigation below.

To go back to the home page, the user can either click that button in the navigation or through the previous button in the top left corner.

Visual Design

The image of the product needed to be really prominent like you would expect for any product page, so the image takes up a good chunk of the UI here.

However, to save space, there is a little overlap between the image’s background and the price/title/cart button below it.

Due to this, I couldn’t put the image carousel indicator (aka the circles that normally go below the image) below the image, so I instead put it at the top to show how many images there are–in this case three for both products.

I felt like the background here could use some playful texture, so I added a low-opacity striped pattern for the Sakura Cast Iron Teapot and a gravel-like texture for the Hammered Cast Iron Teapot.

Can you guess what those patterns are?

(Answer: jeans and gravel, respectively)

I tried to use icons for the descriptions below to visually break up the information and make the organization more clear at a glance.

If you have a keen eye, you may have noticed that the teapot image isn’t technically centered.

I moved them both to the left to align the teapot (subtracting the spout) to the center.

This makes the lid horizontally centered in the UI, creating a sense of visual balance.

Finishing Touches

To make this Dribbble ready, I added a background that enhances the look of the interface designs.

I also added a phone so that it looks like the screens are part of an actual product.

Caveat

Again, this is just a visual exploration of a tea app–it is by no means perfect.

For example, in a real app, you would want to add a search function on the home page.

If I were to test this product with users, being able to search for something specific would probably be the first thing to come up, among other things.

Why don’t you try your own visual exploration design?

let's talk

Have an idea? Need some design expertise?
Let us help.
Send a Message