Challenge:<\/strong> The challenge<\/strong> for the design team was that all sites would be migrating to a new platform. Solutions needed to work for all three. And they needed to be mobile first.<\/p>\n\n\n\n Team:<\/strong> I reported to the Associate Creative Director (UX). Other team members included the Design Director (Visual design), and two art directors. The project manager was the final core member of our team.<\/p>\n\n\n\n Phases of Work:<\/strong> Our work was completed in 2 phases. In phase 1, we focused on identifying best practices. In phase 2, we focused on completing the design.<\/p>\n\n\n\n The early UX phases of the project centered on finding examples and best practices for e-commerce websites. Many best practices came from the Baymard Institute<\/a>, as well as other expert sites like Nielsen Norman Group (NNG.com).<\/p>\n\n\n\n The best practices were organized by page or section, such as home page, product detail pages (PDP), and checkout.<\/p>\n\n\n\n We presented the best practices with screenshots of example sites, the current sites, and \u201cout-of-the-box\u201d functionality for the backend platform.<\/p>\n One best practice that surprised me involved the use of Quick View. Baymard Institute identified that around 48% of websites utilize Quick View on product listing pages. However, their research concluded that “Quick Views are often symptom treatments<\/strong> for poor product list designs<\/em><\/a>.” Therefore, the priority would be to create strong designs for the product list pages rather than create a new design for Quick View.<\/p>\n<\/div>\n\n\n\n Learn more about this finding on their blog: https:\/\/baymard.com\/blog\/ecommerce-quick-views<\/a><\/p>\n\n\n\n Starting out, the visual design team concentrated on UI foundations, like building a pattern library and exploring typography, etc. We collaborated in a few of the following ways:<\/p>\n\n\n\n Shopping Journeys:<\/strong> As a team, we also discussed various shopping journeys to address specific requests from the client.<\/p>\n\n\n\n Information Architecture:<\/strong> We also discussed information architecture and iterated on multiple sitemap options, reviewing the current site, similar sites, and consulting with the tech team.<\/p>\n\n\n\n Phase 1 concluded with a focus on aspects of the product page, shopping journeys, and best practices.<\/p>\n\n\n\n Our goal starting Phase 2 was to complete several rounds of sprints. The work would include most of the site, starting with PDP. A few highlights from the start of Phase 2:<\/p>\n\n\n\n Design-Pairing on PDP:<\/strong> In the first month, I closely collaborated with one of the art directors on an early design of PDP. We discussed various options for page elements, like product descriptions and reviews. I gave feedback on functionality and usability.<\/p>\n\n\n\n Annotations for Visual Design:<\/strong> I also supported the visual design team that first month by creating annotations for visual designs, which were uploaded to Confluence.<\/p>\n\n\n\n Responsiveness & Functional Limitations:<\/strong> Throughout the project, I worked with the development team on understanding functional limitations and keeping the layout responsive.<\/p>\n\n\n\n As with many projects, plans changed and our work refocused:<\/p>\n\n\n\n Refocus on Global Nav and User Profiles:<\/strong> We redirected our efforts towards the global navigation and user profiles, instead of the shopping journey. The work would now include global header\/footer, sign in, account creation, favorites, purchase history, password, etc.<\/p>\n\n\n\n New Client UX Lead, Refocus on Design Framework:<\/strong> On the client side, a new UX team lead with a focus on longer-term goals — including a design framework for all three brands to use.<\/p>\n\n\n\n At one point in our sprint cycles, the client requested the team start building a design system. The request came with a prioritized list of components from the branding team. As the team reviewed the list, it became clear that the naming convention used by the client created some confusion and made it difficult to get started.<\/p>\n\n\n\n My experience with design systems comes from using or playing around with tools like Basecamp, Foundation, or Tachyons.<\/p>\n\n\n\n When I saw the list, I started thinking about how to break down the designs into smaller elements, so that they could be combined again in increasingly complex ways. Rather than explain my ideas, I thought it best to show the concept.<\/p>\n I created a Sketch document that showed how even the most complex component could be created from combinations of individual elements, as long as they obeyed certain functional rules. The outcome was the design team was able to use my document in establishing a base for the design system. At the end of the sprint, we presented our concepts together.<\/p>\n<\/div>\n\n\n\n Eventually the UI and UX teams split into two. The visual team supported the design framework\/UI and the UX team continued the product design\/wireframes.<\/p>\n\n\n\n The UX team focused on screens associated with user profiles, including purchase history, favorites, communications, user registration, address book, etc. We spent a lot of time iterating on form design and mobile layouts.<\/p>\n\n\n\n My Week Note<\/strong> blog posts document some of the tasks I completed in Phase 2. They can be found for March<\/a>, April<\/a>, and May<\/a>. A few highlights are below:<\/p>\n\n\n\n If you visited this blog post from my website, you can jump back here<\/a>.<\/p>\n\n\n\n Sidenote<\/strong><\/p>\n It sounds like science fiction, but right in the middle of this project a new and deadly virus spread across the United States. A global pandemic was declared. The city of New York became the hardest hit locality in the United States. In the early weeks of March, we stopped travel to the client’s location and the main office. For 2-3 months, all work became remote.<\/p>\nPublicis Sapient<\/a> calls itself a \"digital business transformation company\". Its headquarters are in Boston, MA.<\/pre>\n\n\n\n
\n\n\n\nPhase 1: Best Practices<\/h2>\n\n\n\n
![\"Screen](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/06\/baymard-home-min.png\")
\nSurprising Finding About Quick View: Don’t Use It<\/span><\/h6>\n
![\"Screenshot\"](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/07\/baymard-blog-min.png\")
\n\n\n\nEarly UX Collaborations with Visual Design in Phase 1<\/h5>\n\n\n\n
![\"Whiteboard](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/05\/lux-whiteboard-320w-230x300.jpg\")
Phase 1 Conclusion<\/h3>\n\n\n\n
\n\n\n\n Phase 2: Design Sprints<\/h2>\n\n\n\n
![\"Whiteboard](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/05\/lux-sprints-320w-230x300.jpg\")
Mid-Project Refocus Towards Global Nav and Framework<\/h3>\n\n\n\n
How Initiative and Collaboration Helped Build a Design System:<\/h4>\n\n\n\n
![\"\"](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/06\/boot-min-300x203.png\")
\n\t\t\t<\/div>\n\t\t\t\t![\"\"](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/06\/tach-min-1-300x203.png\")
\n\t\t\t<\/div>\n\t\t\t\t
<\/div>\n\n\n\nOutcome<\/h2>\n\n\n\n
\n\n\n\nScreenshot references<\/span><\/h4>\n\n\n\n
![\"Screenshot](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-03-17-at-11.40.18-AM-min-150x150.png\")
\n\t\t\t<\/div>\n\t\t\t\t![\"Screenshot](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-03-17-at-11.40.33-AM-min-150x150.png\")
\n\t\t\t<\/div>\n\t\t\t\t![\"Screenshot](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-03-17-at-11.40.49-AM-min-150x150.png\")
\n\t\t\t<\/div>\n\t\t\t\t![\"Screenshot](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-03-17-at-11.41.47-AM-min-150x150.png\")
\n\t\t\t<\/div>\n\t\t\t\t![\"\"](\"https:\/\/alliwalk.com\/blog\/wp-content\/uploads\/2020\/04\/Screen-Shot-2020-04-09-at-3.36.48-PM-min-1024x627.png\")
\n\n\n\n
<\/div>\n\n\n\n