mypeople · Design Evolution

It was a relatively normal March morning when I found myself opening LinkedIn for the first time in, probably, 3 or 4 months.

I skimmed the feed – a few interesting job updates here and there. I then tapped on a tab on the bottom of the screen with a round, red, badge. I was immediately greeted by 15 outstanding connection requests.

As I tirelessly tapped “I don’t know this person” 15 times, I vividly recall thinking to myself “What is the point of connecting anyways?” When was the last time I had ever followed up with someone I had connected with on LinkedIn? Despite the validity of that question, it still seems to be a fact of life that first conversations always end with “Let’s keep in touch!” followed by a prompt LinkedIn connection request.

For me, LinkedIn serves as a reminder that we all crave the satisfaction of expanding our social horizon and reconnecting with friends of old – and yet, connecting on LinkedIn is by no means a solution which guarantees that we’ll always be in touch with the people we care about. If one were to truly leverage all of the talented people in their life, the possibilities would be endless!

After growing tired of the disjointed, roll-your-own nature of maintaining personal and professional relationships through notes apps, contact books, emails and text messages, and (*shudder*) LinkedIn connection requests, I set out to craft a simplified, thoughtful approach for keeping in touch with my ever-growing network. mypeople was born.

A few decisions were made out-the-gate. First and foremost, I elected to design a desktop web application as the first version of mypeople. Designing for web meant imagining a system that could be used anywhere with an Internet connection, without the friction of downloading an app, and with the range of control enabled by a larger desktop screen.

I also decided, from the beginning, to provide an initial scope of a target audience for the platform. Although better maintaining personal and professional relationships is something anyone could benefit from, it is the busy young professionals starting their careers, ages 20-30, who would benefit the most from leveraging their relationships more intentionally.

Finally, I made a conscious decision my initial sketches with intention to tell a story by design.

These notes represent ideas for the story of mypeople. I ultimately elected to portray a feeling of intentionality, intimacy, and humility: “When you say ‘see you later,’ mean it!”

The Early Design Process

Story in hand, I began sketching some of the earliest concept designs for mypeople. At this stage in the design process, I was less concerned with form and function as I was with intention and evocation of emotion.

Even in these earliest sketches, the commitment to build an intimate, private experience is visible; personable copy such as “What do you need today, [insert name]?” and delightful “Reconnect with [insert name]” banners served as the initial representations of the story I set out to elucidate through the product’s design.

I knew early-on that the design system I would soon build would be critical to making this web-app feel as intimate as I hoped it would feel. Copy and overall structure were important to establishing a baseline understanding of the intention behind the platform, but color, typography, and component design would make or break the emotional response I hoped to elicit from the user. Because I felt so strongly about the importance behind these design decisions, I built the earliest iterations of the mypeople design system relatively early in the design process.

Color

The initial colors of mypeople were chosen to embrace simplicity with measured boldness and contrast. I envisioned that the bulk of the design would feature a mute dark gray background, off-white text, and splashes of bright color to highlight key actions and especially pertinent information.

At this time, I also elected to use a bright blue as the primary “action” color in the system. Accented by a bold purple, this primary blue color had enough weight to draw attention without the intensity of a red, orange, or even green.

Typography

When selecting a primary font, my first priority was to maintain the intimacy of a system which would be akin to a personal black book or journal. Quicksand, a display sans-serif with round terminals, felt playful but also intentional, making me feel the personality of the system while also maintaining a level of earnestness.

Components

The simplicity of the experience I hoped to soon prototype did not demand many components to be created, but I did create a standard design system for buttons, cards, and icons.

I created two buttons, primary and secondary, utilizing slight gradients and the primary blue color I had chosen as the differentiating color of the system. My intention was to use the primary button very sparingly; only actions which were especially relevant, and only ever one per page. The secondary button would be used more broadly to indicate clickable actions.

I only created a single card type at this stage in the design process. The primary card features a white “glassy” background (which slightly blurs the body underneath it) as well as an ever-so-subtle border to enclose the blurred background.

Glass Card designs, themes, templates and downloadable graphic elements on  Dribbble

I’ve always been inspired by these “frosted glass” card types. Personal infatuation aside, I felt that mypeople could benefit from this style because it gives a physicality to the interface. It makes the interface feel grounded in the same rules of space and visual hierarchy that govern the real world.

The icons I chose come from the Eva icon pack. The icon pack matches beautifully with the Quicksand font, in my opinion!

The First Prototype

Design system and a cup of coffee in hand on a warm April afternoon, I set out to build the first prototype of mypeople.

The prototype I produced (and would later iterate on) is based on the task I saw as the highest-risk to the success of mypeople: Could first-time users successfully seek out a person in their network to help them with a particular want or need?

