Erika

UI/ UX for Ginkgo’s Product

— WHAT I WORKED ON

User Experience

Service Journey

User Interface Design

Hand off to Developers

GINKGO IS

Ginkgo, previously Citiesense, is primarily a B2B SaaS product aimed to serve community managers like Business Improvement Districts & Chambers of Commerce.


One of the many new features that Ginkgo provides is a white-labelled embeddable member portal platform. This feature helps non-profit neighborhood organizations (the users) manage, communicate, and organize their own membership system.


THE PROBLEM

Ginkgo needed an administrative interface to add on to its web-app for each user to manage their members, membership fees, and how their member portal system looks to their members.


While the member portal's back-end was being built, I was tasked to design how this member portal would be managed and experienced by Ginkgo's users on the front-end.


MY ROLE

As Ginkgo's product consultant and freelance designer, I stepped in to work on the UX and UI of this product feature before we handed it off to the engineering team. This specific project was on out of a number of UI designs I had worked on for Ginkgo (Citiesense).





GOALS

A user-friendly administrative interface will provide ease to their day-to-day work responsibilities and encourage active usage of the system.


The more Ginkgo’s users engage in a feature, the more feedback and improvements can be made for the software to do more and do better for them.

PROCESS

I started with outlining the primary user of this interface and the assumptions we had to make for this experience to be prototyped. Once this was laid out, I started wireframing how the members' list and individual account pages would look like and how the features would function. We agreed on a direction and proceeded to design the UI on Figma. Each interface’s states were then laid out for easy hand off to our engineers.


PEOPLE

The users of this interface are the marketing and fundraising staff of non-profit neighborhood organizations currently using Ginkgo.


Their primary need is an online system that provides easy-to-use digital infrastructure to manage their memberships, and has the flexibility to adapt to their organization’s branding.


The complexity involves the members of each Ginkgo user’s member portal. Membership here is provided to a business, within which has multiple contacts (i.e. a General Manager, CEO, Accountant). Therefore, "members" in this case study refer to the businesses that pay membership to the non-profit neighborhood organizations (Ginkgo’s users); and "contacts" refer to the individuals that manage these businesses.


ASSUMPTIONS

  • - A list view is the best method to manage members (the businesses that pay membership fees).
  • - The list should provide the following info at-a-glance: each member’s status, the plan type each member was on, and which members are most active on their portal. Users would also need the ability to click into each member (the businesses) to manage the multiple contacts within that specific member organization.
  • - Flexibility is important to be able to select multiple members from the list to create bulk actions like “bulk invite” or “bulk export to csv”.
  • - Quick CTA should be readily display to invite a member
  • - There needs to be a seperate dedicated page to manage the details and price of each membership plan they are offering.
  • - Users want full control on the published member portal system. It is important to them that it matches their organization’s branding since this member portal will be embedded on their organization’s website.
  • - A 3rd dedicated page is important to make adjustments and changes to the portal system’s settings. This includes the ability to change header, subheader and body text, choose a primary theme color, upload and link data and digital maps that they provide for their members, and quick access to the member portal’s embed code or url.


Member List


The following are the interface designs for each member’s account page and the journey flow.

Portal Settings


Once the Members List page was designed, we moved on to the Portal Settings pages and the Portal Plans pages.

The Members Portal interface is currently being built by Ginkgo’s engineers. The hand off was smooth, and the documentation and guidelines for these UI designers were well-received by the front-end developers.

OTHER UI DESIGNS