IBM Bluemix/UX

Developing a simple identity and website to seek test users for IBM Bluemix

Project Details

Done for

IBM

Time

Spring 2015

Main Collaborators

  • Design Researcher: Daniel Hutcherson {Austin, TX}
  • Design Researcher: Chris Kelley {Raleigh, NC}

bluemix-ux-above_the_fold

The users we wanted to find were developers working to shape the future, so that's the audience we wrote to and designed for.

Great products are created iteratively, and good UX design requires frequent usability testing to check and refine ideas before they're developed. That testing, in turn, requires the recruitment of usability test participants.

IBM Bluemix is a platform that makes it easy and efficient for developers to build and deploy web and mobile applications, and designing new features for Bluemix requires extensive user research and testing. To get more testers for Bluemix, I worked with design researchers in Toronto and Austin to make a recruitment landing page. To make this page more attractive to prospective recruits, I also created a simple visual identity for Bluemix/ux. This identity centers around a logo, which evolves the brand mark Bluemix into a visual representation of the iterative process of design.

Why it was needed

To create any good product, it’s vital to constantly test whether designs are working for real people who are current or prospective users. To enable this usability testing, you need a pool of qualified people from which to pull the most relevant participants. The designers of IBM Bluemix were meeting plenty of qualified potential users to test with, but we had no great ways to connect with them for later contact and usability tests. It was an obvious and relatively simple problem that just needed a bit of extra effort to solve.

 

How we made it

Research and brainstorming

We used mural.ly to list our needs, show prior attempts to solve this problem, and collect screenshots of user-recruiting landing pages from other companies.

Screen Shot 2015-08-13 at 8.43.38 PM

UX Researchers Daniel Hutcherson and Chris Kelley worked on the questionnaire to determine which responses were qualified for testing, while I focused on creating a light identity and landing page.

Screen Shot 2015-08-13 at 8.45.22 PM

I used mural.ly to ideate and share different brand ideas, using taglines and business card mockups to quickly and simply represent the possibilities.

I brainstormed a few ideas for a visual identity and presented lo-fi digital sketches to the core Bluemix identity team. With their feedback, I was able to refine my idea of a Bluemix logo showing the iterative design process. I hand drew the logo and scanned it in at high-resolution.

bluemix-ux-card_mockup

This is the final design of the business cards, which were printed to be handed out at IBM’s annual Interconnect conference cloud & mobile developers.

bluemix-ux-screenshot

The Bluemix/UX landing page

I coded the landing page from scratch, using vanilla HTML and CSS.

To actually make this page available to users, I had to find a way to get it hosted. I discovered a hack to post static sites on Bluemix, and was able to put this site online (I also then created a tutorial to explain this workflow to others, in case they wanted to do so, as well). The recruiting site went up as a subdomain of Bluemix (bluemixux.mybluemix.com), and a cleaner URL was created by the core Bluemix team to redirect to it. Users could go to bluemix.com/ux, and wind up on our test recruiting page.

This site didn’t need bells and whistles, but I did add a bit of CSS animation to the site to more effectively drive users into the sign-up form.

This being my only “production” development project for IBM, I sweated the details to make the code efficient and clean. I coded this all in vanilla HTML and CSS, which meant that I really needed to take care to get it right. I’ve since discovered the wonders of Gulp, so if I were to make this site again, I would use a build process to make the development faster and cleaner, as I have on subsequent my web projects.

The implementation of this landing page had a short deadline, because the annual IBM developer conference was happening just a week after the start of the project. For me, that meant a bit of working over the weekend to fix some bugs, but it was great motivation to keep focused on the big picture and build it quickly.

What I learned

  • The basics of using the command line (necessary to post this to Bluemix)
  • The basics of version control with Git (also necessary to post to Bluemix)