Episode Transcript

Ethan:

Hi, this is a Responsive Web Design Podcast, where we interview the people who make responsive designs happen. I’m your host, Ethan Marcotte.

Karen:

And I’m your other host, Karen McGrane.

Ethan:

And this week, well, we’re trying out something a little bit differently on the Responsive Web Design Podcast. Normally we talk to organizations and companies that have gone responsive, but we’re doing a little bit of a short series where we talk to working designers and developers and content folks who have gone responsive. As part of that series, we couldn’t be more excited to have Robyn Kanner here speaking with us. Robyn, thank you so much for joining us.

Robyn:

Hello! Thanks for having me.

Ethan:

So Robyn, why don’t you tell us a little bit about who you are for our audience, and some of the work that you do.

Robyn:

Sure. So, I am a designer and art director in Seattle, Washington. I have been here in Seattle for like sixteen months now, and I cofounded and designed this website called mytranshealth.com, which is just basically a site designed to help trans people get access to quality healthcare.

Ethan:

That’s fantastic. In all honesty, that was one of the big reasons we wanted to have you on the show, because, well, actually Karen and I were browsing through MyTransHealth just before we ran you up on Skype, and it is beautifully done. It’s a lovely website, and it’s also incredibly easy to use on screens wide and small. I’d love to hear more about the website, how it got started, how the design came about. Where were your heads at? Tell us more about it.

Robyn:

Sure. Yeah, so I’ll kind of start from the beginning, because it was just so incredibly scattered. But essentially back in 2014 I had just left my home state of Maine and I was sort of living out of this guy’s apartment in Boston. I had been involved with a bunch of trans startups in the past, but none had ever really taken off, and I don’t think the idea or concept was really there. But with MyTransHealth, it was a conversation I had with this person, Kade Clark, who’s this trans guy—he was in New York, he’s in Dallas now. We both just had similar experiences of really bad experiences with healthcare, and we kind of just figured it was the right time to sort of address it. I think internally both of us were kind of freaking out a little bit, just because trans people were starting to bubble up in mainstream conversation, whereas we were mostly invisible before. So, we were trying to take that sort of newly found interest and couple it with our skills as people in tech to really just build a site that tech could align to, so people who weren’t trans could help us fund it and do this work and get excited about this idea.

On the other side of it, it was helping trans people get access to healthcare. So, we quite literally have talked on the phone to over 1,500 organizations and providers about how they talk to trans people about healthcare, and we just kind of put it in a site. That’s the bare bones piece of MyTransHealth.

Ethan:

Wow. That sounds like anything but bare bones. That sounds amazing. But I’d love to hear a little bit more about how the design came about, because like I said, I was browsing around on my phone and you’re asking folks to do some fairly complex workflows, but it also feels incredibly easy to do. I’d just be curious to hear a little bit more about when you’re thinking about providing critical services to underserved populations, how did that influence the design? How did you land where you ended up?

Robyn:

Yeah, so two things were happening in my life at the times when I was doing the site. The first thing was I was volunteering for this suicide hotline, called the Trans Lifeline, and I was taking calls nightly from trans people all across the nation and globe who were freaking out about gender identity. The biggest thing it came down to was access, and it came with such anxieties about their identities and how this whole thing that they’ve been thinking about for years was kind of bubbling up and they needed help and they were panicking. So, I knew that I needed to make it a really delightful experience, so I didn’t want to bum you out. So the colors, the language, it’s all very positive, and it’s because I was literally getting off these calls with people who were coming down off of a suicide conversation, and I didn’t want to freak them out any more. It was just about making the most delightful and positive experience that we could.

The other piece that I was doing was I was camgirling at the time because I was only freelance in Boston, and I had MyTransHealth on the side but it really wasn’t doing anything at that time. So, I would basically subsidize my income by designing the site while also camgirling. Through that, I kind of met this entire community of women who also really needed help and had thoughts about the frustrations they would have with getting access to estrogen and the conversations that they had with their providers, and how they kind of didn’t know what they needed. Basically, there were trans people going into hospitals and being like, “I need help with my broken finger,” and some doctor would be like, “Oh, let’s put you on estrogen,” and those two things aren’t even remotely connected. So, it was this idea of misunderstanding where trans people were at and their needs, but also the panic of actually needing help.

