Desktop HD Copy 41.jpg

Pangea old

 
 
 

Introducing Pangea

Pangea is a mobile app that enables local exchange of goods and services between individuals in the community.

Since September 2016, I've been working with 5 students from Brown and Cornell University to build a mobile app, Pangea. It is a classified marketplace for individuals to list their services or goods, and promote to the local community. The product will launch in Spring 2017.

Artboard Copy 41.png
 
 

The team & My role

As the only designer on the team, I work on tasks from designing the UX/UI of the app, to making marketing materials, to painting the logo for Startup fairs.

Artboard Copy 7.png
 
 

Why did I join?

The mission to build local community drew me in.

When I joined the team, the other founders have been working on the product for over a year. I was excited to join because Pangea has the mission to reconnect people on the local level. I believe human interactions are the most beautiful and meaningful parts of our lives. Technologies, like Pangea are powerful tools to encourage more meaningful interactions to happen.

 
 
 
 

The design challenge

How might we elevate Pangea's visual design so users will trust the product and be excited to use it?

When I joined, half of the mobile app pages were developed with little designs and the other half were still waiting to be developed. My task is to improve and unify the designs. As a platform for users to be entrepreneurs and list their offerings, Pangea has to look professional. On the other hand, since Pangea is based on human interactions, the design also needs to be friendly and personable. 

Screens before I joined:

Artboard.jpg
 
 
 
 

My approach

Focus on redesigning the most important page first, then apply the visual language to other pages.

Instead of separating the process to pick brand colors and the actually design of the mobile app, I find it more efficient and effective to do both at the same time. I started by experimenting different visual options on the service page.

Since there was an existing structure for the page, there was no need to reinvent everything. I designed with the existing framework in mind to minimize unnecessary development efforts. 

 

 

Evolution of the service page

Service page allows users to browse and list services.

I decided to start with the service page, because it is the first page users will see after they log in and will interact with the most. It sets up the tone for all the other pages. 

 

Identify problems in the existing page

Artboard Copy.jpg
 
 
 

Sketches:

 
IMG_2031.jpg
 
 
 

1st round: Add colors to look more friendly.

The first thing I tried was to add more colors to the page, because the existing page look too cold and not personable. However, once I added the colors, it was clear that the page looked way too playful. Pangea is a place for people to promote their businesses. It has to look professional. Therefore, I had to revise.

What's working:  Better alignment. Circular photos look more friendly. 

What's not working:  Way too colorful and playful for people to promote their business on.

 
 
 
 
 
 

2nd round: Go back to fewer colors to be more professional.

Realizing it is inappropriate to use too many colors, we searched for the combination of colors that can look both professional and warm. 

Color choice:

 

What's working: The colors look more professional. Grey background clearly separates the cards.

What's not working: Provider avatars are so big that overwhelm the service names. Orange stars are a bit distracting.

 
 
 
 
 

3rd round: Change visual hierarchy to highlight service names. 

One of the biggest differences between Pangea and other classified listings is that we focus on the people not just the services or goods. Therefore in the earlier versions, we made the providers' avatars take up significant amounts of space.

However, because of the large provider avatar, it was unclear whether it's a list of people or a list of services. We need to highlight the service names more, so users can easily look for the services. Therefore, in this round, I worked on finding the balance between service info and provider info.

What's working:  Better hierarchy. Service names are more prominent.

What's not working:  Blue stars make the page look too cold. 

 
 
 
 

Final design: Make service the most prominent. Use blue and red-orange to balance each other. 

In the 2nd round, the orange stars stood out too much, while in the 3rd round, the light blue stars made the page look too cold. To achieve a good balance, I decided to use red-orange in the final design. While red-orange adds warmth to the page, it doesn't stand out too much like the previous orange color. 

 
 
 
 
 
 
 

Apply the design to other pages

While focusing on the service page, I worked on the other pages simultaneously, to establish a consistent visual language.

Because the product has not launched officially, I will not go into details. If you are interested, I'm happy to talk more about the process. Let's get in touch! :)

 
 
Artboard 3 Copy'.png
 
 
 
 

Next steps

Build a basic style guide to keep consistency.

As I designed more pages, I realized how difficult it is to keep track of all the styles without a style guide. While we would not need a detailed style guide, because we are still in very early stage and many changes will happen, having a basic style guide will definitely help to keep the designs more consistent.  

 

Iterate. Iterate. Iterate. 

Because of the tight timeline and the large amount of pages that need to be designed, many design details have not been addressed. We are very aware that there are many improvements that can be made. This is only the start of the product. We will continue to iterate based on user feedbacks. 

 
 
 

More works