Cala Product Feature Page
In this project I aimed to create a single-page flow featuring a high-tech product for an imaginary brand. The word Cala is inspired by the Latin word for pen, calamus. I created this page, featuring their augmented reality pen called the Marker, in Photoshop.
Project Date: March 2019
Annotations
At the highest level, I focused on the principles of visual hierarchy (the “attention funnel”) and eyepath when making choices in this design.
Top Bar
I kept the top bar intentionally minimalist, featuring only the brand logo, brand name (centered, with a high tracking value for a futuristic, elegant feel) and a classic hamburger menu symbol, which would give way to a drawer menu on the side featuring the cart, account information, and site navigation to other products.
Page Opening
The page opens with a phrase meant to elicit both a futuristic and elegant feel characteristic of cutting-edge tech, and to provide a reason a customer might want to buy the product (e.g. to be more limitless themselves, to take part in this limitless world, to which the product might grant access). The slogan directly interacts with the pen, which seems to be drawing part of the lettering down and introduces color to ensure the eye is drawn. The product is shown in its classic black color, with a drop shadow to make it feel more like an object on the page, with the logo featured.
The pen object acts as an arrow, drawing the eye to the phrase “Experience...before.” The line underneath the phrase continues to guide the eye to the further product information (left at “Lorem ipsum...” due to project time constraints).
Product Feature Video
The user is led to a product demonstration video, which elegantly takes up the entire page to suggest a full experience, with the option to play (respecting the user’s agency to either play it or not play it; most studies show that users prefer non-autoplay on webflows) with the gentle yet inspiring prompt “See the action.”
“The Marker”
I modified an existing typeface (Lucinda Handwriting) to create the branded product name The Marker to acheive a deco typeface that elicits the free, handwritten feel appropriate to an AR pen called “The Marker.” From the branded product title, the classic black pen itself reappears just below the branded name to point the user from the name to the product slogan. The user lands on the slogan, which aims to provide an inspiring motivation to buy the product, and then drops down to three graphics above nouns meant to describe the main advantages/feelings the product offers or aims to elicit. The three graphics and corresponding nouns align spatially to the three words in the slogan for a balanced feel.
A Splash of Color
The array of pens each feature the Cala brand logo and together parade the four available product colors. They draw the eye in from the graphics/descriptions above into one focal point before the eye moves across the page to the two-word simple phrase and then the further information further across the page—with more hierarchy within that section of text via typography type, color, and size. All phrases here would be pithy, informative, and inspiring.
The Landing
The (imaginary) Cala brand sells many high-tech products with an emphasis on mixed reality, including VR headsets and pieces smart-fabric clothing, for example, so the Marker is one of many products that they have individually branded. The circle with the pen silhouette in it is part of this product-specific brand within their line of products. The user lands on this product brand as the conclusion of their journey down the page—almost.
The bold elements throughout the page have already “shouted,” so to speak, so by the time the user scrolls past the final element (the product marketing), the call-to-action need only be a whisper—emphasized with a little color that also works to tie it in with the original phrase at the top of the page. Finally, the footer features simple links to other parts of the site.
Process
Cala Branding
When coming up with the branding for my imaginary high-tech company, I began with the name (see leftmost image).
The idea for the Cala logo came from playing with the letter forms of C-A-L-A (see both images to the right). I chose the circular silhouette that also contained angular forms reminiscent of arrows, which felt bold and unique, with some complexity but a classic circular overall form.
The far right image also features the beginning of my competitive visual architecture analysis.
Visual Competitive Analysis
In addition to the screen captures in Style Tile 1, these wirefames of existing tech product pages from brands such as Samsung and Apple served as competitive research and inspiration to get a feel for page flow practices and how to guide the eye down and across the page.
The image on the far right also shows brainstorm lists of product qualities to emphasize.
Style Tile 1: Object, Color, Typography studies
I began with a basic style tile (mood board, inspiration board) to explore what the forms of the product could look like, initial evocative shape forms (particularly the circle and triangle), different colors/textures to explore, intiial competitive research (particularly Apple and Samsung product pages, screen captures included here), and a typography study. I wanted the color scheme to be mostly darker shades of gray contrasting sharply with white and bold magenta or electric blue to give a minimalist, futuro-industrial feel with opportunities to capitalize on color hierarchy and bold eye-catching accents. I originally considered including sans serif headings and serif paragraph-level text, but ultimately opted for all sans serif type to promote a cleaner, more modernist feel.
Style Tile 2: Branding Typography, Logo Thumbnails
After selecting the most promising sketches for the Marker (product) and Cala (company) logos, I generated high-fidelity versions of the logos in Photoshop, experimenting with color inversions for the Marker logo (1a-b) and different line weights for the Cala logo (2a-f), with the goal of ensuring that both were bold enough to achieve the highly recognizable (including from a distance) and flexible (able to be put on different materials) nature required of a logo.
Shape Studies
These earlier experiments with what shapes could evoke certain emotions such as “Authentic” and “Invigorating” were highly informative as I constructed graphics for the words “Ease,” “Authenticity,” and “Precision” in this page flow.
Style Tile 3: Color, Texture, Object Study
Though I decided not to use any of these elements as they did not quite fit with the flow I ultimately established, these studies informed my approach to the feel of the brand, product, and page flow.
