Design Challenge Prompt

LinkedIn has learned that their users want a way to schedule meetings via in-app messaging.

For example, Mark is considering a job change and wants to consult his mentor, Sarah, to get her advice. He knows Sarah is active on LinkedIn and worries an email might get lost in her inbox. Mark wants to invite Sarah to a Zoom meeting for either Thursday or Friday morning.

Your deliverable should include your solution and an articulation of how you got there.

Timeline: 5 days, December 2020

Breaking down the challenge.

Knowing that I would have 5 days to complete a relatively full design cycle, my first priority was to scope the deliverable and devise a preliminary strategy.

To do this, I dissected the prompt as shown below.

Prompt above is modified for brevity but the language holds.

---

Quick empathy.

Since LinkedIn had already done enough research to understand the user problem and devise a high-level solution (in-app messaging scheduler) but I did not get a briefing on these findings, I decided to gain some quick empathy by conducting lightweight interviews with friends and family.

My goal was to collect a couple more stories to layer on top of the example of Mark and Sarah from the prompt. I ended up continuing to discuss my work at each step with these three wonderful participants. Here are their stories:

THE SALESMAN

Finding new customers

"I usually use LinkedIn to source and request meetings with potential customers.

I start with a short pitch in the invite request and if they accept my invitation then I'll follow up with the details and request a call or meeting.

Usually I give them my phone number and a time to call and then if that goes well I ask for a Zoom or in-person follow up."

THE FINANCIER

Catch up with old colleagues

"The last time I used messaging on LinkedIn was when I was thinking about changing firms.

I had a couple options, so I messaged some old colleagues who worked with me at [her last firm] since they had moved to the firms I was looking at.

Depending on where they were, they'd either give me their cell or we'd meet at a Starbucks or something."

THE STUDENT

Networking with alumni

"Networking is so much easier now that there's Zoom, but before the pandemic it was a lot of work to set up actual coffee chats...

Connecting on LinkedIn and messaging is fine, but meeting up in person is always a challenge. You just keep going back and forth to figure out a good location for the other person - because you asked for their time, so you have to accommodate... then you try to meet up... it's awkward."

Preliminary Journey Synthesis

To quickly synthesize my initial thoughts from these conversations, I built two journey maps: 1) scheduling the meeting and 2) executing the meeting.

Journey #1: Scheduling the Meeting

This map helped me understand the complexity of scheduling. Later I explore a more in-depth user flow mapping of this journey.

Journey #2: Executing the Meeting

I tabled this journey map since it felt tangential to the goal of this design challenge: schedule meetings via LinkedIn messaging.

Scoping the Challenge

Plan a complete feature, execute the example.

After a quick journey mapping exercise, I realized that building a comprehensive scheduler would be a time-intensive project given all the choices that come up while scheduling a meeting.

I decided to emphasize process by thinking through all these user decisions in low fidelity and then utilizing the provided example with Sarah and Mark as a framework for scoping my high fidelity work.

Comparator Analyses

I realized that scheduling is a canonical UI/UX task, so to gain a solid foundation for the process I chose to evaluate email-integrated calendar apps and scheduling apps.

This exercise helped me ensure that I didn't miss any important steps and also helped me understand the nuances between scheduling with certainty (calendar) vs. uncertainty (scheduling apps) without having to do more user interviews.

One takeaway came from Calendly. They offer 9 options for the "location" of the meeting, which made me think about how I might offer all possibile options at each step.

---

LinkedIn Messaging Evaluation

Since I was in the UI analysis mode from the comparators and I knew that I would need to make the UX of my scheduling feature fit well with the existing UX of LinkedIn messaging, I chose to also analyze LinkedIn messaging to get a feel for their approach to integrations.

This analysis showed me that the scheduling feature should be a series of modals (with dimmed background) for desktop, which would be a fairly simple adaptation from a mobile design.

---

Information Architecture and User Flows

During my comparator analyses, I noticed the scheduling process is information and option dense. It is also a process that progresses in phases. With this realization, I decided exercises in information architecture and user flow optimization would be helpful before thinking about on-screen aspects.

