CLOUD SOFTWARE PROVISIONING SITE

Creating a one-stop shop for cloud hosting software teams' needs

The first major project for my team within General Electric was to create a website that allowed individuals to request the creation of Amazon Web Services accounts and Microsoft Azure subscriptions and allow administrative teams to review such requests. As the new, solo User Experience (UX) specialist, I led the design team toward implementations and practices centered around UX design. Our stakeholders consisted of approvers of the orders done through our site, development teams of our products and services, and teams from business units who place and manage orders. You can view the prototype deliverable here. (Email me for the password if one is required.)

View Deliverable

The problem:
How do we host a variety of user needs, including education and operation of cloud hosting accounts, while maintaining a consistent user experience?

My Role:

UI/UX Designer
Testing Coordinator

The Team:

UX Designer
Front End Engineers
Product Manager

Tools Used:

Sketch
Axure
Figma

My Contributions:

Design of UI and UX
Prototyping/Wireframing
Usability Testing

The Process:

Empathize

Feedback gathering from Product Manager
Identify main personas

Specify

Prioritize features and workflows
Focus on specific personas for each workflow

Ideate

Sketches
Low-fidelity mockups
Workflow maps

Bring to Life

Sketch mockups
Axure wireframes
Figma prototype
Direct work with front-end engineers

Verify

Usability Testing
Additional feedback gathering
Interviews with user teams

Outcomes:

Fewer support requests. indicating less confusion among users
- Our dev team received fewer emails after the newest iterations asking how to perform actions
Quicker turnaround time for software requests
Reduced workload for approvers
- Performing approvals en-masse allowed quicker turnaround

OUR USERS

Our user base was relatively small, consisting of about a few hundred people during the peak of this site’s usage. Due to these small numbers, demographics were not something we took into account with persona generation. Instead, we primarily focused on their goals with our site and roles within the company.

Account Owner

Owns a GE cloud hosting account hosted by AWS or Azure

Works for a GE business

Orders a product through our website

Utilizes our documentation site for education about products

Relays feedback through a team manager

Product Developer

More experienced in a cloud environment than an Account Owner

Involved in the development of one of our offered products

Builds accounts for users

Often receives feedback from product users

Relays to us what features the users would need to have displayed

Responsible for generating ordered accounts via AWS or Azure

Communicates with would-be account owners about needs

Order Approver

Acts as the middleman between the owner and developer

Makes sure all items on products’ order forms are valid

Approves or rejects the order for building

Works with large amounts of information

Strong need for organized info and ability to perform tasks quickly or en masse

Also ommunicates with would-be account owners if things go wrong

EARLY ITERATIONS

Based on the Project Manager's feedback before my being hired, the team determined that our site should teach users about our offered cloud-based products.

My tasks in this first version were the following:

Figure out a way to organize our product information
Display how to obtain the information in workflow diagrams
Portray the designs of the pages on mockup pages

For these product workflows, I mainly prioritized familiarity and comfort for our users.

Utilizing the Amazon Web Services Console as inspiration for product info flows
Grouping similar products together (such as similarly named ones)
Showing differences in features between products via tables
Including active-tab systems for product information

An example of an early mockup of our site I created in Balsamiq, more focused on onboarding with layouts in a brochure-like format

Early iterations came with the team wanting to prioritize expediency, causing major UX roadblocks:

The inability for me to perform exploratory research

"Quick hits" being prioritized in design over consistency and reaching user goals

Low fidelity in prototypes, utilizing Sketch (and even Balsamiq) without utilizing InVision in tandem.

Developers treating designs as suggestions rather than rules

This led to several issues with early versions of the site:

Lack of consistency in atomic elements of designs, such as colors and font sizes

Navigational elements such as navigation bars functioning improperly

Lack of points of reference for such design elements

Unnecessary whitespace

An example of a flowchart involving management of orders and existing applications within a larger product.

Thankfully, these issues became apparent upon my interviewing some of the users within our office and convincing my manager to collect more feedback, leading to greater changes.

SIMPLIFYING STYLE FOR A MORE SOPHISTICATED SITE

As the site grew in complexity, so did the variety of our stakeholders. This resulted from our products widening from hosting accounts to additional services and add-on products.

After some interviews with the teams involved with the development of our cloud hosting products, as well as the products' users, we learned we needed to address more user goals:

Reading and organizing documentation
Ordering products
Managing existing orders
Managing owned products
Approving orders of products

An example of a later mockup made via Sketch utilizing our simpler design scheme.

Users also had additional feedback about the site's style and overall experience:

Too much whitespace existed on the pages, often needlessly taken up by photos.

Pages felt more like a brochure than a business.

Sifting through pages was complicated, leading to difficulty finding what they needed.

Our response was to overhaul the website's style:

Remove any photographs and backdrops from the site

implement less variation of color

reduce whitespace

simplify table layouts

Go "less brochure, more business" in our approach to our design theme

Most importantly, the shift in priorities meant two significant growths in an otherwise UX-immature software development team: design system creation and exploratory user research.

COLLABORATION AND COMMUNICATION

While style guides were being built and prototypes were becoming more cohesive and consistent, the overall implementation was not. I ultimately decided to reach out to my team and learned that translating designed elements to CSS was still falling short.

We ultimately came to two solutions:

Switching the design tool to Axure RP
Having a dedicated design system that could be inspected on a web page for CSS attributes

The higher fidelity of Axure RP brought numerous advantages:

Adaptive and interactive style guides could show how items would react to being clicked on and moused over.

Interactive, web-accurate prototype pages should show how pages would function.

Prototypes could now serve as platforms for usability testing and illustration of design focus to stakeholders and customer teams.

These advantages would only improve still when our team would later make the transition from Axure to Figma.

An example of an interactable prototype form made in Axure

Ultimately, this still-evolving project would prove to be a springboard for facilitated interaction between UX designers, front-end engineers, and customers of our cloud-hosting site, and the process of creation and iteration would prove to be the basis of our UX process:

Exploratory interviewing and feedback gathering
Highlighting of needs and ideation
Rough prototyping
Interview with involved personas and stakeholders to ensure accuracy in direction
Fine-tuning of prototyping
Implementation
UX sign-off