Brand Strategy & UI Design

Case Study

cloudegy website project on an iphone 5s

Cloudegy was a marketing campaign initiated by Uncommon Solutions, a Denver-based Microsoft Managed Partner, to promote their cloud services and solutions.

The Story

When I kickstarted my freelance career I met with several entrepreneurs to discuss the positioning and viability of my business model. Brad Leiby, Uncommon Solutions CEO, was impressed by my customer-centric thought process and asked if I was interested in contracting for a marketing initiative centered around Microsoft cloud solutions.

The Problem

Uncommon had scheduled a series of events regarding Microsoft cloud solutions and had less than a month to promote the event and to register 48 attendees within their target audience. They needed a strategy for the campaign and a team to execute that strategy.

The Goal

The goal for the project was to create a website that would craft the broader vision of Cloudegy as well as promote their upcoming events.

The Team

My Process

Step 1. Discovery

I held a stakeholder workshop with Uncommon Solutions President and CEO, Brad Leiby, to uncover their objectives and target audience for the Cloudegy project. We sketched out goals, concepts and personas. I asked Brad to walk me through 'a day in the life of' our target audience: busy C-level executives at medium-to-large sized companies who were struggling with cloud migration so I could begin to understand our users.

mind map of the stakeholder workshop with uncommon solutions

I suggested that rather than brodcasting a marketing campaign, they could build a community of partners dedicated to heading to the cloud together. Rather than stimulate the already high-level of competition within their market, why not create a non-combative atmosphere where businesses across industries could come together? Technicians, managers, C-level executives and the like would be able to share their stories, learn from each other and make better use of their company's efforts surrounding the cloud.

We talked about the premise of using a content marketing strategy but there wasn't budget or time to create a minimum viable audience before the event. I expressed my concern that the marketing lists can perform poorly compared to an organic audience, but a list of 500 professionals within the target audience was all we had to work with.

Step 2. Content Strategy

I facilitated a brainstorming session on the whiteboard—each of us with markers in hand—and started looking at the concepts and philosophies behind the brand. I wanted to use the language of Cloudegy's audience to create consistent messaging that represented the vision as a whole.

creating content strategy for the cloudegy project

Step 3. Content Inventory

Using the process described in Stephen Hay's Responsive Design Workflow I facilitated a workshop centered around creating a content inventory so we the written word would be the focal-point of the design.

creating a content inventory for the cloudegy site

Step 4. Copywriting

Pleased with the content I had written on my site, Uncommon Solutions gave me the copywriting role for the project. After a few iterations, we had a working content prototype that we could use to test our language and messaging with our target personas.

writing copy for the cloudegy project

Step 4. Delegation

I sat down with one of Uncommon's developers and we quickly hashed out a Trello board of tasks. We delegated responsibilities and decided to use Slack for team communication.

delegating tasks on a trello board

Looking at the widespread scope of my responsibilities, I realized that I would have to make decisions about how to invest my time if we were going to get the website up in time to register participants for the events and stay within budget.

My tasks covered:

  • Brand Strategy
  • Content Writing
  • UI Design and development

We had less than three weeks to execute.

Step 5. User Journey Mapping

I thought it was important to understand the experience of Cloudegy as a whole. Rather than designing the interface of the website in an isolated context, I wanted to understand how each user was coming to the site and see how their journey continued. I realized that the event registration flow was the most crucial part of the experience, but we had outsourced the event-management to Microsoft so we had no control unless we wanted to build another one from scratch.

I sketched a user journey and experience map to help me understand the user's different points of contact.

user journey mapping

Working from the sketches of my user journey and experience map, I quickly prototyped major components. The website needed to be mobile-first and so I began from the lowest form-factor and worked toward the highest.

wireframing components on a whiteboardwireframing components in my sketchbookmore wireframing in my sketchbook

Mobile usability and performance were two of the most important elements of the site. The Cloudegy target audience were busy corporate employees and executives who are constantly communicating on a variety of devices across contexts and we needed an experience that fit their context and their needs.

Step 5. Development

After Uncommon approved the component wireframes we started developing the site. We had to scaffold the site in a few days so we needed to prioritize our efforts.

Once the main layout was formed around the content of the site, I sketched out an initial color palette to harmonize the layout with tone of the content strategy. We discussed creating a brand that was professional yet inviting and intriguing.

color palette I designed for cloudegy

Step 6. Performance Optimization

Once we had a solid layout established I started removing unnecessary components of our CSS framework to make the site load faster. We easily met the performance budget of page-load in under two seconds.

  • testing the website pagespeed on mobile
  • testing the website pagespeed on desktop

The Outcome

The Cloudegy project began as a marketing campaign. I shaped the vision of a community heading to the cloud together and executed the vision with hand-crafted content and a performant mobile-first interface.


Courtesty of Browserstack
cloudegy website project on an ipadcloudegy website project on an iphone 5scloudegy website project on an iphone 6 pluscloudegy website project on samsung galaxycloudegy website project on samsung galaxy minicloudegy website project on a galaxy tablet

Room For Improvement

Committed to learning from each experience and continuing to improve, I had a few takeaways from the Cloudegy project that I would have done differently.

  • I should have trusted my instinct about the reliability of a purchased marketing list to drive conversions.
  • Creating a minimum viable audience through content creation would have been a great alternative to broadcast marketing.
  • I should have limited the breadth of my scope—my efforts were spread too thinly across disciplines and I needed to spend more time understanding their target audience and their needs before I jumped into creating a solution without adequate understanding.
  • Next time, I will be sure to clarify the value of a mobile-first approach. I assumed that 'everyone' was mobile-first nowadays, but apparrently some don't see the same value that others do.