card-based ux/ui for data insights delivery · 2019. 3. 9. · jira and zeplin. thank you!-phil....

Marketplace 3.0 v1.9

1

[email protected]

CARD-BASED UX/UI FOR DATA INSIGHTS DELIVERY

I AM A BIG FAN OF CARD-BASED USER EXPERIENCES. PION-NEERED BY GOOGLE NOW, CARD ENABLE INFO DELIVERY TO THE RIGHT PERSON AT THE RIGHT TIME, USER ENGAGEMENT AND RETENTION. THIS SAMPLE IS A PRODUCT EPIC FOR AN INSIGHTS MARKETPLACE SERVICES PLATFORM. HERE WE’RE LOOKING ALSO TO GENERATE DATA NETWORK EFFECTS BY BE-ING CONSTANTLY CONNECTED TO A GRAPH OF 1000S OF BUSI-NESSES ACROSS THE US. THANKS, PHILDEC. 2018

Marketplace 3.0 v1.9Marketplace 3.0 v1.9

32

Important noteAll visuals, design, flows and

text by Phil Mora.

Disclaimer. The document presented here isn’t subject to any non-disclosure agreement, and is already in the public domain for more than 18 months. Confidential material has been redacted. For demo purposes only.

Contact. Phil Mora’s portfolio is constantly updated and can be found at philmora.com/portfolio. For more information, networking and quotes, please contact me at philmora.com/contact or DM me on twitter @philippemora


54

sikkasoft.com1731 Technology Drive San Jose, CA 95110

PREPARED FOR YOU BY PHIL

MARKETPLACE 3.0EPICBROCHURE

FOREWORD

This document contains the EpicBrochure describing the incremental modifications that we are planning to implement on the Sikka Marketplace 3.0 platform. Each part has been designed to be worked on independantly.

Associated stories, designs and palettes will be added to JIRA and Zeplin.

Thank you!-Phil


76

This EpicBrochure is divided in 6 parts: first a quick introduction that explains the rationale for the current upgrade, what we’re going to do and most importantly, what we’re not going to do. Then we’ll look at the technology and architecture requirements for the new marketplace, and we will detail the building blocks of the 3 different views that will be implemented. Lastly, this EpicBrochure will show the final integration with aRt - but this is not included in the scope of this document.

1. INTRODUCTION

The new marketplace consists in streamlining all our web-based platforms into one single experience: sikka’s marketplace + corp. website + aRt.

To do so, we are re-designing the front-end from both a technology and a design standpoint. We’re also adding account management features that are not currently available, simplifying the front end, adding a “Learn” view and later integrating with aRt.

When complete, “shop” + “learn” views will become the “new marketplace” when not logged in, and when logged in, “aRt” view will be the new practice optimizer/PhP.

Marketplace view Marketplace view (menu)


98

Marketplace account management

The account management feature will be a welcome add on our way to enable a shopping cart as well as helping CSO operations: customers will have all their information of record available to them as they work with our teams to fix potential account and product issues.

“Learn” view

The new “Learn” view will consist of cards derived from our existing live dashboards, blog posts as well as the current “featured partners” card set.

aRt views (note: art integration not scoped here)

We plan to add aRt to this marketplace at a later date, it will be made available when clients are logged in and have a connected SPU. At the moment, a seed version of aRt (front-end as well as back-end design and architecture has been implemented, however the insight engine is not done).In addition, we are integrating tightly with SPU notifications and will expand the current system accordingly. (See below)

SPU Integration (not scoped here)


1110

WHAT WE’RE NOT GOING TO DO

The current sikka marketplace consists in a few interconnected systems, customer facing as well as internal: finance portal, partner portal, and main corporate website. We will not change these portals. In addition, the current purchase flow on the marketplace needs work, for example a shopping cart, but won’t be addressed until we have proper account management and identication tech in place.

Finance portal

Partner onboarding portalInterstitial pages

Main corporate site

TECHNOLOGIES USED

The entire front-end will be migrated to react for view and implement the flux architecture, in other words, redux for store - while being statically hosted on AWS.

In other words, the entire framework and architecture used for the existing aRt front-end will be re-used as the foundational building block of the new marketplace.


1312

1. Card design

BUILDING BLOCKS

The entire front-end will be card-based. We have defined inference-cards and sliders for aRt (already implemented and not the scope of this document) but we will show them here as a reminder:

aRt slider

aRt card with CTA

aRt card w/o CTA

We will build all the additional cards described in this section by using the existing react code as a template in order to keep the entire product consistent from a technical standpoint. There are three additional card types that we will build: partner cards, realtime data cards and newscards.

2. Partner Cards

