In this project we used a scaled agile methodology to quickly execute and easily iterate on previous designs in future sprints. Our design process started with feature planning and prioritization leading up to the actual design sprint, where my User Experience Product Managers would meet with the Product Management team and help define what features would be worked on in the next sprint based on the overall experience for the Digital Omni Channel Platform and the UX team’s capacity.
I worked closely with my UX PM duo to gain an early understanding of the features that were coming down the pipeline, gave feedback when I could (some sprints were crazier than others), but I had full confidence that they were fleshing out the functionality, basic layout, and requirements of the pages.
During the planning and prioritization phase that my UX PM’s completed, they would sketch out possible design solutions to better convey to me what the requirements were. Early on in my role on this project, one of our PM’s was on extended leave and I was completing the initial sketches while my UX PM was focused on requirements gathering. When arriving at an initial sketch we would often times perform competitive analysis within the industry and other eCommerce sites to analyze interaction patterns and to find an approach we wanted to use that worked with our visual design language and existing experiences.
Collaborative Design Sessions & Wireframe creation
Once the functionality, basic layout and requirements were as fleshed out as much as possible, I would start working on the wireframes with the help of one of our near shore resources. Often times there would be some straight forward pages that needed to be created, while other times there were some that were incredibly complex. For the really complex experiences we needed at least one Collaborative Design Session to come together with our UX Lead, our near shore UX Architect, the Product Management, Architecture and Development teams to fully understand not only the functional requirements and intended user experience, but also the potential limitations by the Architecture and Development teams.
In depth process
Competitive Analysis/Audit & Card sort
One of the specific experiences I worked on was the filtering experience for Phones and Phone Accessories. The Product Management team came up with an initial list of possible filters, but we wanted to validate that list amongst similar sites within the same industry as well as perform a quick card sort to see how a few of our coworkers would use and prioritize filter options when purchasing a phone or phone accessories.
Below are the results of the two participants for our card sorting activity:
Following the card sort and audit activities, I used stickies and a white board to analyze the ranking and popularity of similar filter options used for Phones and Phone Accessories.
The yellow stickies are the frequency rank of the occurrence of filter options we discovered in our audit of similar telecom and eCommerce experiences, the orange stickies are the filter options that the Product Management team originally proposed, and the two columns of pink stickies are the prioritized results based on the two card sort participants.
I tried to create a list of the top 6 or 7 filter options that would provide enough filter options that users cared about and helped them in their decision making process, but not so many that would be overwhelming. This also allowed us to understand which filter options we could leave out with little impact on the user’s filtering experience.
I promise there was a method to my madness in how I analyzed the ranking and popularity above, which may or may not have actually been statistically accurate, but it worked for our purposes and helped validate the PM team’s proposed list of filter options.
The resulting filters for Phone were:
- Operating System
- Customer Ratings
The resulting filters for Phone Accessories were:
- Device Compatibility (search option)
- Customer Rating
Once we finalized the list for the filter options, we came back together and hashed out the data points for each filter option with the PM team and were able to start the wireframing at that point.
Initial sketch of the filters:
I really thought I liked and wanted to try out the toggle/button look and a multiple column approach, but after seeing it in my initial sketch for the design I opted to go for a more traditional design with checkboxes, but included the counts of the items in parentheses to give the user a preview of how many items they would be getting back by selecting that filter.
The final design was a scrollable pop up filter menu.