The Transformation of the HANA Marketplace - Part Three - Framing the Wires

[Former Member]

And the show goes on...

Welcome to Part Three of my blog series on the redesign of the SAP HANA Marketplace! For those who came in late, Part One was all about building empathy for the people who use the Marketplace (you simply have to meet the vivacious Tina Ross!), and Part Two was about defining a problem statement that we were going to solve (in case you were wondering, there was no all-expenses-paid junket to the marketplace in Marrakesh!). Please do me a favour and read the previous two posts first, so that the premise and context are clearly established.

As you might have already guessed, we followed a design thinking process during this project, and this post talks about the Ideate and Prototype steps that follow the Empathy and Define steps discussed previously.

The wisdom behind wireframes

There is a reassuring correctness about creating wireframes enroute the design thinking journey. Metaphorically, they form a bridge between design concepts (we discussed these in Part Two) and design deliverables. Wireframes have several benefits; they save time and effort, enable quicker iterations, and retain focus on what matters. By making use of wireframe stencils, designers can quickly put together a low-fidelity visual representation of a site's layout and navigational schema, and also detail out the content strategy (content and copy are often ignored by designers who use wireframes purely for layout design, but are critical ingredients of a wireframe as far as I am concerned - you'll see why as you read on). Like personas (another important milestone in the design thinking journey), wireframes help in building consensus between stakeholders. Although not all stakeholders can immediately appreciate the their value ("Why is everything in grey?", "This looks really boxy!"), it is up to designers to clearly outline their purpose.

Although wireframes and visual design mock-ups share some common challenges, such as optimising whitespace or typographic hierarchy, wireframes are not about colours, branding, visual treatments and effects, or any kind of "chrome" in general. These are what clients typically like to see, and are important too, but only once the structure and content of the site have been finalised. Using a high-fidelity mockup to address these is a big ask of stakeholders, as they need to cut through visual "clothing and skin" to focus on the "skeleton" of the design, not to mention the effort invested by designers in creating or altering them. I have been guilty of skipping wireframes entirely in the past, due to crazy deadlines and intense business pressures. I had deviously found a way to quickly deliver and iterate in high-fidelity mode by creating libraries of reusable UI elements. However, design discussions would inevitably veer towards visual design, and only constant course correction would ensure that layout and copy were also being addressed.

Without any further ado, let’s frame the wires.

a. Home

The first wireframe we are going to discuss is of the Home page. A major site’s Home page usually accounts for more than 50% of all visits. We wanted our new Home page to marry form and function in order to attractively and unambiguously communicate what the Marketplace offered to first-time visitors, while also guiding returning visitors to quickly find their way about and delve deeper into the site.

Specifically, here are some of the salient features of the new design. The wireframe follows.

1. Global Context - Specialised experiences for buyers and sellers that they can effortlessly switch between. The Community is one-click away, and so is Help and a way to change country and language. Logged-in users see their name and company title, new users see a default welcome message.

2. Header - Branding area on the left, search box off-center with Notification, Account, Wishlist, and Cart icons to its right. Search allows filtering for product categories, and has auto-complete too. A compact avatar of the header docks to the top of the screen on scrolling.

3. Information Architecture - All-new taxonomy that provides multiple gateways to browse products while also enhancing SEO.

4. Promotions - These present complete end-to-end solutions, typically comprising an application, services, training, and support, and set the context for what the marketplace offers.

5. Product Showcase - The product showcase displays popular, new arrivals, and offers for first-time visitors. The product matrix cycles through these different sets, with each product tile flipping over randomly. The showcase also comprises a section for content form the community. These could be featured articles, blog posts, webinars, leading experts and thought-leaders, or discussions.

6. Live Feed - A Marketplace is typically abuzz with activity. The live feed gives users a vantage point from where they can observe what is taking place in the Marketplace in real-time, be it purchases or new additions to the catalogue, or even blog posts, events, and any relevant activity on social media (Twitter, LinkedIn, etc.).

