Running a remote ideation session for the first time

Luis Ouriach
8px Magazine
Published in
7 min readApr 14, 2020
Hero image showing iPhone mockups with cursors on top.

At Upgrade Pack, the product team sits across a few desk banks, meaning that we’re always a chair spin or hand wave away from from collaboration.

Our approach to product development is open — if you have a question, go ahead and ask the person closest to the source. This could be our VP or Product, designers, engineers, or even commercial and sales teams; the wealth of knowledge at your fingertips within an organisation is vast, so we try to ensure it’s shared at every opportunity.

If we are required to gather opinions from across the business, we’ve always been a whiteboard session away from driving something forward.

Sure, we’ve all worked from home every so often, but we haven’t been faced with the entire team being out of the office since the company’s inception and with this removes the tactility of an office environment

Big, scary remote work 🙀

How has our approach changed since we’ve started to work remotely?

The standup

Guess what! We’re actually having design standups. Although light touch, the product team has a call (video optional) every morning to discuss what we were working on the previous day, and what we plan to do today.

It has rendered our weekly hour-long planning meeting redundant, because we’re all a lot closer to each other’s workflow now.

Cutting some Slack

With us having colleagues in Singapore, and a team that frequently dips in and out of the office, the entire business is already quite reliant on tools like Slack, Microsoft Teams, and Zoom.

What we’ve now found as we become even more distributed is that product decisions need to be documented somewhere central. This means that we’ve come to rely on tools such as Confluence more and more as a means of ensuring the knowledge we create is easily accessible to us all.

Although Confluence’s constant email updates for documents can feel like you’re being slapped round the face, it’s useful now that we have less in-person contact to know what our team members are creating.

Slack is for discussion, Confluence is for decisions.

Utilising our remote design tools

As mentioned in my previous article, our design team work exclusively within Figma for all of our user experience and visual jobs.

This migration couldn’t have come at a better time for our forced remote work and collaboration. We are now in a position to have full transparency over each other’s work…live.

If we’re working on something independently and need another point of view, that person can just jump right into the file and we can pick things up immediately.

Goodbye “which file has the latest version?”

A look into how we collaborate 🕵🏼‍♂️

Video conferencing software serves its purpose for…video conferencing, but falls short very fast if you want realtime face-to-face remote collaboration with your team. The limitations of Microsoft Teams et al is that you lose the video overlay on top of your screen if you switch to another tool.

Although this is mostly not an issue, I find it really hard to feel collaborative if I can’t see the person.

I did a little bit of research and came across Tandem. It’s a neat desktop tool that provides a persistent video across any app you use. It also highlights what your colleagues are looking at, which is both cool and creepy in equal measure.

Tandem are offering the tool for free during the Covid-10 pandemic, so you can go in and trial their full feature set without signing up to a subscription.

Figma and Tandem apps being used in unison.

Collaborate and listen

Myself, Neel khan our UX Designer and Julie our Product Manager decided to run a collaborative remote session using our design tool Figma, and our new sparkly video tool, Tandem.

We were starting a new project to improve the engagement potential of our home page, and this new setup was a perfect opportunity to run a remote ideation session.

Step #1 — Ideation

Sticky notes within Figma.

I started the session by firstly running a virtual sticky note session.

With our brief front and centre in our brand gold alongside some sticky note components, we were ready to interrogate the problem.

The three of us picked a sticky note colour, duplicated them, and went ahead to list out one of two things:

  1. Issues we currently have with our home page design
  2. Ideas on how we could encourage engagement on the page

We spent about 5–10 minutes creating these sticky notes until we were in a position to start noticing some trends.

With our ideas on the page, we then discussed how we could start to group the ideas. There were 4 distinct flavours of idea, so we pulled them together into 4 channels and we were then able to move onto the next part of the process.

The competitive landscape

We’d written down our ideas, grouped them into logical categories, and now were in a position to head out into the market to see if any of our peers were approaching the problem in a similar or even better, a different way.

We collected screenshots and made short notes alongside them, then caught up again to discuss what we’d found and what did and didn’t work.

Our competitor lanscape inside Figma.

Based on the most up-voted stickies from our ideation session, we prioritised a few directions so we could deliver something to the team quickly.

Wireframin’

At this point, our UX Designer Neel set off to mock up some loose wireframes in order to flesh out our chosen directions.

These were good to inform us of the types of content we could include and also their spatial limitations within our app form factor.

This wasn’t the time to start thinking about writing content, or building prototypes for us, it was more exploring our options so we could see the tangibility of our ideas and start to flesh out a potential MVP approach to the task.

Let’s get visual, visual

At this point, it was handed back to me to flesh out some of Neel’s wireframes before presenting back to the team.

I had a firm “let’s not over-design this” mindset here, so didn’t dive too far down the rabbit hole of interactions and prototyping. It’s at the point of product and engineering team sign-off that we’d introduce prototypes for something like this.

Taking the wireframes, I overlaid our brand style and component rules to bring things to life, Upgrade Pack style. This meant soft rounded edges, accessible colour combinations, and vivid photography. Our business enables a rich lifestyle, so we want to try and showcase that as much as possible going forward in our designs.

A snapshot of the mocked up visuals.

Team, assemble

With the visuals fleshed out for our chosen design routes, it was time to present back to the team.

Over video call, we ran the product team through our process up to that point, how we operated as a unit and our conclusions from the tasks. The team were really happy with how we’d shaped the work out, and the next steps will be to loop in our tech team to understand the landscape of our ideas — what will work, what won’t work?

This was the first time our team has collaborated remotely, and with a short delivery period of 4 days, we set ourselves a fast but productive schedule to work towards.

Learnings

With any remote work, communication can always be improved. We were fortunate on this project to all be focussed on the outputs together, so we chased each other every day to ensure we were still on track.

Despite this, we could certainly have encouraged a more documented approach to our decision making. As mentioned, we make heavy use of Confluence to store our product decisions, and this is where we will need to be spending more time in the future when running these types of sessions.

Next steps

Having tested out our tools and landed on a format that works, we are in a position to document this within our product Confluence project, so that others who join the team have an understanding of how we like to run remote sessions.

Here’s the 7 step process:

  1. Ideation session over a video call
  2. Grouping of idea themes
  3. Dot voting
  4. Competitive / peer research
  5. Wireframing
  6. Fleshing out of visuals
  7. Team presentation

As for the project, the next steps are to involve our tech team, and then push the designs further with this anticipated feedback. Once we’ve finished up there, we will be in a position to prioritise the work and start feeding our ideas into the tech sprints.

Thanks for reading!

--

--

Luis Ouriach
8px Magazine

Design and community @FigmaDesign, newsletter writer, co-host @thenoisepod, creator of @8pxmag. Sarcastic.