designer. thinker. programmer.

UI & UX Design for Relationship Management SaaS


Project Goal

To develop and ship a new map-search feature, and add to RelPro's existing relationship-management platform.

My Role

Front End UI Design and Development Intern at RelPro, a B2B software company (Fall 2017)


Sketch, Adobe Illustrator, Javascript, HTML, CSS


Myself, another UX Design Intern, and a Front End Engineer


Product Demo:


Designing a Geographic-Search Feature


Project Background

In Fall 2017 I interned at RelPro to design and develop the user interface of a new location-based search feature.

RelPro is a business intelligence software application for sales intelligence and relationship management. It leverages data aggregation and analytics to help marketing, sales and customer success teams to better target, get and keep clients.


Understand the Current Product


Profiling the Existing Customers


RelPro is an up-and-running relationship management product since 2011. As of September 2017, there are over 2000 business subscribers.

Therefore, in order to design the next feature, we need to first understand the current user groups, and how they use RelPro.


Competitive Analysis for Current Product


To best translate and extend the RelPro experience, we also need to identify what makes RelPro stand out from its competitors.


Research + Design Process

Integrative User-flow


The user should feel familiar and intuitive when researching with the map interface. The experience should be similar to using other RelPro search features.


Map-Specific Design Challenges


Survey on Map-Based Web Apps


We surveyed eight different map-based consumer apps (B2B software with map features was hard to find), four of which are shown below. We analyzed, respectively, how each interface facilitates user experience.

Amongst the map-based apps, there are two essential components that formulates the user experience: pins and floating information cards.


UI Design for Map-Search



When designing the UI, I was also given the task to evaluate the popular map plug-ins and APIs, to recommend the best fit for RelPro.

Later on, I was assigned to program the working prototype using that API. This technical phase took 2~3 weeks, in which I worked closely with the tech team to deliver the hi-fidelity prototype.


Below is a glimpse of the work-in-progress prototypes I’ve tried, through which I considered different functional requirements:


1. Began coding with the traditional map pins


2. Customize pins by instance attributes, such as branch company and subsidiary company. (The circle pins are PNGs, the star pins are by Google Map API's vector drawing function)


3. Create one-to-many pins using the MarkerClusterer library from Google. (I also customized the PNGs for markers, to align with RelPro's visual style)


4. Use tree-structured hierarchal checkboxes (DOM) to dynamically add/delete pins from the map


The finished program was shipped in November 2017.

In this version, we used individual pins instead of “clusterers”, because it turned out that, after the user sets filtering parameters, rarely would there be > 500 search results. Therefore, using single pins is a better solution, allowing users to view the discrete search results with less mouse clicks.



The End.

Thank You for Viewing :)