Pangea is a mobile app that enables local exchange of goods and services between college students.
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.
- Team & My role
- Redesign the service page
- User scenario to list a service
Team & My role
As the only designer on the team, my responsibilities include:
- Design the UX/UI of the app;
- Design the pitch deck for startup competitions.
- Prepare marketing materials.
- Paint large-scale company logo for startup fairs.
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. The first round of redesign was 40+ pages in 2 months.
Understand how Pangea is different from other marketplaces.
There are definitely other products out there that are similar to Pangea. However, unlike most other classified marketplaces, such as Craigslist, that are for everyone, Pangea focuses on college students. With ratings, reviews and profiles for each user, Pangea aims to build up trust between users, which is also a key differences from Craigslist.
Start from the most important page first, then apply the visual language to other pages.
To redesign the whole app, I started with the most important page – the service page. Service page is where users list their services and browse others’ offerings. It is the first page that users see after login and the page that they will interact most. Therefore, I started the redesign with the services page.
Redesign the service page
Identify problems in the existing service page.
Sketches & wireframes
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.
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.
In the earlier versions, the provider avatars take up significant amounts of space, because we wanted Pangea to be about people not just services. 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.
What's working: Better hierarchy. Service names are more prominent.
What's not working: A few important sections are hidden in the hamburger menu. The navigation structure need to be redesigned for users to easily access those sections.
4th round: Change from hamburger menu to bottom navigation.
While a hamburger menu can be a good navigation solution for some apps, for Pangea, where users will constantly switch between different sections of the app, it is important to make the transitions as quick and as easy as possible.
A bottom navigation allows users to go between the main feed, inbox, payments and profile easily. Also, we realized “search” is a main action of the app as well, therefore we also made the search bar much more prominent.
Final design: Bottom navigation with large search bar.
In the final solution, we used blue and red-orange to balance each other; a bottom navigation that allows users to easily switch between sections; and a large search bar to encourage action.
Easily filter the list of services.
User scenario to list a service
User scenario: Kate is a RISD student with student loan.
Kate is listing a "Bake the BEST Cake" service.
Before the redesign, the whole flow was a one-page form. The redesign break the form into small steps so the process is more digestible.
Profile page to build trust.
Pangea is about people. User profile is one of the key differences between Pangea and other classified marketplaces like Craigslist. With bios, ratings and reviews, the page helps build trust between users.
Learnings and 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.
Our team at Brown University Startup Fair.