After working on the design of the core product, I was pulled to iterate on the marketing page for the Data Science Experience.
Problem: Marketing page is too light on content and doesn’t provide potential users enough reason to sign up.
Goal: Overhaul the IBM Data Science marketing page to give it more content in order to help potential users learn more about the product before signing up.
Role: I was the Visual Designer working with four UX Designers and one Researcher.
The old marketing page (pictured below) was put together to make Data Scientists aware that IBM was launching a product for them. The page was light on product details but presented a vision that was currently in development.
Once we had set a launch day for the Data Science Experience, it was time to design a marketing page that explains the product and allows users to test drive its features. A UX Designer began the process of laying out the sections of the page and from there I worked on the visuals and updating the designs as needed.
We found that users grew disinterested with our page quickly after landing on it, and were unable to find product information. Interviewing potential users allowed us to prioritize content and content order.
I iterated on the landing page redesign through explorations into content placement and visual treatment, shown below.
Initial user testing on the explorations revealed that if users couldn't gain an immediate understanding of the product and find more detailed content, they would leave. They wanted a concise, well laid out page to tell them about the product and its features. Taking this feedback into account, we were able to rule out designs that didn't place the most essential content on the top, were confusing to follow or were simply too long. Users liked more detailed descriptions of specific features rather than high level statements. Using this, we narrowed down the design options and iterated from there.
To help push the design further, I incorporated some minor but impactful design decisions. To help users immediately gain a feeling of the product without doing anything, I placed b-roll from our product video as the background of the hero. Overlayed on it is our elevator pitch trimmed down to two succinct lines. Immediately below, the three selling points of the product are displayed horizontally, all present without scrolling. Further down the page different portions of the product are highlighted followed by calls-to-action to learn more. The iterations seen below were driven by user research to streamlining the length, deleting/combining sections, and sharpening the content with the content team.
Another feature that went into the design was the idea of constraining the content. Data Scientists tend to work on large displays, so I had find a way to keep the content readable no matter the width of the display. This is where I worked with the Front-End Developer to constrain the actual content to 1440 pixels wide and moving past that width, the content would stay fixed and a grey background would continue to expand infinitely.
Feedback on the old page indicated that it didn't provide an adequate overview of the product's features or give an indication as to how the product is structured. As a response to this, we built out the features page with a carousel that details high level features and below that, a detailed breakdown of how a project works. User testing this new design, indicated that the carousel call-to-action wasn't clear and the text for the projects wasn't flowing correctly. To remedy this, I made the carousel affordance more obvious and altered the location of the project breakdown text. I also greyed the background of the carousel to allow the content to be the focus rather than the background. Users can quickly get a breakdown of features with content driving the focus.
I worked directly with a front-end developer to develop the website as true to the designs as possible.
View the shipped page here!
What I learned:
- Designing a marketing page from the ground up, while working with restraints, is not easy.
- The entire site has to look great no matter the browser size.
- How to effectively work with Content, Marketing and Development teams.
- Putting a length next to a video link increases clicks.
- Carousels are not well received with users.
Things I would change:
- Replace more screenshots with illustrated screenshots since the design of the product is tweaked constantly, therefore leaving these screenshots out of date frequently.
- Utilize more active visuals to help guide users down the page and call attention to important elements.