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.
UI Design
E-commerce Architecture
Web UI
Web Screens
Mobile UI
Responsive Design
Results
The advantage of good design and iterative process
54%
Increase in base users
35%
Repeat customers
26%
Increase in revenue
18%