Iteration

Immediately upon producing this first prototype, I collaborated with a colleague in the field of design to make early iterations… I’m glad that I did!

Despite the intention behind the design decisions I had made, it became clear rather quickly that the system was difficulty to build a mental model around.

  • Where do these updates come from?
  • Who are these people?
  • Is this a social network?
  • What can I type into this search box?
  • What are “connections?”
  • What is public, and what is private?
  • What did I add, and what was added automatically?
  • How do I quickly add a “connection?”

Despite my colleague appreciating the appearance of the design itself, he was left totally confused by the function of the application itself – a major red-flag in user-interface design. I thanked him, took the notes I had jotted down, and immediately set out to make a series of quick enhancements to increase clarity of the system:

  • Updates have an associated social media icon
  • “Last connected” made distinct from the timestamp of an update
  • “Connection” → “Note”
  • Show where searched people’s notes come from
  • Move manual notes to right-side, chat-style
  • Add Quick Note button (non-functional)
  • Switched to light mode (more on this later)

These enhancements implemented, I set out for a bigger test: potential user interviews.

User Interviews

I chose to conduct two initial user interviews, 20 minutes each, to test the primary task which I had prototyped the mypeople solution for. I adapted Steve Krug’s well-known usability test script, prepared a task script to prompt participants to complete, and found my two interview participants.

Task: Imagine you’re interested in getting some recommendations from someone you know for a new, fun video game to purchase. You come to mypeople. to find someone who can give you a solid recommendation.

You arrive at this page. Find a recommendation for a video game!

The two students I interviewed, fellow college students, have experience networking through LinkedIn and other conventional means but don’t otherwise have systems for intentionally maintaining personal and professional connections. Their feedback proved to be instrumental.

Coming out of these interviews, I made a list of 10 usability issues, filtered and prioritized them, estimated the complexity of a solution to each, and ultimately pinpointed 5 issues I intended to fix to dramatically improve mypeople:

  1. What is a “note”? The wording is confusing to people.
    • “Notes are critical to the function of the search bar – without them, you wouldn’t be able to find people based on previous interactions. ‘Fixing’ them is very important.”
    • Fix: Make the notes timeline feel less like a feed and more like ad-hoc note-taking.
  2. Users aren’t sure at all what information is public and what is private to them.
    • “This is meant to be a totally confidential experience. The fact that any users feel that this is a public thing is a bad thing!”
    • Fix: Remove message-like UI in timeline. Moving to dark-mode and a sharper font might make it feel like more of an intimate experience…
  3. The Contact button was assumed to send a DM rather than use existing contact methods like phone/email.
    • “Contacting is an important part of the task of finding someone based on a particular need or want. I should build it out.”
    • Fix: Build the contact page so users can click on it and see what it looks like.
  4. Users saw this as a social media site rather than a private experience.
    • “Like #2, there should be no hint that this is something other people will see, otherwise users will be afraid to be honest with their notes.”
    • Fix: Replace all copy that insinuates that a contact of yours posted something on their own accord, i.e. change “John Smith updated his bio” to some generic “John Smith Twitter bio update.” Also make job titles be more personal connections.
  5. “Last connected” is a confusing concept. What does it mean?
    • “This has been a constant point of confusion. Ultimately, I realized that this doesn’t provide much value to the core search experience. Removing it feels like a positive fix for comprehension.”
    • Fix: Remove “last connected.”

An aside: Fix #2 marked the 2nd complete switch back to a dark mode interface after stints on light mode. I ultimately settled on using dark mode after choosing light mode for clarity and comprehension because the darker interface made users feel that the system was more private.

Finalized Design

The result of this iterative design process, featuring open collaboration and user interviews, is a final design I am very proud of; a system which, I hope, feels like an intimate way to maintain relationships with the many people that touch our lives.

I’m especially proud of this final design because it exhibits two personal values I deeply care about: freedom and optimism. The mypeople design emphasizes personal freedom through both form and function: the design system is minimal but features bold colors that highlight a variety of choices, and the powerful search bar at the top allows users to use the system in whatever way they please. The design also emphasizes optimism through the possibilities to connect that it highlights. The system is built to help you connect with the people in your life at a deeper level – I hope the design serves to reflect this purpose.


In summary, this entire process demonstrates how impactful it is to validate basic design assumptions with potential users. Despite having such strong intentions behind the earliest designs of mypeople, I came to realize the many ways in which I had miscalculated how to achieve the vision of the product I had been motivated to design.

Only through empathy with users can I (and any designer!) bridge the gap between intention and function.

Leave a comment

Your email address will not be published. Required fields are marked *