Wonder City

Encourages offline connection

Case study 3 - UI design for Wonder City shopping mobile app

The users

Responsibilities

Brand design · UI visual design

Team

1 UI designer · 1 Product manager

In China, people are obsessed with online shopping for low-quality goods. Wonder City is a mobile application designed to encourage people to wander and shop in physical shops around them.

We believe that surprises are all around you if you go and seek, people need to experience in real life in order to find the best products which really fit them.

Lilian

25, Graphic designer

I love hanging around with friends. I do online shopping all the time. It is budget efficient, easy to buy several items with cheaper delivery.

Sam

28, Shop owner

I own a vintage toy store. I only collect the items that has stories. Sometimes, my customers can buy them online but I enjoys more talking to them in person.

How can we help connecting the customers to find the right match with the shop owners?

Customer

"I think online shopping is so much easier, and you can read the review. Sometimes you just worries the physical shop owners are a bit hard sell on what they are selling"

Shop owner

"I own a small physical shop. I don't know much about marketing and I am too busy to handle another online shop. I wish it is easier to find someone who will be interested in my shop."

Let's the customers who share similar interest in shopping to build their own tribe.

Make it rewarding to contribute if you know the shops are good for your tribe!

Brand image

Futuristic,
adventurous,
and fun

Adding a sense of human touch for a mobile app

Firefly is chosen as the brand icon as it is a rare creature that can naturally gives light and it makes people feel warm and attractive.

In Wonder City, users will find fireflies that can lead them to search for something valuable and matching their needs.

Design highlight

For the overall mood and feel, I would like to make the presentation futuristic and adventurous, to make the user use the application more like a fun exploring game instead of just a searching tools for shops.

To immerse

Welcome page

Storytelling as a way to welcome users to the tribe when they first download the Wonder City.

This creates a sense of community and encourages users to engage with the activities inside the application.

Screen 1 & Screen 2

To create a community

1. Homepage

The homepage works as a social media. We would like to attract users to visit the shop by linking users who share similar interests. If the users press the link on the post from their following person, it will go to the page of the shops' details.

2. Search page

On the search page, users can search for shops based on the categories or locations. I designed the icons which make the mobile application more like a game that lets users wondering in a fantasy world.

Screen 3 & Screen 4

To encourage engagement

3. Reward page

By consuming in certain shops with the mobile application, the users are collecting the power of light from the fireflies. With more power, users enjoy different benefits, for example enjoying certain discounts, getting chances in the lucky draw.

4. Photo filter

Branded image frame will be generated when using the application to take picture. Users can take pictures and share their moments on social media which will help promoting the brand as well as collecting rewards.

To align with brand image

Special pages, special treatment

Special pages or empty pages won't appear as often as other main pages, but those are the pages that users' flow got interrupted. Therefore, we pay effort on aligning the visual with the brand images, so as to help the users feel like they are still in the community even something goes wrong!

Challenges and result

1 Test early, fail early

Being able to be adoptive at a startup environment

This is my first time joining a startup. No one has clear direction on what is right and what is wrong. You need to be not to afraid of failing as it requires constant testing and questioning. Once you were told by the users that there is something wrong, you need to act quickly and to try other ideas.

2 Controversial can be good

It could be more memorable to your customers for something controversial

The UI and the visual is setting up how the customers understand your brand. At the beginning stage, I tested on a few options and this latest one is the most controversial. People either hate it or love it. As a new brand, which is still at the stage where we can still afford to fail, triggering an emotional response can be what we want so we can hear more diverse opinions!