designer. thinker. programmer.
r-7.jpg

UI & UX Design for Relationship Management SaaS

 
new-title-1.jpg
 
 
 
relpro(1)-0.jpg
 
 
 

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)

Tools

Sketch, Adobe Illustrator, Javascript, HTML, CSS

Team

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.

 
rel-01.jpg
 
 
 

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.

 
rel-02.jpg
 
 

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.

 
rel-03.jpg
 
 
 

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.

 
rel-04.jpg
 
 

Map-Specific Design Challenges

 
rel-05.jpg
 
 

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.

 
rel-06.jpg
 
 

UI Design for Map-Search

rel-07.jpg
 
 

Prototyping

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.

 
rel-08.jpg
 

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

g-2.gif
 
 

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)

g-3.gif
 
 

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)

g-4.gif
 
 

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

g-7.gif
rel-09.jpg
rel-10.jpg
 
 
 

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 :)