DoubleMap

 
architecture-buildings-bus-1494582.jpg
 

I took on the role as product manager in helping to improve the mobile passenger app for DoubleMap, a transportation management and analytic start up. I worked closely with 3 other members of my team, carefully dedicating our task, providing them with the necessary guidance and ensuring that we are on track with out time line.

Approach

Just like any other project, we started by identifying the problem. This was done through various research, which we then used the results to brainstorm potential solutions and critique each other's ideas until we have a perfect solution that can both improve the user experience of the product while also giving it more value to the company. We then turned our ideas into designs and created a series of prototypes which we iterated on multiple times based on feedback we have obtained on our user testing.

Initial Research

We started by asking the question "What is wrong with the current product?" and "How to add more value to the product?" Hence, we analyzed the issues that it currently exist with the current application, as well as how it performs relative to other competing products in the market. This was done through primary user research and market research.

The challenge with this project that there many room for improvements in the app and we receive many different complaints regarding it. Due to the limited time and resource constraints, we needed to focus on the problems that was causing the biggest pain points among its users.

By interviewing with some frequent users of the app, we were able to quickly identify the key areas of concern that was uniformed across all users and needed to be improved on.

conversation (1).png

First Draft

dm h.jpg

Now that we have our solution, it was time to put it on paper. We brainstormed four different versions of the homepage designs at first (as seen above). We wanted to really showcase the new features we added but at the same time not derail its core users from their daily routine. The changes had to be be subtle, but not too subtle. We were unsure which of the four designs were the best at first, and our interviews provided inconsistent results. However, when users mentioned that the route planner is important, it is not their main purpose of using the app, having a live map with real time information of the buses is still the main priority. Hence, v2 or v3 of the home page design were the best options. But during our usability test, users did not noticed the the newly added route planner. Hence, we finally settled on v1’s design as a home page instead.

Screen Shot 2018-04-21 at 5.59.36 PM.png
Screen Shot 2018-04-21 at 5.57.00 PM.png

A much bigger challenge we faced however was trying to visualize the real time passenger load of the buses on the maps. It is crucial that we perfected this feature as it is the user’s biggest pain point that they currently do not know if the buses are full and that they should not wait for it. We eventually came down to 2 final design options, both has it’s pros and cons. The first design shows the load of the bus but is also more complex, while the second is easy to see but will only indicate if the bus is currently full or not.

Deciding which option to use was difficult and our team had a dispute over it. However, upon further interviews and tests with our users, the second option was better accepted by the users as they find the first option a little too difficult to see.

Final Design

After weeks of constant iterations and cracking our heads for ideas, we finally produced a final prototype of our new features to be added into the DoubleMap passenger app. Below is an explanation of the new features along with its Invision prototype.

 
dm1.jpg

New Homepage

The new homepage we proposed features 2 search bars on the top of the screen. Users can enter their desired destination and origin and tap on the compass to find the quickest route.

 
dm4.jpg

Route details

After selecting their preferred route, users can see the detailed steps to take to their final destination including which station to go and which bus to take.

dm2.jpg

Bus INFO

An added feature to the new homepage is bus information. When users tapped on any of the buses on the screen, it will display details about the specific bus including Bus no., route, heading and current load. The route no. will also be displayed in red if the bus is full.

dm3.jpg

Route Options

Inspired by Google Maps, after tapping on the compass icon in the homepage, users will be shown every possible route options to their selected destination. The options are ordered according to travel time from fastest to slowest and briefly summarizes the routes.