Portfolio > Web, Mobile UX/UI > GraphGrid Developer's Site

GraphGrid Developer's Site

Creating an online resource for an enterprise level Platform-as-a-Service

Portfolio > Web, Mobile UX/UI > GraphGrid Developer's Site

GraphGrid Developer's Site

Online resource for an enterprise Platform-as-a-Service

Site Structure

UX Process

UI Design

The Overview

GraphGrid is an internet-scale graph data platform architected, developed, and built to enable organizations to adopt a modern graph data architecture.

Project Details

Client: AtomRain

Role: Lead Designer

Duration: 1 week


Responsibilities
  • Wireframing
  • Visual System
  • High Fidelity Mockups
Tools Used
  • Omnigraffle
  • Adobe Photoshop
  • Adobe Illustrator
The Challenge

The web-based developer's resources documentation section must operate within a single browser screen.

There had never been an online presence, so there was no established framework for a site. The audience is comprised of developers, engineers, data scientists and business intelligence analysts looking for resources to help them develop data visualization tools and adminstrate large data lakes.

The overall design was to function within the confines of a single browser window on a desktop/laptop device.

A fixed header, footer, and left side navigation would frame the overall experience.

The first level navigation categories of the left sidebar menu would navigate between pages of content, while secondary levels would scroll the page to predefined anchor points.

Links within the content pages would initiate content next to (right of) the scroll.

The Outcome

The design and development goals were as follows:

  • Homepage doubles as marketing piece and Call-to-Action to begin online service
  • GraphGrid branding color scheme
  • Three-column layout
  • Functions similar to API documentation resources
  • Clear visual queues to show hierachy in the side menu
Competitive Analysis / Inspiration

From researching various API Resources documentation layouts, there were several things that stood out to be emulated... and skipped:

  • Forcibly blocking out the content columns disconnects concepts
  • Indicators for sublevel navigation are an unnecessary visual queue, as the user will immediately know there are subcategories by clicking one time into a subject
  • Indenting sublevel navigation is a strong visual queue
  • Code snippets and other supporting concepts should be emphasized

Color Swatches

Primary and Accent Colors, Backgrounds
HEX: #00255c
RGB: 0,37,92

Header, Footer

HEX: #005287
RGB: 0,82,135

Resources, First Level Highlight

HEX: #4478b1
RGB: 68,120,177

Homepage: Concluding Statement Background
Resources: Side Navigation Background

HEX: #e4eff5
RGB: 228,239,245

Open Text Background
Resources: Terms Background

HEX: #6dc6ec
RGB: 109,198,236

Homepage graphics

HEX: #f1eb9d
RGB: 241,235,157

Resources: Example Header, Note Top Border

HEX: #fcfbe9
RGB: 252,251,233

Resources: Example Header, Note Top Border

Text Colors, Links, Borders, Buttons, Separators
HEX: #333333
RGB: 51,51,51

Headings

HEX: #666666
RGB: 102,102,102

Body Text: Homepage, Resources

HEX: #ffffff
RGB: 255,255,255

Navigational Links
Resources: First Level links
Homepage: Main title, Subheading, Final Text Statement
Page
Body

HEX: #ef5a28
RGB: 239,90,40

Buttons, CTAs

HEX: #409abe
RGB: 64,154,190

Homepage and Secondary Level links

HEX: #0000ff
RGB: 0,0,255

Resources: Body Content Links

Typography

Roboto (Google font)

Regular 400

Bold 700

font-family: 'Roboto', sans-serif;

H1 heading

H3 heading

H5 heading

Bold, Italic

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Roboto Condensed(Google font)

Regular 400

Bold 700

font-family: 'Roboto Condensed', sans-serif;

H1 heading

H3 heading

H5 heading

Bold, Italic

This is a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

The Solution (Wireframes to High-Fidelity Layouts)

Wireframe — Final

Conclusion / Reflection

Still in Development

The design concepts were handed off to the development team, and they are still in process. Prototyping might reveal shortcomings of visual queues of the overall design, however functionality is well-established and should perform as it should.

I look forward to seeing the completed project and having a chance to perform usability testing and make any recommendations for needed refinements.