So, those two elements kind of coupled to create what MyTransHealth is, which is a guided search. So right now, it’s three questions and we spit you out providers right after that. So you come to the site, we talk about what’s right for you, we show you a couple of illustrations of people who we had spoken to, and then we just ask you how you identify where you live and the kind of access that you need, and then we throw you into a search filter with providers. You basically go from, “I’m freaking out about healthcare” to, “I have a provider in my area” in literally under twenty seconds—and it was definitely a speed thing that we considered, for sure.

Karen:

The idea of people being able to get access to the internet via mobile devices is something that’s really important to me, particularly for underserved populations or low-income people, or people who need access to the internet that they can’t get other ways. I honestly think that probably one of the most powerful tools that a mobile device can be is something that is an intimate source of information about health, or about things that are kind of sensitive that you don’t want to go to a library and search on a free computer for something, your personal health issues. Can you talk about how you made choices about how to prioritize the information or how to make sure that the content or the words or the terms that were most important to people would show up on their little mobile screen?

Robyn:

We basically set out a rule of what was the most information to search versus what was the most important information to display, and we kind of made that as a parallel for mobile to desktop. So, when you’re on desktop, we give you everything and you have this huge field that bricks out into accessibility, language, and they’re all searchable fields. On mobile, we basically kept that same platform in the sense that if you go through the three questions, then when you come down, then you can dive into those more intense search fields.

The interesting thing is, so we have actually just wrapped up redesigning the site and we kind of shifted how we were doing this information entirely. What we found out is within six months of people using the site, basically forty percent of the people were mobile and sixty percent were desktop people. So, we had kind of like a complex experience figuring out where we were going to dedicate resourcing, so we dedicated a lot of our code resourcing to back-end because we were worried that we were just going to get shut down on our first day from 4chan or something. So, we spent a ton of time on the back-end for security and a very minimal amount of time for front-end. So, I kind of had to make a lot of decisions on how I was going to basically do a whole front-end with limited resources and only research that I had done that was basically subjective.

So, when we were redesigning this information, I kind of got to this place where we had this full huge sub menu that broke out into thirty different things that is pretty complex stuff, and I think when providers and organizations were submitting information, they’d get the core of what they did but when it came down to entering the fact that they had a handicap-accessible area or that they had a doctor who spoke French who’s in on Fridays or something like that, they were really not that great at submitting that information. So we would either call then, vet them and ask them those things, or it wouldn’t be listed. So I think a lot of the times, like on our site right now, there are instances where I know for a fact that a lot of the hospitals have handicap-accessible entries but we don’t list that it’s there because it wasn’t put in the submission form.

So when we redesigned that, we basically shifted that submenu of all that content into what was important to just display versus search. So, we cut it down really dramatically and now we show demographic and we show language. You’re able to just see the information as it displays as opposed to searching a full submenu of materials. We’re hoping that’s going to help people sift through what works and what doesn’t work more quickly for them, too. It was essentially just about figuring out the IA of how people are able to search for information, and then figuring out the IA on the back-end in the sense of how trans people talk about gender is wildly different than how doctors talk about gender. So, like our back-end has wires on how we connect those things, because they’re basically two different languages, too.

Ethan:

Robyn, as you’re a working art director and designer, I’d love to hear even just about the tools that you were using to flesh out the new design of MyTransHealth. Are you fairly traditional, like Sketch and Photoshop kind of person? Do you do a little bit of prototyping? Is it a bit of a mishmash? How do you work?

Robyn:

