UX & Web Design #5 – Landing Page Design, A Better Graphic
There has been plenty of design work over the past several weeks, from landing pages and web app designs, to overall concepts for new websites. Here are a few items that have been inhabiting my design programs.
Product Comparison Graphic
The comparison graphic was originally specified as an interactive desktop element: a slider bar users could drag back and forth to compare the client’s company against a main competitor. The client provided this concept, along with AI-assisted code to implement it. The goal was to illustrate the process each company’s product required to use.
When I began adapting the design for mobile — necessarily more vertical, and without the slider interaction — I realized I could actually create a clearer, more effective version overall. The original required users to take an action just to reveal the comparison, and even then the takeaway wasn’t fully clear. The new mobile version instead displays the tools and steps side by side, visually contrasting the competitor’s more involved process with my client’s simpler one. That side-by-side approach communicates the point instantly, rather than asking users to discover it.
We now have a solid, working mobile version. Next, I’ll translate this same approach into a desktop version to replace the original slider concept.
The original graphic, for comparison:
Landing Page Design
A couple of sections designed for a landing page — we’ll be AB testing this overall page with another page to see which performs better, but the outline for this page provided some opportunity for some nicely designed elements, including a question/answer block, which I’ve built out to be easily reusable as a standard block within my website design system.
The section below the QA section needed some life, and I generally like people-oriented imagery to add some life to the page. Throughout the site, we’ve used a circle element here and there, drawn from the outline of a cell since this is for a client in the bioscience sector. Incorporating a play on this design element as a background added additional interest.
