Poetic | Website Design – Analogy Design

The Brief

An E-commerce platform that represents the brand values of Poetic with a seamless shopping experience

Poetic cases is a San Francisco brand that sells tech-inspired protective cases on their website and on Amazon. With no retail outlets, Poetic Cases is a complete online only business. They approached us to redesign their branding as well as design and develop their website and online storefront.

This project is the property of Poetic Pvt Ltd. Any distribution or publishing this content without prior approval is prohibited. Poetic and Analogy have shared a long trustworthy relationship and have provided explicit approval to showcase the work and effort we put in.

CLIENT

Poetic Cases LLC

SERVICES

Design Language
Ux Design
UI Design
Brand Development
Product Strategy
Prototyping
Style Guide
Android and iOS Design

YEAR

2016-2018

The Problem

With the new rebrand of Poetic cases, the team were looking to revamp their website and main e-commerce portal to match the values and the products that they sold. The website was a crucial interface between them and their customers. Analogy was tasked with designing the website and online experience along with the development of the entire portal. The main challenge was the amount of SKU's the brand had and also the lack of portfolio's and collections to effectively present the features and value add of each product.

Introducing

Poetic, A Brand First Web platform to buy, customise your accessories

Self Expression

Authentic

Product Focussed

Diversity

Brand Centric

Seamless CX

Mapping out the experience

Due to a large number of SKU's and also building the website from the ground up to update the user experience, we had to figure out a clear product architecture for the website. This included a mega menu design that could display all the products that poetic carried and sold. The nature of the business was such that there were always new arrivals of products every three months, so the website had to be flexible and have modular sections that can be updated with imagery and video. Mapping out these interactions were key to the user experience as well as for the design and development teams to sync together.

Research

Defining the Base Users

In order to understand the buyer persona’s of Poetic customers, we chose around 200 of their existing customers who were open to discuss and give us insights into their product and brand preferences, online experiences as well as their buying patterns.

Defining who these users are and what their habits and behaviours were, gave us a lot of insight into what should be displayed when they log in and what a new user vs a repeat user would see on the site.

E-commerce consumer

This user is a seasoned online shopper who has an idea of exactly what they want to buy and the details they need to make that purchase decision. They are fashion conscious, know the colors and the look and feel of the product and rely on reviews.

Enterprise backend

The other type of user was the backend admin at Poetic and other 3rd party customers who had logins on the poetic website. The admin updates information about new products as well as updates older products and maintains the overall website keeping the brand in focus.

Insights

User Surveys

Surveys helped us gain valuable insight into the various functions performed by a new user as well as a repeat user on the website.

Insights

Key factors

Analyzing a huge amount of information led us to create a set of key factors that defined the online user experience for customers of poetic.

Insights

Behavior mapping

Behavior mapping was key to help users slowly graduate from being a browsing customer to someone who is familiar with the offerings at Poetic.

Building Blocks

Key Attributes

The existing website did not offer any detail on how much work Poetic put into the Design and Development of their products. So we looked into what defined the brand and sought to highlight these key attributes on the website with visual elements that spoke to the consumers.

Optimised

Buyer Focused

Discovery

Brand Centric

Process

Wireframing

We started with building low fidelity wireframes on paper and pinning it up to have our initial discussions on whether the overall business and experience goals were being met. A lot of time went into making sure that the entire experience could be translated into engineering requirements as well.

Once we were able to agree on some selected wireframes, we then moved into digital tools like XD to convert them into full-fledged high fidelity wireframes to show the client and get their feedback before moving on.

Process

Navigation Flow

Understanding how customers navigate throughout the eCommerce portal was key. To anticipate various interactions, designing navigation was a necessary step. The final high fidelity wireframes we designed for the final approved concept were used to validate various user flows and pick the best one.

UI Design

Style Guide

Poetic cases were designed with the culture of San Francisco in mind. All the attributes, colors, and visual motifs represented the rich diversity of the city of SF, and their Tag line ” Love from SF” aptly depicted that their products were conceived and designed in SF for their loyal customers. We put together a style guide for the website comprising of various visual elements.

UI Design

Web Elements

Keeping the style guide as a base, we created a library of UI elements for the website. The contrast from the dark background highlighted the poetic orange. These elements were translated throughout the site and helped provided much-needed consistency.