7. Success Stories - Customer testimonials about specific solutions or about the Marketplace itself, help in building customers’ trust. Success stories can be short videos that can be streamed on demand, accompanied by a quote.

8. Featured Vendors - This section could highlight some of the other vendors that sell products / services on the Marketplace. Vendors could pay to have their name featured here.

9. Footer - Comprising contact and security information, social buttons, and a newsletter sign-up field, the footer also includes an infographic for marketing the Marketplace - for example, displaying the number of apps and solutions being sold. The footer also has a “Live Chat” widget that remains collapsed initially.

Note: SCN is rendering the wireframe images to fit within some preset size constraints. Please right-click on the image and view it in a new browser tab. Once the new tab has opened, on some browsers you might need to click one more time to zoom in.

Wireframe of the redesigned Home page. Right-click and choose "Open Link in New Tab" to view actual size.

b. Product List

One doesn't need to be Sherlock Holmes to deduce that almost all e-commerce sites follow a very similar paradigm - there is a Home page from where visitors navigate (most typically) to a Product List page which is steadfastly true to its name. They then click on any product to bring up another page called the Product Details page, which also includes a call-to-action to go ahead and buy the product, apart from other things like variant/size selection, pricing information, and so on. Beyond this, there is the checkout flow (of which there are several interesting implementations, from a single-page checkout interface which is often perceived (it's illusory - the user has to fill the same number of fields!) to be shorter and hence faster, to wizard-based checkout flows, which guide users towards ultimate order confirmation, one logical step at a time.

Before we look at the wireframe of the Product List page, some salient features that you are going to see are:

1. Social Proof - A set of messages that talk about how many other people are looking at - or have shopped - similar products.

2. Filter / Sort / View Options - these enable users to refine the set of displayed products. Selected filters are clearly indicated. On scrolling, the filters dock to the top of the screen.

3. Featured Products - These appear in the first row of the product list and have a different treatment from the products that follow. These could be new arrivals, bundles, or offers.

4. Community Content - Contextual content from the community is randomly interspersed - these could be blog posts, events, webinars, discussions, etc.

5. Summary On-hover - On-hover, a short summary about the product is shown in-place, along with a way to instantly add this to the user’s Favourites, or get a “Quick Look” of the product in an overlay.

6. Infinite Scroll - Products keep loading as the user scrolls down the page.

7. Live Chat - This detects the context and offers to initiate a conversation witha Sales Executive

The Product List page. Right-click and choose "Open Link in New Tab" to view actual size.

c. Product Details

The Product Details page is where a user's intent to buy is the strongest, and the prominent "Buy" buttons you see as a best practice on several e-commerce product pages is a call-to-action that homes in on that. Our user interviews and understanding of Tina Ross's needs had established that she needs comprehensive information about products that she is considering. She would like a way to evaluate them before she influences a purchase decision in her organisation (B2B software orders can be worth millions of dollars, and hence this due diligence by Tina), and she trusts the word of domain and subject-matter experts more than product reviews by other users. If Tina were to choose a product that she believes her company should purchase, she would need to collaborate with her colleagues to effect the deal (this is called the "Purchasing Gap"). Our redesign factored all of this in, and more.

Here are some of the notable features of the new Product Details page. The wireframe follows.

1. Product Videos / Screenshots - A compelling (hero) video with a clear message, followed by a slideshow of high-quality screenshots with annotations.

2. Docking Action Pane - Mentioning the overall ratings and price, this offers all the actions possible on the product page, with a prominent “Add to cart” button. The action pane docks to the top and follows the user on scrolling.

3. Description & Details - Optimised for quick scanning, the description carries a headline, key highlights, and a paragraph of verbose description. The details carry the meta-data about the product.

4. Packages - These recommend the services, training, and support options that would complement the product. Users can ask for a quote if prices are confidential and proprietary.

5. Community - This aggregates all the relevant content from the Community about the product. These could be discussions and blog-posts, or even experts and events.

The Product Details page. Right-click and choose "Open Link in New Tab" to view actual size.

