Pioneer Balloon needed an update to their eCommerce site, MyBalloon. The original site was rarely used, hard to find and navigating and creating balloons was frustrating, to say the least. Between each of the steps below I conducted stakeholder reviews. If changes were needed, they were made with another review following. Once final approval was granted, I moved to the next step.

Here is my process for creating a more user-friendly and SEO optimized site.

Stakeholder Interview

I start each project by interviewing the stakeholders. With MyBalloon this included the CEO, Marketing Manager, IT Director and Lead Developer. My goal was to find out where the current product is failing, their vision for a better product and gather any user data. Since the user data was practically non-existent the plan for MyBalloon was to rebuild from scratch incorporating modern standards and to test after-launch for improvements.

Site Review

Since an eCommerce site already existed, I was able to review for problematic areas. I was quickly surprised how difficult navigating the site, creating a custom design and finding basic information was. Additionally, there was no search engine optimization which could help explain the low traffic.

The User

Pioneer Balloon’s business model is B2B with global clients like Party City, large enterprises and more where balloons are ordered in bulk. MyBalloon was created to target individuals wishing to order small quantities for personal use. With this goal in mind we created two primary personas: Mom who wants to customize a princes balloon for her daughter’s birthday and Corporate HR Representative who is planning a retirement party and needs custom “Farewell” balloons. Neither of these users had a background in design, but wanted to add some creative flair to the balloons. Both wanted to personalize the balloon to add the recipient’s name and wanted to add custom colors (the daughter’s favorite color and the corporate brand color).

Site Map & User Flow

Next step was to create a site map and basic user flow of the primary site. This is the “1000-foot view” to gain an understanding of what basic needs the site had and the hierarchy of information.

MyBalloon Site Map

Design Tool

The biggest driver to success was an easy to use design tool. The previous tool was difficult to use and understand. I created the user flow for the design tool and documented for stakeholder’s approval.

MyBallon Design Tool - Flow

Wire Frames

Next we started thinking about the rest of the site design and what is important to users. We were starting with little user data but we knew the primary goal of the site is to allow users to create their own balloon designs and to be able to select a theme from which to begin their design.

A call to action in the hero space was an obvious first step with properly labeled featured themes bellow.

*Note - I would like to have used card sorting for the theme labels but budget didn't allow.

MyBallon Home Page Wireframe

Lo-Res Mockups

Once we had agreed upon general page layout I created low-fi mockups to start refining style, features and copy

MyBallon Home Page Low Fi Mockup

Hi-Res Mockups

After lo-fi mockups were done the marketing group wanted to change featured labels to reflect the type of design. I pushed back citing lack of clarity of intended action (you’ll notice in the lo-fi mockup I had “select this design”) but they insisted.

I think the best solution would have been somewhere between the two, but they owned final decisions.

MyBallon Home Page Low Fi Mockup