Leadership, strategy, and communication on a team of three
Background
Smartpayer is developing a go-to-market strategy for a new fintech product, and they want us to design a landing page. The goal of this page is to gather emails from early adopters so Smartpayer can gauge interest in the product.
My role
We were a team of three designers: a researcher, a graphic design/branding specialist, and me. I wrote copy, worked on page layout from sketching through hi-fidelity, guided strategy in two significant ways, and managed the team.â¨â¨
Smartpayer CEO Gaurav Aggarwal  (Lightspeed fellow and Forbes 30 Under 30), said this about me:â¨â¨
âI think you managed the project really well and you were always on top of things. It was a pleasure working with you.â
Project overview
This was an end-to-end design of a landing page completed in four weeks by a team of three designers.
The client at Smartpayer wanted a âGen-Z type of feel,â and provided the outline of a logo for our graphics and branding specialist to built on. We conducted research, created sketches, wireframes, low fidelity, and high fidelity mockups, and we made notes about motion and breakpoints. We designed in lite mode for desktop web, and both dark and lite mode for mobile. We user tested prototypes and iterated on the designs, and we delivered a Sketch file.
The scope of this case study
I also participated heavily in the sketching, wireframe, low-fi, hi fi, and prototyping phases, but this case study is focussed on team leading and strategy.
I break it into three parts:
In four weeks, our team of three created this desktop design (and two mobile versions).
Internal communication
Our team was first assembled via email, but I wanted a more organized workspace so I opened one in Slack. I started off with three channels:
⢠Kickoff meeting ⢠Document links ⢠General chat
This helped us keep our conversations topical. Chat about the kickoff meeting (questions we wanted to answer, logistics, etc) stayed in a channel. Links to completed documents (like a competitive analysis or a screener survey) were posted in the Document links channel, and other âwater coolerâ chat happened in General. Iâd later add channels like âMusicâ and âNews articles,â specific channels for different meetings, a channel for aligning on our expectations for the final handoff, and a channel for organizing our discussions about multi-meeting projects like Hi-fi, survey questions, and finalizing deliverables.â¨â¨
We used the slack channel to communicate throughout the day and organize our documents. We also had twice weekly video check-ins before the client meetings, and we had co-working video sessions about 6 times in the course of the 4 week project.
Client meetings
The slack channel was for our internal team alignment. Weâd use it to set an agenda with the team, talk about the work, and chat back and forth about logistics. The client wasnât in our slack channel. â¨â¨We communicated with Smartpayer by having alignment meetings twice weekly.
Before a meeting: Iâd gather info with my team, get everyone on board with an agenda, know whoâs going to talk about what, and then communicate that agenda with the client in broad strokes.
During a meeting: Iâd act as emcee, guide our contact through the work we were showing, and take notes about changes we agreed to pursue.
After a meeting: Iâd wrap up with the team and make sure everyone knew what work weâd do for the coming days and when weâd meet next. Most work happened in 3 and 4 day cycles.
Kickoff
I'm not going to walk you through every meeting we had, but let's talk about kickoff.
The basic cadence for organizing communication was:
⢠Get my thoughts on paper ⢠Get the team aligned ⢠Get us and the client aligned
Iâd often write out several versions of things in different levels of detail and formalness. Â For the kickoff meeting, my goalsetting statement iterations looked like this:
Using the short list of questions as a guide, our team had an internal video call to brainstorm ahead of the kickoff meeting with Smartpayer. We came up with a list of 29 questions that we wanted to ask, and we were ready for kickoff the next day.
By the end of the kickoff meeting we knew about:
⢠The problem space ⢠Smartpayerâs goal ⢠How our project fit in the overall plan
Weâd established:
⢠A meeting rhythm ⢠Our individual roles on the project ⢠How we expected to communicate
Setting expectations for these things ahead of time (and saying those expectations out loud) helped the four week project run smoothly and deliver on time.
Iâm going to talk about two different areas of strategy thinking from the project:
⢠Module order ⢠Ethics
Module order
From the very beginning, I encouraged the team to think modularly. Thinking in modules allowed us to create each section as a cohesive unit, and then reorder those units for maximum impact.
This early iteration includes:
⢠Hero module ⢠Always use the right card ⢠Be spontaneous ⢠Be prepared ⢠Stay protected âredacted, to respect our NDAâ ⢠Reviews and quotes ⢠Pricing plans
We worked with closely with Smartpayer to set our colors as Primary = green, Secondary = purple by the end of week one. The fact that this exploration is blue shows just how early in the process we were thinking in modules!
Following the research
Our researcher conducted a card sort, and he grouped his cards into several categories for analysis. I wonât show all the cards, but these are the average rankings for each category:
I used those categories to organize our modules into section groups, ordering them by statistic importance. One exception is privacy. The module about security happens at the very end, so that's it's fresh in people's minds when they get to the second signup CTA module.
I gave the section groups names that help us remember what value they're driving for the customer:
⢠Makes what you have easier to manage ⢠Helps you manage your assets in the field ⢠Helps make desk research easier ⢠GPS helps suggest which card based on location, if offers apply
I also included the card sorting categories that informed each section group. The goal here was to always couple our work with the research, and show that each of our design steps drove real value.
Thinking in section groups led to an inverted-pyramid shaped flow; we aimed at capturing the max number of potential signups early on. We positioned the highest rated information first, then followed the research right on down the list as site visitors scroll deeper into the page.
Ethics
Ethics matter.
The core of ethical business behavior is taking care of people that interact with our products. Aside from it being the right thing to do, the reason for doing business ethically is to inspire customers to love giving us their money so that they'll want to do it over and over again.
On this project, I promoted ethical behavior in two ways:
⢠Nudging business behavior through module copy â ⢠Killing a feature that could be potentially harmful
Nudging business behavior through module copy
The module above  originally said, âGPS features find deals where you shop!â
Since privacy polled as the number one concern in our card sort, I wanted to address questions like, âCan I turn the GPS features off? Am I always being tracked?â
I brainstormed how we could assuage skepticsâ worries.
How can we make our users feel safer about using our products? Â How can we put more control in their hands?
Some options from the brainstorm were:â¨
None of these truly addressed the safety angle from a functional perspective. They weren't aimed at backend safety changes, they were aimed at soothing emotions.
While talking through this issue with the team, I wanted to know:
⢠How can we nudge the company to make the product functionally safer? ⢠Is there a way we can make this feature opt-out?
With those questions raised, it was a short leap from presenting GPS as opt-out to presenting it as opt-in. I rewrote the copy with a simple change:
âOpt-in GPS features find deals where you shop!â
60% of user testers expressed delight at the business taking an opt-in stance. We discussed these stats as an agenda item with Smartpayer. Designing the app itself is outside of the scope of this project, but Smartpayer signed off on the copy and we shipped it with no pushback. I recommended adding a GPS opt-in card in the onboarding flow.
Stopping trouble before it starts
One of Smartpayerâs features would trawl online blogs and send cool deals to users based on their credit cards. We discussed including a sharing feature to drive engagement and add a social aspect to finance. People could gamify their experience and rally their friends together to take advantage of awesome deals! What if you had the same credit card as your friend, and you could send them good deals you know theyâd be into?
On the surface, that seems great. Everybody was on board and excited, and we were moving full steam ahead. We worded the module announcing that feature to say something like "Have the same cards as your friends? Share the deals you find!"â¨â¨ Then I started thinking about edge cases and bad actors.
What if there's a specific credit card that has a specific vulnerability to exploit, and we have a grouping mechanism that links everyone with that card into a database? What happens to the people in that database if Smartpayerâs network gets hacked?
Strong cybersecurity is obviously an important line of defense, but smart planners prepare for disasters. Our job as designers isnât only to delight our users. Itâs our job to protect the users.
So I asked the question. Is the sharing feature integral to the experience? Do we need to include it?
I shared my thinking with the internal team first, and we agreed to bring it up with the client. I described our concerns, and the CEO gave the green light to cut the sharing feature.
We were all excited about the sharing feature, but shutting it down closed off a vulnerability that could cost Smartpayer money, damage the brand, and potentially harm a lot of people. Hundreds of thousandsâpotentially millionsâof people will be safer because a design team decided to say no to something.
That feels like doing good work!
As the primary client liaison and logistics coordinator, I took ownership of the final delivery process.
It included:
⢠Accessibility checks ⢠Creating a style guide ⢠Making margin notes about motion and our rationale ⢠Cleaning up the file and making it neat and tidy ⢠Writing the final handoff/project wrap-up email
Accessibility checks
Accesible designs work better for everyone. I ran several accessibility checks before we delivered our designs.â¨
First was color contrast.
I checked every color combination on our design and made small adjustments where needed.
Next, I used Photoshop to check each of our designs with protanopia, deuteranopia, and greyscale filters.
From left to right:Â Original, protanopia, deuteranopia, greyscale.
The color combinations in our designs were visible in all four versions, so we moved forward with delivery.
Style guide
As a worker in any collaborative process, I want to make things easier for the next team to touch my work. I carried that attitude into the Smartpayer project, and spearheaded an effort to build a style guide to include with our delivery.
Margin notes
I included margin notes with the designs to communicate our thoughts on things like interaction design, motion, and how the desktop screen might change at different breakpoints.
Margin notes looked like text, arrows, wireframes, and additional prebuilt module pieces.
Delivery file
As requested by the client, we delivered our designs in a Sketch file. I arranged it into three sections.
⢠Delivery ⢠Design process artifact ⢠Bonus gift
First were the actual deliverables, as mutually decided at the beginning of the project. We included a style guide, a dark and lite mode mobile site, and a lite mode desktop site. Iâve redacted some parts of the design to guard features that Smartpayer is developing in stealth mode, and to stay compliant with our NDA.
For sizing context, the word âDELIVERYâ is set in SF Pro Text Heavy at 580pt!
Our client at Smartpayer also asked us to include our design process in the delivery. We were happy to oblige, and I arranged our artboards in chronological order.
I look for ways to add value, and this time I gifted a few custom LinkedIn banners as a token of thanks for a good working relationship.
OC stands for "Original Content."
Delivery communication
To complete our business transaction, I Â wanted to be very clear about:
⢠What were our material deliverables ⢠What were the expectations going forward ⢠That the project was now closed and settled ⢠The delivered assets belonged to Smartpayer
I also wanted to express genuine friendliness and delight in the connection that weâd developed over four weeks of working together. We talked about all of this in person at our final video call. After that call I summed up what we'd talked about in a wrap-up email, to make sure everyone was on the same page, and to provide a written source of truth.
The wrap-up email included:
⢠It was a pleasure working with you
Delivery stuff:
⢠Where to find the files we promised to deliver ⢠How the files are organized into folders ⢠Which exact files are included in the delivery ⢠Now that weâve delivered them, those files belong to Smartpayer
Expectations stuff:
⢠We are allowed to showcase our work in portfolios aimed at gaining employment ⢠We will not owe Smartpayer any portion of the gains from that employment ⢠What we are asked to redact from those portfolio showcases ⢠Payment is settled and nothing more is owed by either party
Friendly stuff:
⢠We hope you liked our work and us as people ⢠Thanks for any future connections or recommendations ⢠Expressing that the working partnership was delightful ⢠Opening the door to any clarification questions
Learning and reflections
This experience taught me a lot about communication and organizing a team. I had successes in keeping the work on schedule, organizing communication channels, being a client liaison, setting meeting agendas, and listening to feedback from my team. Iâll talk about the feedback, and then Iâll touch on some things Iâd do differently next time.
Safe space and course correcting
I was intentional about vocalizing our equality as teammates from the beginning. A big reason I constantly aligned our team before we communicated with Smartpayer was to make sure everyone felt unified behind our work and comfortable voicing their dissent. Doing that helped keep the lines of communication open, and it kept our team from fracturing when there was pressure.â¨â¨
Early in week three, I noticed one of our designers was starting to pull back in discussions and was communicating less in the chat. I waited until after weâd wrapped a meeting and the client signed off, then I asked the team to hang back for five minutes. I said I noticed that something felt off. I dismissed the âeverything is fineâ standard answer. I dug deeper. I made assurances that our team was a safe space, and that airing our grievances would only make us stronger as a working unit. I could feel that there was something going on.â¨â¨
After a pause, the designer said she felt like I was using a little bit too much âIâ language, and not enough âWeâ language. I was surprised, because I was making an intentional effort to be inclusive and give people props and kudos for their contributions, but I didnât argue. I listened. â¨
I validated her viewpoint, and thanked her for speaking up. I explained my intentions and affirmed again that what I think Iâm doing doesnât overrule what sheâs receiving as a lived experience.
Then I made several intentional changes.
I started doing 30 minute review sessions to go through the agenda together. This got all of us on the same page, without taking too much time, and helped everyone feel like they could raise important issued I'd missed.
I started writing out my assumptions and bringing them to the team to get their viewpoints before each client meeting. This curbed my spontaneous think-alouds during the meetings, which I thought were helpful but were actually alienating my teammates.
I promised, and then made a serious effort to shift my language from "I" statements to "We" statements.
The designerstopped pulling back, and started contributing even more than she had before. The team got stronger, our output pace increased, and meetings started to flow more naturally.
Affirming othersâ experience and welcoming criticism and feedbackâeven (especially?) when it's aimed at meâhelped nurture a sense of inclusion that made our team stronger.
Next steps
Once the website itself goes live, the next steps are connecting analytics software like Google, Adobe, or Hotjar to test and iterate on the designs. Tracking what people look at, how they behave on the page, and where they tend to bounce will be helpful in optimizing the site to net more signups.
I also recommend creating video assets and animations, which was outside of our scope and budget for this project, but which will add value. "Gen-Z"Â type of apps demand video and motion content.
What Iâve learned since this project
Our Smartpayer project was a success, and there are some things that Iâd do even better next time. There are a lot of great tools out there for organizing teams and work, and here are some that I would likely use:
⢠Assumptions and Hypotheses from Lean UX help to align the teamâs purpose and get going faster ⢠Scrum standups to help provide a timeboxed daily check-in and set a rhythm ⢠Weekly planning sessions and retrospectives to get a broader view of our progress on the project ⢠Trello boards to organize and assign tasks ⢠Theater games to build rapport with the team and set a fun/relaxed tone for the day
Iâm sure there are more tools that Iâll learn about as I continue on, and Iâm looking forward to using them.