Yeah, so the first time I designed the site was on Illustrator, and that proved to be a not-wonderful experience. At the time, I was doing a lot of print production stuff, so I just used the tools that I knew. But with this redesign, I did the whole thing in Adobe XD. I like Sketch a lot; I use it at Amazon daily, but it’s because that’s how our system design is set up, so that’s just the patterns that I’m able to use pretty quickly. But with Adobe XD, it’s really great, because when we redesigned this whole site, it was basically a three-day effort where day one we did a heuristic of what our site was and we compared it with the data that we had, and it was just a whiteboarding session for eight hours, we figured out what we needed and what we could cut. Then the second day was all in Adobe XD, and it was just grey boxes for UX and figuring out how mobile was going to work at first, and then we flipped over to desktop, whereas the first time we started with desktop and then moved to mobile. Then the third day, I sort of had set up a brand guideline from the beginning, so I knew how a lot of those pieces would work. So, I basically took a screenshot from Illustrator of sort of my brand guidelines and popped it into Adobe XD and was able to reset the type and set up the color situation. And then with Adobe XD, what’s really great is that you’re able to go from screen-to-prototype super simple.

The problem with Adobe XD—and they’ll flesh this out later—is it’s so bare bones. It’s really great to show quick UX for prototyping; it’s really great to get some transitions for mobile and desktop in there, so you’re able to see how they’re both working at the same time. It doesn’t have super intense type choices, it doesn’t let you do anything with textures, or shapes can be a really difficult thing to do for iconography in it. But that bare bones prototyping, which is what MyTransHealth is, it was perfect for.

Ethan:

That’s really great. Robyn, you mentioned a phrase which is like catnip to me, which “system design.” I’d love to hear a little bit more about that, because I know a lot of designers I speak with, that’s kind of one of the big transition points in our industry right now, sort of moving away from thinking about this macro-level interface into this really fine-detailed system-driven work. How do you balance that in your work? Because I know you’ve worked on a fair number of big e-commerce platforms in your day.

Robyn:

Yeah, so I originally didn’t hear the words “system design” for a really long time, because I didn’t go to design school. I went to this random rural arts college in Maine, and nobody knew what system design was. So, I basically lied my way into a contract job at Staples, and I had a design manager, we were working on paper packaging redesign. Staples has these various different sizes of paper, and there were different levels of which was higher-end versus the basic kind, and there’s obviously a couple different languages, too. So I was in this room with him and a couple other designers, and he basically set it up and was like, “Alright, we need a system design that breaks down into three levels, and languages and stuff like that, and make it interesting and engaging and figure out how it works on one-inch paper clip packaging versus huge paper, too.” So, that’s basically when I heard the words “system design.” I kind of realized that I was doing it from the beginning, I just didn’t know that I was doing it.

When I approached MyTransHealth, we knew that we were going to do a huge marketing push before we even touched product, because we kind of knew that Caitlyn Jenner was about to come out, and we wanted to drop our site the week that she came out, because it was going to do a monumental service to getting funding to do the site. So with that in mind, we did a full push of understanding how type was going to work in marketing versus how type was going to work on product and mobile and desktop; making sure that our colors were relatively accessible and fluid, so if we’re using a lot greens and oranges, like the site currently does, then that would translate on both product to everything. We really wanted to avoid the stereotypical trans colors of pink and blue because we honestly wanted it to be more relatable to people who weren’t trans when it came down to funding. So, that was kind of coming into play as well.

Basically what happened was when we did the first site, I was able to take a lot of those elements over, because it was such a simple and flexible system that I was able to redesign a lot of the VX with it still kind of feeling like the same site too. That was because the system was so loose and I was the only designer working on it. I’m sure that’d be a different conversation if I had designed a system for MyTransHealth and handed it over to another designer and asked them to implement it. So yeah, that’s kind of how I define and use system design in my work right now.

Karen:

Talk to me a little bit about how you might review your work or your work-in-progress with other people or other stakeholders. Are you doing user testing or user research on some of these prototypes? Are you circulating a prototype around to stakeholders to make sure that everybody’s needs are met?

Robyn:

