My Website
Get in touch

Poetic | Website Design

The Brief

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

This content is the property of Poetic and any unauthorized distribution or publication is strictly prohibited. Poetic has provided explicit approval for showcasing this work as part of their trusted relationship with Analogy

Services

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

Year

2020 – 2021

Introducing

Poetic, A Brand First Web Platform To Buy, Customise Your Accessories

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.

Mapping out the experience

As we had a vast number of SKU’s and were building the website from scratch to enhance the user experience, we had to devise a coherent product architecture for the site. This involved creating a mega menu design capable of showcasing all of Poetic’s products on offer. Given the company’s business model, which involved releasing new products every three months, we needed a flexible website with modular sections that could be updated with imagery and video as needed. It was crucial to map out these interactions to ensure that the user experience was optimal, and that the design and development teams worked in harmony.

To gain insights into the buyer personas of Poetic’s customers, we reached out to approximately 200 existing customers who were willing to discuss their preferences, experiences, and buying patterns with us. By defining these users and their habits and behaviors, we were able to determine what should be displayed to them upon logging in and differentiate between new and repeat users on the site. One type of user we identified was the e-commerce consumer – a seasoned online shopper who has a clear idea of what they want to buy and the details they need to make an informed purchase decision. These users are fashion-conscious and particular about product colors, look, and feel, and rely heavily on reviews. The other type of user we identified was the backend admin at Poetic and other third-party customers with logins on the Poetic website. The admin is responsible for updating information on new and older products and maintaining the overall website, ensuring the brand stays in focus.
PROCESS AND ARCHITECTURE

Defining The Base Users

To gain insights into the buyer personas of Poetic’s customers, we reached out to approximately 200 existing customers who were willing to discuss their preferences, experiences, and buying patterns with us. By defining these users and their habits and behaviors, we were able to determine what should be displayed to them upon logging in and differentiate between new and repeat users on the site.

One type of user we identified was the e-commerce consumer – a seasoned online shopper who has a clear idea of what they want to buy and the details they need to make an informed purchase decision. These users are fashion-conscious and particular about product colors, look, and feel, and rely heavily on reviews.

The other type of user we identified was the backend admin at Poetic and other third-party customers with logins on the Poetic website. The admin is responsible for updating information on new and older products and maintaining the overall website, ensuring the brand stays in focus.

PROCESS AND ARCHITECTURE

USER SURVEYS

We utilized surveys to gather valuable insights into the different functions performed by both new and repeat users on the website. This enabled us to better understand user behavior and tailor our website design and features accordingly to improve the overall user experience.

We utilized surveys to gather valuable insights into the different functions performed by both new and repeat users on the website. This enabled us to better understand user behavior and tailor our website design and features accordingly to improve the overall user experience.
BEHAVIOR MAPPING
PROCESS AND ARCHITECTURE

KEY FACTORS

Through extensive data analysis, we were able to identify a set of key factors that define the online user experience for Poetic’s customers. These factors have since been used as a guiding framework to improve the website’s functionality, user interface, and overall performance, ensuring that our customers have a seamless and enjoyable experience every time they visit the site.

PROCESS AND ARCHITECTURE

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.

 
 
BEHAVIOR MAPPING
PROCESS AND ARCHITECTURE

Key Attributes

Upon reviewing the existing website, we realized that there was no information regarding the effort Poetic put into the design and development of their products. As a result, we decided to focus on highlighting the unique attributes that defined the brand by incorporating visual elements that would resonate with our consumers. This approach enabled us to create a more engaging and informative website that not only showcased Poetic’s products but also highlighted the passion and hard work that goes into the design and development process.

Upon reviewing the existing website, we realized that there was no information regarding the effort Poetic put into the design and development of their products. As a result, we decided to focus on highlighting the unique attributes that defined the brand by incorporating visual elements that would resonate with our consumers. This approach enabled us to create a more engaging and informative website that not only showcased Poetic’s products but also highlighted the passion and hard work that goes into the design and development process.
PROCESS AND ARCHITECTURE

Wireframing

To ensure that we were meeting the overall business and experience goals, we began by creating low-fidelity wireframes on paper and pinning them up for initial discussions. This allowed us to iterate quickly and ensure that the entire experience could be translated into engineering requirements.

After agreeing on a selection of wireframes, we then progressed to digital tools such as XD to create full-fledged high-fidelity wireframes. These wireframes were then presented to the client for feedback before proceeding with further development. This approach allowed us to refine the user experience and address any potential issues before investing additional time and resources.

PROCESS AND ARCHITECTURE

Navigation Flow

Gaining an understanding of how customers navigate through the eCommerce portal was a crucial step in our design process. To anticipate various user interactions, we began by designing navigation elements, which served as a critical component of the user experience.

We then moved onto creating high-fidelity wireframes based on the final approved concept. These wireframes were used to validate various user flows and identify the most efficient and intuitive navigation options for our users. This approach allowed us to optimize the user experience and ensure that customers could easily find the products and information they were looking for.

Behavior mapping was key to help users slowly graduate from being a browsing customer to someone who is familiar with the offerings at Poetic.
Poetic cases were specifically designed with the unique culture of San Francisco in mind. Drawing inspiration from the city’s diverse attributes, colors, and visual motifs, our cases were created to embody the essence of SF. Our tagline, “Love from SF,” perfectly encapsulates the spirit of our brand – conceived and designed in San Francisco for our loyal customers. To ensure consistency across our website and brand, we put together a comprehensive style guide consisting of various visual elements. This guide served as a reference point for our design team, ensuring that all visual elements were aligned with our brand’s messaging and values. This approach enabled us to create a distinct and memorable brand identity that resonated with our customers.
PROCESS AND ARCHITECTURE

Style Guide

Poetic cases were specifically designed with the unique culture of San Francisco in mind. Drawing inspiration from the city’s diverse attributes, colors, and visual motifs, our cases were created to embody the essence of SF. Our tagline, “Love from SF,” perfectly encapsulates the spirit of our brand – conceived and designed in San Francisco for our loyal customers.

To ensure consistency across our website and brand, we put together a comprehensive style guide consisting of various visual elements. This guide served as a reference point for our design team, ensuring that all visual elements were aligned with our brand’s messaging and values. This approach enabled us to create a distinct and memorable brand identity that resonated with our customers.

PROCESS AND ARCHITECTURE

Web Elements

Building upon the style guide, we developed a comprehensive library of UI elements for the website. We utilized the contrasting effect of a dark background to highlight the vibrant orange color scheme that was synonymous with the Poetic brand. These elements were then seamlessly integrated throughout the site, providing much-needed consistency and a cohesive user experience.

This approach allowed us to create a unique and visually appealing website that not only aligned with our brand messaging but also helped to differentiate us from our competitors.

Through extensive data analysis, we were able to identify a set of key factors that define the online user experience for Poetic’s customers. These factors have since been used as a guiding framework to improve the website’s functionality, user interface, and overall performance, ensuring that our customers have a seamless and enjoyable experience every time they visit the site. To ensure consistency across our website and brand, we put together a comprehensive style guide consisting of various visual elements. This guide served as a reference point for our design team, ensuring that all visual elements were aligned with our brand’s messaging and values. This approach enabled us to create a distinct and memorable brand identity that resonated with our customers.
Web Screens
PROCESS AND ARCHITECTURE

Web Screens

PROCESS AND ARCHITECTURE

Responsive Design

PROCESS AND ARCHITECTURE

Tell us about your project

This form is for prospective clients only.  For opportunities at Analogy please visit the careers page