Preston Torres
「プレストン・トレス」


Standard & Strange

Lead UX/UI Designer and Lead Web Developer

E-Commerce UX/UI Overhaul and Refresh for the Standard & Strange site which reaches traffic of up to +1.4 million views annually. 

Houston We Have A Problem:

The current/previous e-commerce platform was deployed by the previously contracted developers with incomplete components, accessibility issues, functional issues that continue to hinder users from successfully completing the checkout journey. 


Mission:
To craft a refreshed site that captures the company brand identity more closely, streamlines an inclusive user experience so that all facets of S&S are accessed from the home page, and to plant calls of action to further engage the user should they require more information about specific brands, services, and programs.


Toolbox:
  • Trello
  • Figma
  • Shopify Developer Tools
  • Windsurf.AI


Exploring Business Challenges:

  • Loss of sales revenue due to incomplete journeys; 
  • Incorrect item sizes being placed in carts for express checkout options which in turn lead to returns, exchanges, or cancelled orders resulting in loss of revenue; 
  • Accessibility issues hindering potential users from starting and completing their journey resulting in loss of potential revenue.


Identifying User Opportunities:

  • Users being bombarded with information while using the current navigation tree (particularly with brands)
  • Experiencing the incorrect size being pulled when utilizing express checkout options
  • Contrast issues with text elements creating illegible components, size chart information incorrectly rendering on mobile so that all information does not appear within the user screen 
  • Unaware of company specific programs and services offered


Research & Development:

Methods:
  • Field interviews with customers that use our e-commerce platform regularly
  • Extrapolated user feedback through email inquiries to company helpdesk
  • Internal Surveys
  • Various Internal Usability Tests
  • Competitive Analysis 

Findings:
  • A portion of users were completely unaware of key services and programs offered by the company.
  • The previous/current site had information hidden in areas that were inaccessible.
  •  Compared to competitors, the visual design language of the previous/current site was outdated, lacked interactive elements, and had no clear design language. 





Accomplishing Our Mission:

The immediate pressing matter for the refresh for S&S was that ownership wanted to aim for a SS25 release starting in September of 2024 which put me quickly to work to start pulling data from the research phases of this project. I first needed to research a pre-existing theme within the Shopify landscape so that marketing and social teams could easily access and update any imagery or copy within all build pages. This theme needed to be flexible enough to be altered for design choices, possess interactive components and design features out of the box, and have ongoing development support. After testing several themes and meeting with ownership, I showcased my findings and began the design phase. Wireframing at a low level with a list of all current pages with the previous/current site and those that were missing and needed to be created for this refresh. I started to find the structure and rhythm that would be utilised sitewide, slowly adding more detail as I moved up into higher tiers of fidelity. Ultimately I needed the landing page to hold all relevant information a first time user or previous user would need to find regarding new releases, quick access points for highly trafficked collections, newly updated collections that had received deliveries recently, programs and services, and our highly sought after brands. I would reference all design choices at the mid fidelity level with existing components to ensure feasibility when it came time to build and made small adjustments across all pages to ensure a smooth transition at the end of the design phase. Prior to jumping to high fidelity, I checked that the current design solutions covered all priority issues that arose from interviews and surveys were addressed. Once confirmed, I put together a new set color scheme centered around our main brand color identity and began to thoughtfully place color where needed, checking that all contrast checks would comply with WCAG and ADA guidelines at the AAA level. Placeholder imagery was pulled from the existing site, product data, and socials to give life to the high fidelity screens before presenting to ownership and marketing. Any comments that arose were immediately addressed and last was to pin down the typeface to be used across the refresh. When talking to customers during interviews and pinning down the overall vibe for the company, it felt like it was the trusted neighborhood bodega, where people would go to talk shop, get advice, or loiter. So I did a lot of research into design choices made by old neighborhood bodegas when it came to letter styling. Thus landing on the 2 selected and once presented to ownership received immediate approval and finalization of designs. Development could commence and the approve screens would migrate over to the Shopify platform.

    
 

Releasing Spring/Summer 2025.


Head On Back to Home