d. Personalisation

In Part Two, we enlisted personalisation as a key game-changer for the Marketplace. The idea was to create a humane interface that observes what customers like Tina browse, and is able to recall her past purchases to make informed suggestions for additional products. Not only does the interface remember Tina, it also remembers that she works with ACME Inc, and is able to make recommendations that are useful to her in the context of her current role and employer, upping their relevance significantly.

While personalisation could manifest itself in e-commerce in several ways, we dreamt up the following for starters:

1. Product showcase - The product showcase displays popular and new arrivals for first-time visitors but recommends specific products and community content for returning users. The recommendations would be based on browsing/ordering history, as well as any interests users might add to their profile.

2. Recommendations - Hovering on a recommended product brings up a caption explaining why that product is useful for the user. These recommendations could even be made by SAP Account Executives for specific users / companies.

3. Personalisation Panel - Strategically positioned right below the Home page banner, this welcomes and remembers returning users to the Marketplace, presenting a summary of their account profile, orders and trials, trainings, collaborations, and notifications. The summary has two states - it is initially collapsed and can be expanded to present another level of detail.

Note: Remember how we talked about there being a plethora of orange juice vendors at the Marrakesh marketplace? Orange juice is abundantly available there, and we drew an analogy between that and training products on the SAP Marketplace. Training would be abundantly available across the Marketplace, and would be made relevant by detecting the user's context. Training earns SAP (and partners) revenue, and also empowers users of SAP solutions to get more out of their software.

The Personalisation Panel. Right-click and choose "Open Link in New Tab" to view actual size.

e. Collaboration

Collaboration is another game-changer we talked about previously, included because of the nature of B2B transactions in the enterprise. Multiple stakeholders are involved in effecting a buying decision, and it would be ideal for the Marketplace to facilitate a discussion between them. We know that email is here to stay (even on mobile) in the enterprise, so we thought of a collaboration system that piggy-backed on email.

Our collaboration flow broadly follows the steps below, and the same are marked in the wireframe that follows.

1. Make a Decision - Enable users to collaboratively decide whether they want to buy a product by letting them seamlessly discuss and build consensus from within the Marketplace.

2. Invite Participants and Experts - The initiator can invite participants, who can then go on to invite more participants. Experts can also be invited to be a part of the collaboration.

3. Discussion Thread - comments made by participants are captured as a part of the collaboration activity

4. Add Attachments - participants can upload files that they want to share with the others.

5. Build Consensus - participants can vote to indicate their approval / disapproval. If the overall consensus is positive, users automatically have an opportunity to buy the product when they end the activity.

6. Concluding Collaboration - participants can end the collaboration when they’ve arrived at a decision. This archives the activity.

The Collaborate & Buy overlay atop the Product Details page. Right-click and choose "Open Link in New Tab" to view actual size.

f. Information Architecture

Disclaimer: we didn't do any card sorting to define the IA, but we really want to, going ahead. One of the reasons was that the gamut of the product catalogue on the Marketplace was still being deliberated upon. We wanted the Marketplace to be a one-stop SAP shop, but operationally, that was going to be a Herculean task. We stopped at laying down a high-level proposal of the catalogue taxonomy, using navigation schema on www.sap.com as a reference, and also introduced a cascading mega-navigation (or "meganav", if you will) menu - these have become e-commerce best practices, and even gurus like Jacob Nielsen have endorsed them.

The Meganav. Right-click and choose "Open Link in New Tab" to view actual size.

Phew!

That was a long post, and I hope you found it useful. There are many, many, more wireframes, but then this post will never end. Do let me know if you'd like to take a look at our design proposal for the checkout flow, or the account management sections of the Marketplace.

I look forward to your feedback, comments, and complaints even. Coming up in Part Four - Painting the Future - some mouth-watering visual design by Feifei Wang, and a comprehensive how-to guide on getting the (blessed!) plotter to work in Building 8 of SAP Labs' Palo Alto campus.