GitHub Enterprise reUX

Aug.28.2019 | 13m Read | ^UX

Aug.28.2019 redesign of GitHub's Enterprise UX landing page and branching content. It also features brand management and marketing strategy to convert existing GitHub users to Enterprise, maximizing CPM, pageflow, and content.

PART 1: usability and presentation issues.

PART 2: UI updates, focus, and strategy.

This redesign (or reUX) doesn't include Enterprise content itself since it is hidden behind a paywall requiring a credit card to access. That's also beyond the scope and can be patterned after design approval and established strategy.

The purpose of this section is to identify gaps and bottlenecks during a user persona run-through.

PART 1, Usability:

GitHub's landing page UX study.

This is the start of the Landing Page and what roughly falls onto the screen and into frame. Key takeaway here is a distinct lack of strategy communicated to the customer via fluff padding and a hand-off to sales pre-close.

NOTE: Even if contacting sales is absolutely required, studies have shown customers, and especially web users, are shying more and more away from this approach since it has a history of pushiness, uncertainty and wasting resources/time.

Ideally the sales contact should be dropped with this sensitivity in mind, framed as a material luxury craft, ie, 'We love customizing architecture, let us customize yours' or just simply 'Let us customize your architecture'.

Details Issues:

GitHub's landing page info-dumps and jargon pasta.

At this point in the page scroll, the customer has basically checked-out. They are either going to burn through as they scroll passed these paras or they are closing out the window and navigating away. It's not hard to see why. This is very info dumpy and jargon pasta-like, but without the specificity to capture client needs.

What we need is:

  • ☑⁡⁡ Demo of concrete features/tools (ideally video + live app/PaaS preview).
  • ☑⁡⁡ Testimonials of profit and productivity (also ideally video).
  • ☑⁡⁡ THEN a Close with a sales contact/credit card request.

It's a roughly linear process and it works (more on this in Part 2 below).

Testimonial Issues:

Enterprise testimonials broken down.

For the sake of brevity I skipped over some more paras of vague features and some small biz portraits off iffy quality. Presentation and quality in marketing materials matters. There was also some floating circles with tool logos on them -- which is nice -- but there are much better ways to present these tools and ideally, much sooner.

The customer should have these testimonials at his fingertips shortly after they are weighing features. Stats show that most fans won't finish the novels they purchase -- newspaper and magazine sales have collapsed -- what secret have you unearthed from Atlantis that's going to enrapture them?

Now Twitter-length bLog posts have their place, but this is sales. Software sales, the 'future of enterprise innovation'. Design and UX should be leveraged to the hilt (and they are in Part 2 below).

Article Issues:

MGM Enterprise testimonial article broken down.

Yawns are contagious and so is disinterest.


If you bore someone about your flight and nap, expect a boring response. Sales are impulse-based. Impulse meaning action, emotion, movement -- change. Impulse charged by words.

And words themselves are magic, mentally transporting experiences across time and space. Each syllable has the ability to hinder as a stone or raise-up as a step. Let's rewrite this opening as if a billion dollar company's Enterprise sales depended upon it. That means it's going to be something both furious and fun. It has to be.

Excerpt rewrite:

=================

The lion stalks you. Even in the night you feel its eyes -- driving you to seek shelter. The shelter of a glass palace. This is Vegas baby and that lion is massive and made of gold. Welcome to MGM Resorts International where you are the VIP, cutting through crowds, and using the latest in mobile tech to check-in and unlock your suite. They've been Fortune 500 for the last 18 years -- and now with GitHub Enterprise -- they are forging hundreds of guests's fortunes.

Is 'baby' sexist now even though it's relevant Elvis-speak and still in every song, film, and entertainment medium? If so we just swap and thesaurus through, ie, bandito, roughneck, roughrider, etc.

