Design problem

This project was born out of the need to unify the e-commerce experiences for a client's customers, retail, and customer care center channels so that the client's overall customer experience could be improved. This wasn't just a problem at one client though, it was an issue across several clients. Hence, there was a need to create an overarching solution that could later be customized according to client needs.

 

Methods: Agile, Axure RP Pro 8 Prototyping, Responsive Design, Material Design

Tools: Axure RP Pro 8, Sketch

Timeline: August 2016 - September 2016; March 2017 - August 2017

Project roles: User Experience Architect, Creative Team Project Manager

Contributions:

  • Led design sessions
  • Card sorting
  • Meeting coordination
  • Requirements analysis
  • Kanban maintenance
  • Axure RP prototype creation
  • Conversion of Sketch components into Axure RP Pro 8

Solution

The solution was to create a responsive e-commerce experience that would span a client's retail, customer care, and customer channels. The end result was an online experience where everyone sees the same thing, and the overall customer experience is improved due to the reduced confusion between the client's employees and customers.


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 creative team project 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
 

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 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.


Prototyping

I was heavily involved in the prototyping process. I worked with fellow designers from Fjord to create an Axure Prototype that was interactive and followed Google's Material Design methodology. As I worked, I incorporated the style guide designs that were created by the visual designer into the final prototype.


What I learned

Always voice your ideas

I learned that voicing my ideas on how to improve a design or how to create a design solution is something I needed to do more. I had been holding back since I wasn’t sure if doing something would be a good idea, but the only way to see if it’s a good idea is to share my thoughts. Once I began to share my ideas more, I learned which ideas the team preferred, and how to build upon those same ideas to create a better experience for our end users.

Have reasons to persuade people to follow your thinking

I learned that the best way to convince a client or stakeholder to go with one of my ideas, especially if they’re from your own company, is to have a valid reason. It’s also important to share your reason with your fellow designers so they can support you and your idea. This came up in situations where the client was requesting features for our product that I knew didn't add any value to the customer experience. The features would actually make the experience worse for customers rather than making it better. Knowing this, I came up with several reasons not to include the features, told my manager to make sure they agreed with me, and then shared my ideas with the client to persuade them to not add the features they wanted.