External Goals
Demos that shine
Customers have a plausible storefront
Showcase the platform and scenarios
Internal Goals
Stress test the authoring tools
Provide a north star for measuring success
My Role
Throughout this project I reference 'we' which is myself and one other designer. I have been leading this project in terms of strategy for the website, overall look + feel, site information architecture, illustration/branding and prototyping.
Unless expressly stated, I am the primary visual/UI designer on all the screenshots below with support from my colleague. I will reference where my colleague was the primary designer and I provided support/feedback where necessary in order to fully tell the project story.
End-to-End User Flow
This is the final designs myself and my co-designer came up with, iterated from various aspects throughout the design process. This includes the design system, proper colors, fonts and iconography, menu levels, and many ideas for features that could be integrated into the Dynamics 365 site-building platform.
Information Architecture
We began by creating an information architecture based on the goals previously set out. This IA was an iterative process that we continued to update as the direction of the brand/website changed.
Competitor Analysis
We spent a lot of time going through other websites and finding/separating the brands and features into what we liked and wanted to bring into our site, what we wanted to draw inspiration from and iterate from, and what we didn't feel we needed.
Inspiration Boards
As well as creating competitor analyses, we created inspiration boards that featured specific features from around the web and a short description as to what we liked about each feature example and how we would like to use that as inspiration for our product.
Customer Journeys
We developed various customer journeys that kept us on track for our page flows over the weeks. These journeys were changed a bit in the process, but mainly stayed the same as we developed various customer flows.
Personas
One piece that was important for the leadership team on this project was to make sure the website felt authentic and told a brand story. Because of that, we spent a good amount of time researching competitor personas and integrating them into our personas. We found a great resource that laid out the modern adventure brand's personas, so we were able to adapt those.
Brand Development
Going along with creating an authentic web experience, we spent time developing and standardizing the logo, type ramp, iconography, brand personality and vision, and colors. This kept us moving forward toward our northern star by telling the brand story throughout the site.
Components
Creating the components was another piece of iterative design. We created various components that we could use in order to test other aspects of our webpages.
Homepage Designs
Iterations of the Homepage, starting with being product focused and moving towards brand-focused storytelling.
Search Function
Initial idea for a search takeover, exploring the category results page, and a no-product page.
Category Page
We created various iterations of the category page, focusing on the user journey going through the 'Search' feature for some iterations. We looked at various filtering options, what the cards would look like next to each other, different ways of presenting products, adding brand/storytelling features into the page, and how the Quick Buy feature would interact with the page. We also tested a right drawer option for all selectors to maintain the design language we'd been developing.
Megamenu
One important aspect of this project was creating a megamenu that could showcase the ability for the menu to hold up to 5 levels. We played around with having a takeover menu but changed that to be a left drawer that is less of a takeover, but part of the design language we've been building that relies on left and right drawers. We also decided to have the ability for side cards that can hold photo selectors for added versatility.
Reviews
Exploration of how the reviews would fit into the Product Description Page, how to write a review and what the review confirmation would look like.
Classes & Activities Page
Part of the brand storytelling we explored was creating a feature for finding classes and events, signing up for those events based on location and date, and paying online all in one user flow that would not interrupt the shopping experience. We also decided to integrate the classes & events experience into the category and search flow.
Cart & MiniCart
I worked on the cart explorations after we decided on the rest of the user flow. My counterpart worked on the minicart explorations. Together we worked to create a seamless MiniCart-to-Cart flow.
Cart Flow
Exploration into the cart/checkout flow.
Membership Sign Up
Exploration into what signing up for a membership looks like. An important feature was the ability to have a full-bleed image as a background.
Filter Exploration
Looked into what a filter feature could hold, where it would be a takeover on mobile and a right drawer on web, and various ways to hold dynamic content.
Store Locator
One feature that currently doesn't exist is the store locator, which translates then to the pickup in store feature.
Popups
Exploration into the standardization of popups being a left drawer that has the same motion but is a design that easily differentiates a popup from any other left drawers.
Prototyping in Figma
Gifs, Animations and Prototype Examples