Design process

The design process we followed began with a planning and prioritization phase, followed by sketching initial designs, holding collaborative design sessions, creating wireframes, and iterating as needed. We used a scaled agile methodology that allowed us to refactor and create new pages every two weeks.

Planning and prioritization

Before each design sprint it was my responsibility as the user experience product manager to meet with the product management team to determine which elements of the user experience would be developed next, taking into account the overall vision for the Digital Omni Channel Platform, as well as our resource capacity from a design perspective. 

Once the required pages and functionality requirements were determined and discussed, I would meet with the design team to determine how each page in our flow would be designed and determine if any new interactions or design patterns were needed. This process usually entailed looking at competitor websites and other e-commerce sites online to determine what was being done for certain interactions across multiple sites. We’d also look up best practices and then come to a consensus on what interactions and page designs we preferred before designing our own interactions and pages that would match our project’s design language.

Sketching initial designs

In order to make sure everyone was on the same page and determine the optimal approach for our designs, I would sketch out preliminary ideas, keeping functional requirements in mind. The UX architects would also sketch their ideas and we would meet with the product management team to ensure there were no functional gaps, and agree as a team on a preferred design. If there were still questions, or if the experience at hand was extremely complex, collaborative design sessions would be held. 

One of many sketches I did for a features tab for a product details page.

Collaborative design sessions

One of the UX architects or I would generally facilitate these design sessions and we would include our UX lead, remote UX architects, the product management team, and the development team. During these sessions we worked through the functional requirements and technical limitations to come up with the optimal experience for the user.

In one instance, it was still unclear after the session how we would organize our filter categories on our shopping pages, so we conducted a card sorting activity and asked a couple coworkers to choose their top filtering categories when shopping for phones and phone accessories. The results helped us identify categories we definitely needed to include, and ones we could leave out with little impact.

The results of one coworker card sorting the most important filter categories for him when shopping for phones online.  The numbers represent the order of importance.

Wireframe creation

During the wireframing process, the UX architects were responsible for designing and creating the interaction and pages that had been discussed before the beginning of the Sprint. In some cases, there were still questions. Therefore, either I or one of the UX architects would schedule a meeting between the product management team and design team to determine how we should proceed.

The final design of the features tab on the product details page.

Software / Skills used:
Axure, Omnigraffle, OneNote