Robert Graham re-platformed to Shopify Plus. With that, I had the opportunity to refresh their site with a number of custom designed pages and elements.
My Roles: UX/UI Design, Art Direction
Tools: Figma
Industry: Apparel
Robert Graham needed to re-platform their ecommerce site. The original was hard to manage, had security issues, was too costly, and was not the most optimized user experience. Through discovery conversations with the client, it became apparent that personalization, the ability to schedule content, and improved information architecture were needed. It was determined in the sales process that Shopify would be the platform to help solve some of these issues.
When customers land on the site, the current UX prevents them from having the best experience when browsing for products.
As the lead designer, I was tasked with feature discussions, wireframing, designs and an information architecture audit. This also included art direction for Robert Graham's ecommerce photography.
Part of the important work upfront is speaking with the client and understanding their audience, objectives, tone of voice, and brand messaging. I put together a creative brief that compiles this information to ensure the client and team are all on the same page. I also included comparative research to get their insights on what design elements fit with the brand.
The primary customers of Robert Graham are men who are loyal to the brand and collectors of limited edition shirts. They are risk takers and tend to spend big. Age tends to be 49+ and they are heavily concentrated in Florida, Texas, and Las Vegas. Though this is the primary customer, the business had ambitions for acquiring a younger audience and expanding upon the women's collection.
Through discovery conversations with the Robert Graham team, I came to understand that customers value the in-store shopping experience. There, customers can feel the fine fabrics, study the details of patterns, and browse like they are looking for an art piece.
1. How do we translate pattern details successfully on the site?
2. How do we allow customers to browse seamlessly?
3. How do we speak to all audiences on the homepage?
4. How can we simultaneously provide better flexibility to the business?
Robert Graham's collections are full of whimsical patterns and bold colors. The site needed to allow those delightful details to shine through the UI, without overpowering the products themselves.
Informed by the information architecture audit and revised sitemap, the new menu allows for a robust level of subcategories and added attribute navigating. A CMS spot allows for a feature callout that can be scheduled to change.
The brand guidelines included beautiful legacy illustrations that I neatly folded into the UI. One is within the homepage banner to move users down the page, and another in the footer. Little touches speak to the brand's voice.
To showcase the colorful prints, I incorporated full-bleed images within the category landing page and PDP to place these shots. Also, I designed a hotspot module to help customers understand all the wonderful aspects of the products they're shopping.
Product photography is a huge factor in a customer's purchase decision. I used my past experience as an ecommerce art director at Kenneth Cole to guide the team at Robert Graham on how to create consistency within their product photography. This included a consistent gray background color, ensuring the rights to use models' faces, and a detailed look at the number of angles/shots each type of product should have.
After several rounds of QA, we launched the site in 2019. The site became easier and cheaper to manage with an improved user experience. Though no user testing was a part of the budget, using best practices we delivered an optimal site experience to help the business grow.
The site turned out to be clean and what the Robert Graham team was looking for. The site is the winner of 2 Communicator Awards: Visual Appeal & Aesthetic and General Fashion.
KPIs were monitored post-launch over the next year for some fantastic results:
