Making a Marketplace for Carry-on Spaces

CarryonEx App · Since 2017

CarryonEx (游箱) connects travelers and package senders, empowering frequent travelers (出行人) to fully utilize their idle package space, and to help senders (寄件人) by delivering gifts to their loved ones who live in traveler's destination. This iOS app is targeted at young Chinese users who reside in North America and the Asia-Pacific region.


My Role

In this side project, I was working with a small group of talented PM and engineers located in NYC, leading all facets of the design including:

  • Visual identity: how do we want the brand to be perceived by the user; look and feel of the product.
  • User task flows: how does the user travel through the product while performing tasks from both traveler and sender's side.
  • Product: interface and interaction design throughout the user journey.
  • Production: brand assets, design guidelines, design patterns and App store promotional assets.
product shot


The Challenges

In order to catch the holiday season when traveling is frequent, the app wants to have its first release within 2 weeks after I started, so a quick understanding of the product and market, a fast turnaround of the design from ideation to production is required to meet such an aggressive timeline. In order to deliver, a solid and scalable design foundation and a set of reusable components need to be established for future releases.

Brighten Up for the Young

The ask was to have a clean but playful undertone throughout the product experience. When I started working on the project, a couple of screens of UI work and illustration work has been done, the team wanted to keep some of the original work but to make it a bit more light hearted. The first thing I tweaked was the color palette, since it would bring a strong visual impact that could influence first impression.

Since the majority of users are falling into the young, Chinese Generation Z demographic, I have picked brighter, more saturated colors to bring more energy to the app, the palette also makes the overall white user interface more inviting.

Color palette
I have separated the palette into UI and text groups so there's sufficient contrast between text color and the background, making the UI more legible.

The team also wanted to redesign their logo, they wanted the new logo to look more friendly and inviting. Based on the newly established color palette, also considering the ask for simplicity, I have explored some different Brandmark options:

Brandmark explorations
The idea was to have the logo resemble the shape of a box, also mimic the brand's initial letter "C". Rounded corners are used to add some softness to the shapes.

Feedback from earlier iterations showed interest in personifying the box. Since young, Chinese students are no strangers to characters with cute exaggerated expressions and punchy colors in their apps, I have pushed a bit further and went with a happy luggage. After a few rounds of revision, we had the logo.

Logo

Design to be Future-Proof

Key features around users from both ends needed to be addressed to lay the foundation for the initial release:

  • Travelers (出行人): As a young Chinese expat who travels at least once a year, I want to post and share my luggage availability, so that I can make some extra cash on my way to the destination.
  • Senders (寄件人): As a young Chinese expat who wants to send gifts that friends and family don't have access to, I want to make sure the person who delivers is reliable, so that I can have the gifts safely delivered on time.

Flowchart

Some key moments in the experience are often related to both sides of the user, and are often calling to actions that close the loop.

Due to the tight timeline before the initial launch, the product design needs to be in a good spot visually as early as possible to leave some time for design QA. To speed up the process I have identified basic components and their variants shared across these key moments — including foundational elements such as buttons, labels, elevation and have them created as Sketch symbols; UI color palettes and text styles were also created so the product is consistent throughout the user flow. As the project progresses and new screens are added, new adjustment got to be made quickly.

All the UI components were consolidated and organized into a Visual Guidelines doc, which was later distributed for development:

visual guidelines

Connecting Key Moments

Because of the 3-hour time difference, we used a combination of tools such as Google Docs, Invision and Trello to collaborate. With basic building blocks structured, I've begun to put pieces together based on detailed flow and data points, starting from key moments:

Key moments

Invision Freehand was a pretty neat tool to quickly drop drafts and identify flow gaps.
Mindmap

Tools like Coggle were great help to do mind mapping and get quick feedback. Here's the flow concept coming from Home for travel, send package and search.

Orders and Order Detail

The Orders page is categorized by Travelers and Senders. Every trip is tied with a Carryon Box number, which is shared through social media, senders can add their packages to the Box by searching the Carryon Box number, an order is completed once the Traveler accepts the Sender's request. The Traveler can lock the Box at any time to stop receiving new requests.

Orders
Orders
Orders

Header image changes based on the role of the user: because Travelers may have multiple Carryon Boxes from a single departure city, the header image would show the cityscape of that city; whereas the header image would be the destination's cityscape for Senders, since they typically send packages to a single location (hometown).



Rating

Once package delivery is confirmed, both ends will be prompted to rate each other. Ratings detail is available publicly through user profile and orders information, this adds credibility to the users and encourage good behaviors and better services.

Orders
Orders
Orders


Wallet and Cashout

We wanted to make the Wallet feature simple and transparent. Big number is presented on the initial page to show current balance, with a CTA right below for cashout. Alipay is used as the agent for secure and fast money transfers, this also adds accountability to the app. I've also added some shortcuts below cashout value for quick operations.

Orders
Orders
Orders

Next Steps

We are iterating and launching fast. We are looking to make some more UI refinements as well as adding a simple messaging feature for better user communication. Search and recommendations are also going through the research phase. The Android app is also being planned.

Carryonex