The (new) partner card replaces the existing partner tile - however essentially has the same functionality. The new, and more subtle design places the emphasis on the information being conveyed: the partner’s logo, current number of registrations as well as current service rating.

An important note: the logic behind the calculations for the number of registrations as well as ratings should not be changed.

An important note 2: the call to action associated with the partner card will not change, clicking on it will direct to the interstitial page.

The contents of the partner card (= title, subtitle and logo) are driven from the partner console.


1514

3. InfoCards

The new infoCard is designed to be part of the new “Learn” view. It will display content parked at permalinks such as blog posts or RSS content. Each card will show both a visual and textual preview of the content parked at the referred permalink.

Although not defined here, a marketing console will need to be developed in order to enable the permalinks to be shared to the “Learn” view in the new marketplace. This console will enable permalinks to be shared, scheduled as well as manage user usage data and associated analytics.

InfoCard marketing console


1716

The new Realtime Datacard display time natinal data, in the same manner as the existing website widgets that Sikka has on a few web properties, such as the “National trends: average gross production per visit” or the National Average KPIs.

4. Real-time DataCards

Real-time Datacard marketing console

Although not defined here, a marketing console will need to be developed in order to enable and schedule the real-time datacards to be shown as well user usage data and associated analytics.


1918

5. Navigation topBar and search

The navigation topBar is to become the most important starting point for any client search on the Sikka Marketplace 2.0. To that extent, it is critical that the search function caters to existing acquired behaviors and user’s expectations. In other words, keyword-based search is no longer a valid solution for any marketplace. We need to go as close to natural language search as possible.

The use of natural language

search for the new marketplace

searchbar is mandatory.


2120

6. Sikka Menu

We’re simplifying the menu and navigation tree by keeping the high level categories and eliminating the sub-trees. This will enable us to be much more visible to the search robots online for proper indexation.

Apart from the account management item, all choices point to existing Sikka properties, we’re not going to do any work on them for now.


2322

By adding account management, we are one step closer to a more typical marketplace experience. Always Important for clients to be able to have all their information available in a single panel, whether it is related to payment information, account information or the status of their connection to Sikka. All this information always comes handy during support calls as well.

7. Account management slider

BASE VIEW

Now that we have discussed all the building blocks for the new marketplace platform, it’s time to assemble them into the new product. We strongly suggest to work on implementing the project in the following order:

We’re not going to address (1) here because it’s already done as part of the aRt implementation.

As far as the base view is concerned, the key building block is the natural language search bar as well as the general menu simplification. Also, please notice the base view background gradient. Its implementation is mandatory.


2524

All design elements as well as placement, styleguide, including color palette and text style catalog will be available on Zeplin.

SHOP VIEW

The new SHOP view in the Sikka marketplace is replacing the existing sikkasoftware.com. Please note that we want this to be hosted on AWS as mentioned previously.

Please note that all partner cards (for now) will point to the existing interstitial pages.


2726

The basic principle of the SHOP view is to layer partner cards (2) in a 4x4 grid layout (masonry layout also okay) on top of the BASE view (1) and add parallax scrolling (3) to constitute the entire SHOP panel.

Basic Principle

general menutap to slide

We’re simplifying the menu structure to facilitate content indexing from search engines.

General Menu

The menu is a slider panel, all items point (for now) to existing assets, except “Login” which will drive account management as well as views availability.

Important note: aRt view won’t be

available if not logged. In addition, “Shop” view will be customized to the

client when logged.


2928

Every usage event will be tracked using mixpanel not only at the level of the browser but also all the way to having specific tracking mechanism on a per-card basis.

Special care will be taken in architecting the usage data tracking architecture, mixpanel even super properties and properties as weill as the associated mixpanel tracking console.

Usage data tracking

The new “LEARN” view assembles 3 types of cards (partner cards, infoCards and Real-time dataCards) in three horizontal slider layouts (1), (2) and (3).

LEARN VIEW


3130

This section is preliminary: the marketing console is used to schedule cards in the “LEARN” view based on content permalinks (important: permalinks not URLs) for immedate display or to queue them (see queue tab) as well as to review the usage tracking metrics associated with those cards.

Marketing Console New to this project is the ability for the user to login and consult the information in their account, including the ability to update payment information and download their BAA and other regulatory documents we harvested at sign-up.

ACCOUNT MANAGEMENT

Marketplace general view when logged


3332

Marketplace menu view when logged

Marketplace client account slider view I WOULD LIKE TO HEAR FROM YOU

831-252-2610@philippemora

DECEMBER 2018version 1.9

Marketplace 3.0 v1.9

34

JANUARY 2019version 3.1

card-based ux/ui for data insights delivery · 2019. 3. 9. · jira and zeplin. thank you!-phil....

Documents