For sure, yeah. My stakeholders are trans people, so when I say user prototyping, I literally mean I was camming and talking to people who were in the chatroom, and I was like, “Hey, use this thing. What do you think?” That was definitely a different experience in figuring out what was working and what wasn’t working. As far as critique for the user research stuff, the internet is so great at letting you know what’s working and what’s not working, and I “crawl” it very regularly. So, trans people traditionally have connected over backchannels like Reddit, 4chan, and PS4 communities, XBOX communities, and then I like Twitter and Slack. So, basically like once every couple of weeks I do a full search of MyTransHealth to see who’s talking about it, and I take all that information and put it into the design, too. We’ve heard things on Reddit like, “This product has saved my life.” We’ve also heard things on Reddit like, “Oh, they’re not in our city,” or we’re not in their location, or, “They’re too urban-focused.” We took that into consideration when we were working on the second iteration, too.

So, partially bits of research for the site has been talking to trans people directly over the internet… I was interviewing a lot when this design was being done, so I found myself literally in design interviews, bombing the actual interview itself and at the end being like, “Hey, what do you think of this site that I’m doing?” So, I got feedback that way. And then just communities on Slack have been really great, too. So yeah, it was a very scrappy way to get information on what’s performing well and what’s not performing well.

Karen:

Now that the site is live or now that you’re working on a redesign, what kind of analytics or data are you looking at to see if the site’s performing or to see if there’s changes that you need to make?

Robyn:

The biggest thing that we were worried about was location. We’re in six locations right now, and it was good because it was just like, “Alright, we’ll put this site in New York and San Francisco, and we’ll figure out what people in tech think, what people in these communities think of the site.” But an overwhelming sense of feedback was, “What do I do in Omaha, Nebraska?” Because unless you’re moving to the coast, basically there’s a lot of these resources that are set up that can’t really help.

So, the biggest thing that we did when we took into consideration of redesigning the site is we just took the information from where locations were being searched the most and we took the top twenty and used that as our sort of mechanism to decide what locations we were going to be in next. So, Omaha was one of the more interesting ones, because we didn’t know that our site had any visitors at all there. Then we did some research and we were like, “Okay, there’s actually been a few hundred people from Omaha who have come to look for resources.” And because trans communities are so small, if you know somebody in Omaha, they probably know how to get access. So, finding those providers was a relatively easy thing for us to do. But yeah, the root of it was just location-based service was the thing that we needed to solve the most.

Ethan:

Robyn, I’ve got to say, this has been a fantastic chat. But before we let you go, I’ve got to ask, if there’s somebody in our audience who is about to undertake their own responsive design or redesign, do you have any advice that you’d like to share with them? Something you’ve learned in your work at Amazon or your work on MyTransHealth? What’s something important to you for them to keep in mind?

Robyn:

I’d keep in mind what kind of designer they are. What I’ve learned in the last whatever years of designing is that there’s two types of designers: There’s a macro designer, which is the high-level thought and you’re able to figure out how systems work with a notepad; and then there’s another designer, which is a micro designer, which is like, “I can get this iconography right, I can do this color scheme right, I can get this pixel-perfect grid, and I can decide whether it’s going to be a seven, eight, or ten-pixel grid.” Figure out what you’re really, really good at. If it’s the high-level, make sure you focus on that high-level, and if it’s micro, do as much as you can with it, but be very self-critical with it, and then start figuring out who the micro designers in your life are and then just send stuff back to them and be like, “I do high-level design. I need to know if this icon system is working across platform.” Or if you’re a micro designer, be like, “I’ve got these colors, and I’ve got this type, and I’ve got this grid down and it’s flexible, but the high-level concept, I’m not sure if that’s fleshed out yet,” and then talk to a macro person.

So, just basically figure out what you’re really good at and understand what you could use a little bit more help with massaging, and then just find that person and talk with them.

Karen:

Robyn, this has been fantastic. I think the site is great, I think you’re great, and thank you for taking time to share your awesomeness with our audience.

Robyn:

Thank you! This was awesome!

Ethan:

Thanks to everyone for listening to this episode of a Responsive Web Design podcast.

If your company wants to go responsive but you need a little help getting started, Karen and I offer a two-day onsite workshop to help you make your responsive design happen. Visit responsivewebdesign.com/workshop to drop us a line—we’d love to hear from you.

If you want even more from us, you can sign up for our newsletter, subscribe to this podcast, and read full transcripts of every episode at responsivewebdesign.com.

Thanks so much for listening, and we’ll be back next week.