2 UX Designers, Digital Art Director, Ecommerce Manager, Ecommerce Director, 3 Developers/Engineers, CTO
UX/UI Design - User Flow and Mapping, Design Systems, Information Architecture, Visual Design, Documentation
1 year
Due to Serena & Lily’s rapid growth rate, the company needed to reevaluate its ecommerce site’s functionality and design to better support user needs and to increase site performance.
Serena & Lily (S&L) began in 2003 as a small baby brand, expanding over time into a full home furnishing and interior design company. It functioned primarily as an ecommerce business, with the help of its Design Shops, or showrooms. From 2017 - 2020, Design Shop locations doubled from 6 to 12. The business grew almost 80% over these 3 years, and many systems were implemented to accommodate growing customer service, marketing, and supply chain needs.
The entire business was centered around an ecommerce site, so it was top priority to create a high-functioning, efficient, and easily managed platform.
The company’s site had changed little in the recent years, and it was coded by a third-party developer team which was causing design and time inefficiencies. With so much growth came the need for a major update.
Build a scalable solution for S&L’s ecommerce site (leveraging a custom content builder via Salesforce’s Page Designer platform) to allow maximum efficiency, functionality, and customization.
The desired outcome of this project was to decrease the design-to-market timeline, and to increase both site performance and the user’s end-to-end shopping experience. This would be tested by building a batch of S&L’s landing pages in Page Designer.
This project contained two user groups - frontend and backend users.
The scope of this project was quite large and did not have a 100% firm deadline. The phases evolved and the timeline included space for a lot of trial + error. If this project was successful, it would expand in scope to accommodate transferring the entire website to Page Designer.
The largest constraint was that our S&L Design team was small (4 UX/Visual Designers total, including the Digital Art Director), and we were responsible for almost all of the company’s creative assets, aside from print. Considering retail has high creative turnover demands due to seasonal collections and constant campaigns, and the fact we had to work towards our project goal while carrying on our business-as-usual functions, this new project was a huge undertaking.
The current website was live-coded and managed by a third party dev team. While this allowed lots of design flexibility, they had to be contacted whenever something needed updating and were far removed from our Design team’s daily work, processes, and information loops.
In using this system for years, it became clear that designers were spending too much time passing over assets, assessing design details that had already been stipulated during handoff, and waiting for revisions on incorrectly coded items. This inevitably caused delays and last-minute cramming to meet product and campaign launch deadlines.
Our proposed solution to the current (see below) process was a scalable, custom content building platform.
The Digital Art Director and Ecommerce team found a new Engineering/Development team to work with. We needed to present a clear picture to them so they’d have a strong understanding of our brand and goals.
We spent time documenting our challenges, prepared a full look at user paths + designs on the site, and laid out our desired outcome. We passed over existing use cases and assets so the new team could begin working through the build side and do testing before coming back to us with proposed components/modules.
I assisted in the creation of necessary components, modules, and templates. I participated in many meetings with our teams in which we’d go over functionalities and how pieces were stacking on each other within the system. The meetings helped progress our wireframes and designs - we’d learn why the Devs made specific choices and give feedback on their UX/design effectiveness. This helped us iterate on structure and details to accommodate all our use cases.
With my in-depth knowledge of the subjects, I provided guidance on responsive/grid design + asset management. This allowed for all of the aspects we wanted included to be called out; the Devs/Engineers were well aware of our main goals and knew how to create many functionalities, but as expected, there were certain details that were clearer to our Design team.
For example, component + module positioning was built by applying a percentage option for both the X + Y axes so horizontal and vertical alignment could be adjusted to precise positions. While this would perhaps be useful in edge cases, we typically only needed right, left, or center alignment and consistency across breakpoints. A percentage changed visually across device sizes, so this option proved too customizable for most cases - we requested the addition of a right, left, and center quick-align option.
We went through many review cycles - after Design + Dev had their conversations, we’d meet with the Ecommerce team for feedback on our decisions from a product/merchandizing perspective. It was occasionally challenging to get things aligned from all three angles, but constant collaboration allowed us to resolve these issues.
After months of testing and revising low-fi/hi-fi mock pages within Page Designer, we got the platform to launch-ready place. We’d learned a lot about how to create bespoke-looking pages that were simplified for an easy-to-use shopping experience.
I was asked to take on the Lead role of Primary Page Builder. Since I’d been close to both the design and build side of the project, we felt it would be most beneficial for me to manage this stage in order to: 1. suggest any updates to be implemented prior to launch and 2. gain a holistic view of the design process so I could eventually onboard others. It was undetermined who would be responsible for the page building role going forward since our designers had full workloads and someone else might be asked to join to handle this.
I built 13 product category landing pages from scratch in Page Designer, all for the January 2021 collection launch. There was a bit of a learning curve even though I’d spent so much time working through these designs - it felt different to make full pages with more complex UI than in our testing.
I gained an appreciation for the level of detail that was put into our project - although I’d used the builder many times at this point, it was a new experience using it solely to produce a clear, visually complete page that foundationally matched the desired design.
I had the background knowledge of how this had all been built, but tried to also view this through the lens of someone who was tasked with solely building a page to match a Figma design file they’d been given. This gave me insight into simplifications to reduce confusion and visual overwhelm when using the platform.
The 13 pages I built were successfully launched via Page Designer in January 2021 - they looked great on the scalable platform + design system we’d created, and our team was extremely proud to reach this milestone.
I left S&L right before the launch, so I unfortunately do not know how the engagement and interaction stats turned out.
I did see, in checking on-site over the last few years (since I’ve remained invested in this development), that they have continued to evolve the site with a custom page builder. As of mid-2023, I saw a former coworker’s LinkedIn update about S&L fully launching a new site and transitioning to a headless ecommerce architecture.
The site looks a bit different than when I was there and seems to be on a different platform, but the structure is similar to what my team worked on.
There was so much to figure out in every aspect of this project and we had to start somewhere - it seems the work put into this first phase was foundational in figuring out what was needed and what would work best for such a rapidly growing ecommerce brand.
I gained a strong understanding of how components, modules, and overall design systems are created and structured. I had never been involved in the foundational aspects of a project like this, and I was able to apply my organizing/categorizing skills to a new area. This project helped me get a better insight into the fundamental layer of any design work - the design system - and taught me to always attempt a thoughtfully-created base for future design projects.