-

Laying out and sorting all the pieces.

You could think of this as a card sorting type of exercise. I wrote down all the different pieces of info that could be relevant in the scheduling process and then sorted these pieces into different categories, which ended up helping me frame the different phases of scheduling.

I iterated on these categories as I built out flows and wireframes, but this IA exercise helped me set a foundation and keep myself organized so as to not miss anything important.

<< Progression of the steps in my IA exercise.

Configuring (and reconfiguring) flows

After grouping the relevant pieces of information by phase in the scheduling process, I ordered (and then reordered) all these phases to get a logical and natural user flow. Throughout the process, I consulted my initial 3 users for feedback on any adjustments I was making.

Scheduling Flow, Version 1.

This is my first attempt at distilling the IA and user journey into a scheduling flow.

Some notable learnings from exercise:

  • The mental model for scheduling is: 1) HIGH-LEVEL (topic, plans, etc.) then 2) LOGISTICAL (where and when).
  • Scheduling is a two-way process. There is a flow for initiating and subsequent engagement flows for confirmation.
  • There are many moments that could send the user to external or tangential flows (integrations, before and after flows, etc).

Reconfigured, Version 2.

I made some adjustments in Version 2 to address my learnings from the first iteration (above).

Some notable changes:

  • Clearer designation of external flows, options, and actions to denote where the user exits and where they make decisions.
  • Disbanded into 3 distinct flows: 1) scheduling initiation, 2) receiver confirmation, 3) sender confirmation.
  • Reordered phases putting "Meeting Details" closer to the beginning since users indicated that meeting details were more high-level.

As the speech bubbles in Version 2 imply, I still had some reservations about this flow, but I felt these uncertainties could be better comprehended in low-fidelity screen sketches. It was time to breathe life into the idea.

---

Exploring on-screen flows in low-fidelity.

Since scheduling is a fairly canonical UI/UX task, I used these low-fidelity sketches to breathe life into what the experience might feel like rather than explore broadly. This was more of a paper prototype approach than an ideation sketching exercise. In a more traditional sketching phase for a novel concept, I draw to explore ideas, but this process was more about feeling the flows and exploring different ways of delivering small pieces of the scheduling process.

---

Optimizing UX in medium fidelity wireframes.

Once I felt confident in my sketching explorations and edits, I jumped into grayscale wireframing to test UI concepts and get more user feedback on the actual app experience. You can explore my 3 flows in medium fidelity in the Figma below.

To speed up the process and finish in 5 days, I didn't make any new iterations in med-fi. Instead I took my learnings from user testing and applied them to my high fidelity mockups. My most notable adjustments came in the part of the flow when the user must set up their availability.

Visual Design

Maintaining a visual language.

Since this feature would be integrated into LinkedIn's existing platform, I wanted to be sure that the visual design was consistent with the company's brand. To do this, I took screenshots of the mobile app messaging feature and extracted colors and UI patterns.

-

Schedule an event in messaging.

Using the example from the design challenge prompt, here Mark is inviting Sarah to a Zoom meeting to get her advice on his career.

The recipient confirms the meeting.

Sarah receives Mark's message and confirms the meeting by selecting a time from Mark's availability that works for her. This sends her confirmation back to Mark via messaging.

Sender confirms, all set!

To close the communication loop, Mark confirms that the time Sarah selected still works for him and both parties feel mutually confident in their plans.

<< (Pardon the weird line, Kapwing keeps adding it to the gif for some unknown reason)

Parting thoughts

With more time, I'd have liked to iterate more on the scheduler navigation in medium fidelity. I think having a page-by-page process with substeps requires thoughtful navigation, and with more user testing this could have been perfected.

Additionally, there are some interesting challenges around the in-person meet-up scheduling as well as flows for when it comes time to actually execute the meeting. Both of these would be fun problems to tackle with more time.

Overall happy with how this turned out; thanks for reading along!

Up Next