Coordinating UX design across time zones.

In 2014 I joined Love with Food, a subscription service and eCommerce company that donated meals to a food bank for each snack sold. They were seeing a growth in mobile traffic and wanted to launch a responsive redesign of their site. My background optimizing eCommerce sites matched their requirements for a designer. My main ? The company was headquartered in California, but the team was spread across the United States and abroad in Asia. Our schedules overlapped for only a few hours each day. There’s no substitute for in-person co-creation, but many design activities can work remotely. Some techniques can even be adapted to operate asynchronously.

Here, I’ll walk through how our team handled the redesign of the homepage — what worked for us, and what didn’t — and how what we learned impacted our approach to the rest of the site.

Image of the original homepage before the redesign. The CEO wanted to undergo a responsive redesign to help visitors better understand the specific benefits of becoming a member.

Subject-matter expert videos

I set the stage by interviewing the team’s subject matter experts and extracting highlights to share with the team. I did this to ensure we’d identified the right challenge before starting on a solution. It helps to compose a cross-functional team and have each subject matter expert debrief the team on their most critical issues. It may be advised to kick-off the project in-person, but for our team that wasn’t an option

I extracted highlights from recorded SME interviews and created a video playlist in order to align the team on our most important goals.

I uploaded highlights from the SME interviews to a private YouTube playlist and shared it with the team as a brief for ideation. We agreed that our main goal was to improve the experience for mobile users while at the same time helping new visitors better understand the benefits of becoming a Love With Food member. This got everyone on the same page so that we could make the best use of our time in person.

user interviews

The most challenging part of collaborative problem-solving is maintaining a shared view of the facts. User research helps designers gain alignment by using data to help overcome internal politics. We agreed to spend a limited amount of time interviewing users and creating a set of personas to help guide our future .

I wanted to first quickly understand the attributes that differentiated our user segments so that we could better target our interviews. We developed a questionnaire for our members focusing on what motivated users to sign up. We analyzed the responses and coded the data based on patterns we saw. Through factor analysis, we discovered two distinct personas, one that cared about having a steady flow of “on the go” snacks and another that used the service to discover new snacks they could later buy. I used the data from the survey to reach out to users that well represented our segments and asked to interview them over Google Hangouts.

The survey data was useful for uncovering patterns in the motivations of our users, but it didn’t tell us much about their experience with the service.

I led 9 user interviews and produced from each a 30-minute video for the team to watch. The team was invited to code and share their observations, and I compared and contrasted the interviews to define my own set of observations from the data. Members that were motived by having a steady flow of snacks also enjoyed introducing friends and co-workers to new and original junk-free snacks. Parents that used the service to discover family-friendly snacks tended to buy snacks they liked locally if they happen to run into them at the grocery store. Participants mentioned that not knowing what would be in the box made them apprehensive at first, but that they later came to enjoy the feeling of opening a mystery box of junk-free snacks each month.

Designers use fiction writing as a strategic communication tool to make research data more memorable and actionable. Personas are often used by both designers and marketers with no clear standard on how they work across disciplines.

I shared a report with the team, which compiled our learnings from the questionnaire and interviews. This is where I ran into some trouble. While the data indicated two personas, our marketing team’s social media efforts were aimed at a customer segment not represented in either. I chose not to push back on their feedback and instead helped them define the third proto-persona. If I had spent more time up-front capturing existing assumptions, perhaps by starting with proto-personas, I could have avoided having to supplement the report later. Alternatively, you could use scenarios and storyboards, that way sidestepping pervasive misconceptions about personas.

Asynchronous co-creation

Working remotely across different time-zones imposes definite constraints on a team’s ability to collaborate and co-create. To make the most of my team’s time, I led alignment-building activities asynchronously. I used playlists to guide asynchronous collaboration by recording myself walking through design exercises. We used our time together to converge on the best solutions and to inspire new rounds iteration.

Working asynchronously lowers the barrier to entry for design, inviting everyone into the process. Stakeholders could participate independently, in a comfortable space, and at a convenient time for them.
We set clear boundaries for solo work to discourage group-think and enable us to uncover more nuanced ideas from the team. I would upload the solo work to our digital whiteboard, where we’d come together for speed rounds of dot-voting and critique.

I created a high-fidelity prototype to resolve any outstanding ambiguity and then tested the design with unmoderated usability studies. I coded the results of the usability tests and clipped highlights from the sessions to share with the team. The insights gained from the research inspired more rounds of brainstorming. After a few iterations, the team was happy with the results we got from our participants, and I moved on to building the front-end.

Documenting a design system

Great documentation helps a team move faster by having go-to standards for established situations. I broke down the new designs into reusable components, so we could lower development cost over time. I used a JavaScript templating language to make alternative options for each component and describe dependencies. These global elements could be used across the site, putting us on the path to a full redesign.

Documenting design system became increasingly important for us, as our engineers were remote and needed autonomy to be effective.

Once the UI components were built, the engineers implemented them on the homepage and re-used the header and footer across the site. We ran A/B tests to measure impact and found that our first few major changes to the site led to a 60% lift in sign-up conversions. Using behavioral analytics allowed the team to set clear goals and quickly align on when new updates were enough.

Having an established design system allowed us to quickly redesign other parts of the site. A large percentage of customer service calls were related to updating account information; this led us to focus on the “My Account” pages. Unmoderated usability studies revealed that top tasks, like updating shipping addresses, had completion rates below 30%. The redesigned account pages did much better, with 8 out of 8 participants being able to complete top tasks.

Source link


Please enter your comment!
Please enter your name here