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.
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.
- 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.
Business Needs: Choices of Color and Typography
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
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.
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.