Click2Cloud

CLICK2CLOUD

C2C logo.png
 

I worked as a UX/CX design intern for Click2Cloud, a B2B cloud migration, automation, and services company based in Bellevue, Washington. Click2Cloud designs and builds several plugins to automate cloud migration for Visual Studio in addition to BI services for medium to large size cloud providers like Azure, Huawei, and AliBaba.

During the summer, I handled multiple projects for the company. On the way, I relished in the challenges of remote work with the India team, and in advocated for user centered design in a company that has until recently been solely a 'technical' company with no design thinking embedded in its DNA. 

I designed interactive state models for their products, CX journey maps for their services, and completed a redesign of the download page of their website. I'm sharing the latter process here. The end product will be part of a larger redesign of the Click2Cloud website. 

 
 
AFTER.png
 

No metrics, no competition: Defining the problem

To get a hold of what the company actually desired, I interviewed the business development manager and a few other members of the compaby. Using the "dig wider" and "dig deeper" method, I gained the following salient facts: 

  • The company is in the growing cloud services space, with only a few indirect competitors like Stratozone, Hyperform, Eclipse, and Barracuda 
  • People coming in to the download website already know what to look for
  • There’s no way to collect information of the people interested, only a generic "Contact Us" page
  • The layout is unpleasant and unreadable
  • There aren't any existing metrics of usage because of the limitations of the backend on which the website was set up

The final point proved especially challenging because the company is in a new business, so I had very few direct competitors to draw from. 

Insight

  • An easily accessible demo request form needs to be created
  • The form needs to be prioritized over the 30-day free trial
  • The website needs to be more readable and the amount of information given needs to be limited to encourage information giving
  • The tangential competitors provide some clue to the web design, but Click2Cloud's unique requirements needed to be prioritized

Low Fidelity Prototype

The low fidelity prototypes were created to test different possible layouts and menu selections. Early versions on paper mimicked the layout of Stratozone with a form embedded into the product page. However, the Stratozone website had the form tucked away at the bottom left corner of the page. To remedy this, the form was moved up into a separate block overlay and users were encouraged with a big red button to click on the form. 
Later versions (including Balsamiq mockups) moved more towards the large buttons/large text layout of Hyperform. The "Request Demo" button was emphasized. 

 

Click to enable lightbox

Business Needs: Choices of Color and Typography

Color Palette & Typography.png
 
Typography insight.png

I selected the Roboto family of fonts because of its natural reading rhythm. This "neo-grotesque" family is relatively modern and without much embellishment, which fits the needs of a B2B company like Click2Cloud. For headings I chose Roboto Slab, to give a businesslike sense of stability needed to inspire confidence in a growing company.

The primary blue is simply the blue from the Click2Cloud logo. However, the I also stuck with blue as a secondary color and paired it with black for the header and footer. Historically, blue is the color of trust and security, associated with corporates. Black projects solidity and authority. Competitors have paired black with red, and blue with grey, both good choices. However as a smaller competitor, Click2Cloud's more 'secure' blue and black differentiates it from its competitors and provides greater psychological authority.

Red is chosen to provide a dash of urgency taking into account the business needs of Click2Cloud. The priority is to collect information and funnel people into giving information and requesting a product demo. So the button is on the left (where Western eyes typically track first) and a bright red to highlight it's importance as a graphical element in a blue and black page.

Collecting Information: The Form

 
 
Competitor website, incorporating form into main page towards the bottom

Competitor website, incorporating form into main page towards the bottom

The form design presented a unique challenge because it was an absolute business priority for the company to encourage people to share information with the business development manager. The button was already present, but the next iteration of that idea would be to ensure that people who would enter the form page would fill out the information.

Upon doing a competitive analysis of Click2Cloud's competitors, the most immediate and effective method I found was having a small form incorporated readily into the product download page, as shown to the right. However, it was present halfway down the page and could easily be ignored by users as it was on the left. Further, it was in no way distinguished from the surrounding UI features visually. 

I used two psychologically effective UI patterns to ensure the potential visitors would share their information before reaching my final design: 

a) Isolation Effect: Items that stand out on a page are more memorable. This meant de-emphasizing the rest of the items on the page in favor of a bright form front and center. 

b) Limited Choice: Fewer options are more likely to lead to a decision. This meant providing only a small escape area (the 'X' at the top right) and the large "Request Demo" button to move forward. 

The final form design used both of these effects extensively to provide a tightly controlled experience that emphasizes only what's relevant. Further, instead of a small form, a large form pops up that isn't on a separate page, to reduce the friction for a potential customer visiting. 

 
 
Form Features.png
 
 

Conclusion

My internship with Click2Cloud was my first true experience of working with real world pressures on a company. Communicating with developers and programmers while being the voice of UX within a B2B company was a challenge. By finding 'allies' within the system who could co-advocate for good design within the company like the business development manager, I was able to deliver one of many products that in my estimation fulfill my remit of bringing consumer grade UX to a business facing company. 

 

Home    Design    Journalism