▼ This structure communicates:

  • ☑⁡⁡ A hook (mystery lion stalking you, danger).
  • ☑⁡⁡ Brand value (glass palace / massive, gold lion).
  • ☑⁡⁡ Customer value (you are the VIP / guests's fortunes).
  • ☑⁡⁡ GitHub Enterprise is a part of all this value.

A little memorable word-play also goes a long way and is great to end on.

PART 2, Market Strategy:

New GitHub Enterprise logo and branding.

▼ GitHub, get hugged.


GitHub's vision/mission statement is: "We’re supporting a community where more than 40 million* people learn, share, and work together to build software."

In line with that, every brand could use a tagline to punctuate their persona-grabbing stories and fulfills their vision, here are a few below.

Persona Story I (Worker bee, student):

=================

"3." An eye opens and focuses to a distant muffled voice. "2." The voice is closer and clearer -- as the owner of the eye is revealed to the top half of their face, tensely rubbing their temples and bathed in the blues of a monitor. "1." The voice is crisp and pointed as the view pans across a desk filled room of 50 similar such people. All eagerly hunched over their displays.

"We have touchdown."

And the room erupts. Raised arms and applause. Smiles spreading across as those above on deck press together in cheer and triumph.

Behind them, the rusted dunes of Mars passes beneath a rover, wall-to-wall on screen.

GitHub, get hugged.

Persona Story II (Solo-user/Early phase start-up):

=================

The door creaks open. Our view low to the ground. And creeping. Creeping towards a woman alone -- alone and unsuspecting at her desk -- typing away.

A small, tentacle-like hand reaches up from the shadows.

"Honey just a sec and let mommy push this so we can 'git' paid." The woman looks down from over her shoulder. There stands a child of 4 or 5 costumed as GitHub's Octocat and carrying an Octocat doll. The woman turns back and on screen is GitHub Desktop.

SUCCESS.

She pulls the child up onto her lap and teasingly plays with his tentacles while tickling him.

GitHub, get hugged.

Persona Story III (Executive, biz-class):

=================

A black Bentley snakes the misty streets. The brakes then squeak as it groans to a stop. Out steps a suited man -- executive attire with Rolex. The door shuts swift and hard and the driver slinks away. He's left a lone figure, the airport near-vacant this time of night -- his shoes clacking the pave as he walks.

The man looks to the right. And then to the left. Anxious. Anxiously pressing phone to face.

"They're really after me." He loosens his tie, swallowing hard. "Things are falling apart..."

"I'm out of options."

"No problem. Everything should be up on our servers and ready to-go later tonight. Enjoy your vacation." A GitHub rep responds, the flicker of server rack vignetting them.

Relieved, the man steps into the warm glows of the interior. There his wife and child -- decked-out in tropical-tourist attire and standing next to luggage -- embrace him.

GitHub, get hugged.

▼ Tagline & stories satisfy key user needs:

  • ☑⁡⁡ Imposter Syndrome.
  • ☑⁡⁡ Community building.
  • ☑⁡⁡ Tech support.
  • ☑⁡⁡ Workplace survival & success.

Now that we've recapped to better understand and communicate the mission statement, it's time to tackle GitHub Enterprise's branding and tagline.

PaaS Branding:

New GitHub Enterprise logo and branding.

▼ Enterprise = GitHub+

With Enterprise we want as many warm potential customers for marketing vs cold. To do that we need to market GitHub Enterprise to 40 million GitHub users, but without being invasive or annoying them (cooling towards brand).

▼ Why market to GitHub users?

  • ☑⁡⁡ Fans of the GitHub brand (warm customers).
  • ☑⁡⁡ They can be educated to inform (warm-up) management and generate leads.
  • ☑⁡⁡ Scaling tier'd features for small teams or individuals.
  • ☑⁡⁡ Community building (a necessity for viral marketing, sharing, and adoption).
  • ☑⁡⁡ Data, analytics, and feedback (the new oil) for tuning features and price.

Data in particular is paramount to feed all of the Machine Learning tools and services as we transfer from social media and collaboration into the era of automation. You will not be able to maintain or develop a competitive edge in the future if you are not constantly compiling and labeling mountains of data to sculpt and sift through. Relevant use cases include: preconfiguring and deploying DevOps architectures, tighter product fits, user-profiled marketing and sales, tool niche identification, and marketplace gap closure.

Okay, so how do we overcome the obstacles of annoying users?

Enterprise = GitHub+.

Or more specifically, organization and encapsulation. Enterprise is like GitHub, but includes commercial and team-oriented tooling, as well as informative lead magnets, ie, business bLog, articles, and social media commentary like LinkedIn (I did a UX study on LinkedIn news, making LinkedIn more like LinkedIn than it was). Ideally this would also include the Marketplace.

Most importantly, it will all be tucked away neatly under one Enterprise icon next to the GitHub icon (which can also feature alerts/notifications [ie, credits]). Users will be able customize their GitHub homepage to classic or Enterprise (when logged in).

In summary, we want to position Enterprise in the market as...

▼ Enterprise positioning:

  • ☑⁡⁡ For: teams, enterprises, and the business-minded.
  • ☑⁡⁡ Who: who are interested in business or software development.
  • ☑⁡⁡ To: provide one-stop DevOps with hosting, unified via an exceptional UX, and to educate others on the impact of tech (DevOps+) in business, as well as overall success (financial, happiness, fun).
  • ☑⁡⁡ Unlike: juggling resources in a bogged-down infrastructure, using confusing or cluttered toolchains -- diminishing ROI while neglecting your KPIs -- and getting foggy expectations with uncertain results.
  • ☑⁡⁡ GitHub Enterprise is a scalable, Enterprise growing ecosystem or PaaS.

Now with all of this in mind we can design the logo.

▼ Enterprise logo requirements:

  • ☑⁡⁡ Like GitHub, but '+' or more (3Dish Octocat head = 'newer graphics/next gen').
  • ☑⁡⁡ 'Enterprise'-like, tech that needs infrastructure support (rocket).
  • ☑⁡⁡ Looks good as a 32x32 px icon.
  • ☑⁡⁡ Fun, exciting, growth (smiling, rocket launching, eyes/head upward).

For a first pass, I think we succeeded with the Enterprise logo. Sadly, all rocket icons tend to read as some sort of pen or brush at a small size. To get around this, the icon features an easily readable wrench instead (wrench = tools).

▼ Enterprise tagline


Naturally for a tagline we want something that communicates the excitement and support of launching a rocket. It also has to be easily adapted to buttons, headers, components, and featured in business speak.

You might have a business already -- or play a role on a budding team. But with GitHub Enterprise you become part of a support staff and infrastructure, much like NASA or SpaceX, to take wherever you are now, strap on an Enterprise-class rocket, and launch yourself further than ever before.

Launch your Enterprise.

Now that we have defined and designed Enterprise's positioning, brand, and tagline (Launch your Enterprise) we are ready to begin redesigning a landing page to warm-up and convert customers.

Landing Page:

GitHub Enterprise landing page redesigned to be much more compact.

▼ Focus is a Funnel.


We need a landing page purpose, this purpose is our signal or call out into the wilds.

Purpose: to launch [your] Enterprise (by integrating with our PaaS ecosystem). Ideally we will have some freebie/scalable features that are light on storage/cost and more front end oriented, ie, a Kanban board/scheduling system, that allows us to actively engage users and hook-in to gather further analytics.

Eliminate waste: We need to amplify and direct towards our purpose by eliminating what's not needed, limiting the cognitive load and stress level. In Lean or Agile this is waste, in marketing or communication this is noise. Noise confuses and cancels-out our signal (or purpose) to users.

Maximize entry points / Minimize exit points: Typically this deals with links. We obviously don't want to trick the user or make them feel railroaded so we customize the launch page (after passing the landing page) with #anchor configurations as needed. Once the user has launched Enterprise or 'activated' it with their logged-in GitHub account, they will instead be greeted with a customizable homepage of bLog articles and begin trying/integrating with various PaaS features.

Singularity: Single Page Applications or SPAs are great, but what about No-Scroll Applications? Scrolling psychologically triggers disengagement and search-anxiety from decades of training. We want to serve-up a platter instead of a rat maze.

Dark theme: Once I knew there was going to be video as the centerpiece, I went with a dark theme. Video and entertainment media is much more vibrant on a darker background, and we humans also have the cultural experience of the theatre. Software developers and professional tool users generally prefer gray-based dark themes as well.

Reliable UX patterns & Design: ie, the video play button is based off of Youtube, which has trained billions of what to expect. The carousel works like a simplified Netflix and Amazon Prime Video slider which has trained many millions of others. Utilize a unidirectional data flow from top-to-bottom and left-to-right, this enhances communication and navigation with reliable content-flow learned from decades of reading.

NOTE: 'FREE' is never really 'FREE'. Human psychology understands that there is something often lurking beneath the 'FREE' exchange. When the customer is left to wonder and create what 'FREE' means you lose both focus and control of the story and sales conversation. We need only tell them something is 'FREE' at the very moment we require a credit card, otherwise it can act as a 'Buyer Beware' sign.

Gallery:

Amazon Prime Video Prime Times drop-down & search.

▼ Robust UX


Video/Motion Graphics: In an ideal world we have tight and tuned promo videos for all of the testimonial content. A lot of these can be generated from photos and the articles using motion graphics and narration (After Effects/Cinema 4D + Resolve/Fusion pipeline). However, due to the time and cost generating media or technical/bandwidth concerns we can replicate a motion graphics and video feel using panning and zooming images and a gallery carousel type component.

This makes the first priority is the carousel component, followed by a GitHub Enterprise features video (both can be worked in parallel assuming enough team members).

Gallery: I could program or design it myself in React using React-Spring or another Javascript animation API and it is fairly simple to port elsewhere or to mobile (see the tinted image at the top of the screen for zoom-panning images). NOTE: this component swaps the current displayed image with the gallery thumbnail on click (thus you do not have a thumbnail displayed for the current active image).

Triangles: The triangle edges, play button, and minimal footer can be either SVG aligned with divs or CSS styled divs entirely. See the theming button on the top-right of this page's headroom for an example of CSS based tris (with and without rounded edges).

Alternate Themes: Similarly I can also create and design a theme system for GitHub Enterprise and it's landing pages as I did for the page you are reading this on. It's fast and lightweight, uses local storage, and only needs 3 optimized HSL strings for color transformations (generates 9 light and dark themes for 18 total). We can also take this further and easily add some HSL sliders for maximized customization (on my to-do list).

Data Hydration: can be addressed with GraphQL in the place of REST since the queries use precise start and end points. This breaks-up payloads, but also allows more queries, thus your data can be much more 'wet' or updated. Prisma is a great GraphQL API for delivering an ORM-like interface and proxy bindings for various databases. The default schema also has CRUD, so it's ready to use out of the box. This portolio site is in fact using GraphQL with Prisma.

Like this post? Read more from the ^UX topic.


       : NEWS