Update: maryandmartha.com is currently undergoing changes to align with DaySpring business strategy. Current experiences within the site may not align to visuals shown below.
Tools Used
Adobe Xd (Design) | Miro (Card Sorting & IA) | Jira (Project Management)
Project Deliverables
Header/Footer
• With & Without Consultant Connection Component
• Nav Drop Downs Possible on Other PPS Sites (Nesting nav in Hamburger Menu on Mobile)
• Consultant Finder Component and User Flow
• Login Component
• With & Without Consultant Connection Component
• Nav Drop Downs Possible on Other PPS Sites (Nesting nav in Hamburger Menu on Mobile)
• Consultant Finder Component and User Flow
• Login Component
Content Pages
• Home (Custom Html) – WP & PPS
• About (Custom Html) – WP & PPS
• Join (Custom Html) – WP & PPS – Join user flow drives to PPS only; Align all core PPS Join flow screens to M&M Design System
• Host (Custom Html) – WP & PPS
• Compassion International (Custom Html) – WP & PPS
• Blog – WP Only
• Home (Custom Html) – WP & PPS
• About (Custom Html) – WP & PPS
• Join (Custom Html) – WP & PPS – Join user flow drives to PPS only; Align all core PPS Join flow screens to M&M Design System
• Host (Custom Html) – WP & PPS
• Compassion International (Custom Html) – WP & PPS
• Blog – WP Only
Commerce Pages
• Consultant Profile Page & Flyout profile card in Desktop NAV
• Catalogs Page – Utilize third party pdf viewer plugin
• PLP (Product Listing Page)
• PDP (Product Display Page)
• Shopping Cart
• Consultant Search (Pre Checkout)
• Checkout – All User Flow Variants
• Customer Account Portal
• Consultant Profile Page & Flyout profile card in Desktop NAV
• Catalogs Page – Utilize third party pdf viewer plugin
• PLP (Product Listing Page)
• PDP (Product Display Page)
• Shopping Cart
• Consultant Search (Pre Checkout)
• Checkout – All User Flow Variants
• Customer Account Portal
Research
After project scope meetings and prior to design, I performed some competitive analysis using two criteria:
• Who are the direct sales leaders in the industry? (What are they doing well & what can we do better)
• What are the experiences like across competitors who are also on the PPS platform.
• What are the experiences like across competitors who are also on the PPS platform.
After combing through direct sales company websites (those using PPS platform and those not), I had enough insight into the business model and limitation of the technology to begin design sprints and stakeholder feedback loops.
Information Architecture
Prior to exploring design solutions for site navigation, I ran an open card sorting session with M&M stakeholders. Significant business restructuring had recently taken place and provided valuable information as we began grouping cards into category/subcategory units. Below are the results and final design solution. I plan to run two more card sorting sessions to further refine IA. One test will be sent to only M&M Consultants and the other will be sent to every day users.
Design System
Mary & Martha recently went through an extensive branding update. This, along with the redesign project was the perfect opportunity to develop a design system. I created and manage their design system to serve as a technical resource for not only the UX team but the Development team at DaySpring. The M&M Design System fosters design consistency across multiple designers, development accuracy, and workflow speed. All of which result in a better experience for the end user. Below is an image from one of the pages in the design system.
