Episode Transcript

Karen:

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

Ethan:

And I’m your other host, Ethan Marcotte.

Karen:

And this week, Ethan and I are both genuinely thrilled to be joined by Senongo Akpem, who is an independent designer and illustrator. Senongo, welcome!

Senongo:

Hi, how are you guys doing?

Karen:

So, I’m thrilled that you’re here. I’m a huge fan of your work and Ethan and I were both really delighted that you agreed to be on the show. Maybe for the benefit of our listeners that are not familiar with your work, could you just give us a little bit about your background, the kind of things that you do?

Senongo:

So, I’m a designer and illustrator. I work primarily on the web, and a lot of my work references my upbringing in Nigeria and lots of foreign countries that I’ve lived in before. So, a lot of the things that I do either with illustration or the interactive work is starting to tell those stories about what it means to be a non-Westerner, what it means to be African, what it means to be of a lot of different societies at the same time. So, I’m sure we’ll talk a little bit more about it, but that’s generally been my focus over the past five/ten years, is trying to tell that multicultural story both with interactive design and illustration.

Karen:

I’d love to follow up on that a little bit more and maybe also, you know, a nod to the theme of our program here. Can you speak a little bit about how some of the work that you do translates across devices? So, how do you think about the design process or the illustration process as something that is no longer confined to a particular layout or particular sheet of paper, but rather can live in a variety of different contexts?

Senongo:

So, this has been an overriding concern in the design community since…I forget what his name was. There was some guy who came up with this “responsive design” thing, his name is lost to history now…

Ethan:

[laughs]

Karen:

Man, I wish I could find that guy. I have a bone to pick with that guy.

Ethan:

Let’s keep him in obscurity, please.

Senongo:

[laughs] Okay. But since that kind of initial flowering of the idea or whatever, there’s been a lot of work done on the device side, of course. So, what does it mean for content to be flexible? What does it mean when I take, let’s say, Chinese language text, which is a project that I’m working on right now at my agency, Constructive, and how does that work across different devices? The way that the type is constructed is, of course, very different from what we’d expect in a Western context, so I need to make sure that when we are reducing type sizes or line-heights or whatever, that we’re doing it in a way that’s respectful of the way that their typography is.

Another thing of course is not necessarily the device, but what happens when you have information that needs to be accessed through a Chinese government firewall? If you have servers that are in one place and the content needs to go through this and be filtered—which is a fact of life, and the organization that we’re working with, the Regulatory Assistance Project, they have a huge focus in Chinese climate change, and so they need to make sure that their content is accessible in that region of the world. So, how do we make these sites as light as possible with not an overabundance of images and so on? So, those are the types of things that I think that we, as designers, need to be looking at when we speak about responsive design and when we speak about devices, to make sure that the people that we need can actually access this stuff.

Ethan:

Senongo, that might be a really good entry point for talking about one of the projects that I saw you launched last year, HoloHalo. I thought it was beautiful work. It’s sort of like a little bit of conceptual design. But I’d love to hear a little bit more about that project and sort of hear how it came about.

Senongo:

So, the genesis of this is actually quite long ago. There’s a science fiction writer named Greg Bear, one of the more well-known, and his work can be kind of difficult to get through but it’s also really interesting. He wrote this book called Eon, it’s about a civilization inside the moon thousands of years in the future, and so—I mean, it’s as you would expect science fiction. One of the things that I remember from this book though was that in this far-future civilization, the people, the humans there, they wear these devices around their bodies, their necks, that allow them to do something called “picting,” and what picting is is projecting additional information outside of their own, kind of what they speak, in order to contextualize what they’re saying. So, what we do on Twitter is when we have reaction GIFs, and somebody says something and we post a GIF in reaction. But you can imagine while we’re speaking, if we’re able to actually project that GIF next to what we’re saying, it becomes a much more nuanced and deep mode of communication. So, what I wanted to do was reimagine Greg Bear’s picting technology but in the much nearer future.

So, I started to work on HoloHalo and trying to find ways to represent that, and I hit on using SVG, using CSS and HTML as a way to kind of animate these halos. And so that was, on a technical level, a very fun project for me. What I realized was that I love science fiction, but a lot of the sci-fi that I read and a lot of what I watch is, frankly, made by white people and it’s for white people. There’s no beating around the bush there; there’s not really very many African science fiction leads that you can think of. And I love to ask people the question, like, “What’s the last black guy that you know that was the science fiction lead in a movie in the West?” And I will ask you guys that question as well, if you can think of anybody.

Ethan:

That’s a great question… Wow, yeah, I’m blanking. [laughs]

Senongo:

[laughs] Exactly! A lot of people will say, “Uh, Will Smith.” Which, he’s a great science fiction actor. So, what I wanted to do was expand that idea outside of what we traditionally science fiction to be, to take Greg Bear’s idea but then move it to the people that I identify with. So, I have black women on HoloHalo, black men, a young black man and an older gentleman who looks very much like my father, and then a Muslim woman who I’ve identified as a scientist or whatever. So, I’m really trying to take the tech, our CSS and our SVG, but also present an alternate view of what the near future could look like in kind of a jokey way. [laughs] So, that’s HoloHalo in a nutshell.

Ethan:

No, I think that’s great, and I think that that narrative was what really struck me. On top of that, I think it’s beautifully executed. I mean, it’s a really beautiful piece of responsive work. I’d love to hear a little bit more about how responsive design maybe has changed some of the tools that you use as a designer and art director. So, maybe we could talk about HoloHalo a little bit: How did you actually bring that about? What kind of applications, what kind of tools were you using to realize this?

Senongo:

So interestingly, I started working on HoloHalo before I started using Sketch. I don’t know that my process would have been any different if I would have had Sketch, but I think the go-live process would have been a little bit simpler. But I used Photoshop for the overall layout of the site, and then I used Illustrator to create the vector illustrations of the halos themselves, and then Photoshop to do some image processing and so on for the GIFs. So, I really tried to very quickly go from creating the halos themselves, getting all of the line art and so on ready, and then pumping that straight into the HTML. So, I worked largely in the browser, just testing out CSS3 stuff, testing out different SVG techniques, and making sure that it worked responsively. So, there were a lot of late nights sitting in front of the browser, just tweaking stuff to see how it worked and to make sure that it worked on mobile devices as well. A lot of long nights.

Karen:

One thing I’d be interested in hearing your thoughts on is how working in this digital environment, or working even across cultures, changes the way that you collaborate with other team members. How do you think about presenting your work or showing work in progress, or getting feedback from people who might bring different perspectives to the table?

Senongo:

At my last position, I worked at a publishing company at Cambridge University Press, and that was offices in fifty different countries across the world. We did marketing and digital design and UX and so on, and it was always—I don’t want to use the word fun, because it wasn’t fun, but interesting to get feedback from different regions and different people. How we presented the work was often very dependent on what we knew would fly in different parts of the world. So from a design perspective, we had designers in the United Kingdom and then designers here in the US, and some in the Philippines and so on. And so, the tools that we used were very often the same ones that you would expect: Skype to talk a lot, even though it was super buggy; making sure that we had Dropbox and other file-sharing software that we could pass stuff back and forth on; InVision, those types of things so that we could quickly get feedback and quickly be able to communicate with each other.

But on the presentation side of it, a lot of it was just making sure that we started with the research, started with what the users actually needed, and then developed from there and allowed some flexibility when it came to the fine-tuning and the presentation. So, something that I look at quite a bit is, let’s say, how photographs are perceived or used. While the interface may function in the exact same way, somebody clicks this button and this thing comes out, the image that I have in the background might need to be chosen per region or per country, and so you allow different teams to do that in a way that makes sense for them. So, you give up certain control in order to make the interface actually understandable for different people.

Ethan:

Senongo, I just want to touch on something you mentioned earlier about designing for different markets and different audiences. I’d be curious to know if hardware and network constraints is something you have to account for as a designer, and if so, how do you actually do that?

Senongo:

So, here’s an interesting story, something that came up, again, at Constructive, where I work now. We had a client who sold a medical device primarily in sub-Saharan Africa, and it was an anesthesia device. One of the huge problems with the African medical market is that we get a lot of donated equipment, and none of it ever works and there’s nobody who can fix it. So this stuff just gets junked, and there are amazing pictures of piles of waste electronics sitting behind hospitals because well-meaning Westerners send this stuff and don’t realize that nobody can fix it. And so, what this organization was doing was actually providing a fixable machine with a network of distributors who were the ones who would go around repairing and fixing the machines when they broke down, and so it was a much more sustainable model.

One of the things that they were quite clear on was all of their distributors were in very low bandwidth areas. Sierra Leone, for example, they’re not going to be on high speed broadband when they’re out and about—maybe when they’re at home, sure, but when they’re out and about, fixing… So, what would we need to do on the website to allow them to access, let’s say, repair information or printed-out toolkits or whatever, to make sure that they could fix the machines? One thing that came out of all that research and that conversation was that Whatsapp was the largest means of communication of their distributors, and so we made sure that deliberately we built the ability to connect with the Whatsapp community and get the Whatsapp number off of the site, and we basically offloaded a lot of the bandwidth responsibility to Whatsapp by doing that, so we wouldn’t need to build in all of that into the site itself.

I don’t if that answers your question, but I thought it was an interesting problem and kind of a fun challenge.

Ethan:

Yeah, I think that’s fascinating, frankly. But speaking of interesting problems and challenges, I’d just love to hear generally what’s really piquing your interest these days? Do you have any projects you’re especially excited about at the moment, or anything you want to share with our listeners?

Senongo:

As you may know, Pixel Fable is a company that I have been working on and managing for a number of years now, it’s probably been about six years, and I tell digital stories. Most of them are very focused around the African experience and the cross-cultural experience, and there’s some African children’s stories. But I’ve also started to do a lot more adult-focused digital narratives. One digital narrative that I’m working on right now is called The Voyage of Captain Da Costa. It’s the story of a 16th century Portuguese African ship captain. For the listeners who don’t know, this was the Age of Exploration, and so this was when Portugal, and then very soon after the Dutch and the English, were in a mad scramble for land and for access to ports, and also trading materials in Asia, and then in South America, and then of course other parts.

So, the Portuguese were the first to market in Macao, in Goa in India, in Mombasa in East Africa, but also in Nagasaki, in Japan. They set up this port network and this trading network, which was quite powerful in its day, and so you can imagine that they needed sailors for their ships. Because Lisbon was one of the largest slave ports in Europe, there were a lot of ready hands to man the ships. So, there were a lot of Africans, there were Indians, there were a variety of people who were on these ships that traveled from Western Europe all the way through to East Asia on these months-long journeys.

The reason I got interested in this was I found some paintings, and they’re called Nanban paintings, and these are these large screens that were painted by Japanese artists around the 1600s, 1615, and these screens depict the Portuguese sailors landing in Nagasaki, in Japan, bringing their trade goods aboard—fabulous animals, leopards, and peacocks, and all these types of things. And there are black sailors all over the place in these paintings, and it’s not something you often see or identify with the Age of Exploration. So, I decided to make a digital story about one of those men, whose history is kind of lost to us, if you will. I’m working on getting that launched right now, I’m really, really excited about it, and it’s a digital site that explains both his history. It’s his diary, and also some of his drawings, and what he saw and what he experienced on that journey as a black African, from Europe to Japan—which, interestingly, parallels some of my own journey. [laughs] So, that’s what the project is. So, looking forward to launching that very, very soon.

Karen:

That is so fascinating. I’ve always been really interested in the stories of the Dutch ships going to Japan. The David Mitchell book about that was super interesting to me, so I love what you’re working on there. I might conclude this by asking a question we like to ask all of our guests, which is do you have any advice for somebody might be working in the field? Like, perhaps a designer or an illustrator who admires some of the work that you’re doing and wishes that they could be working on similar projects, do you have advice for how they might think about or approach their work?

Senongo:

I would say, as I was mentioning before, a lot of my work is focused on the cultural aspect of design, and you could even say the political side of it. I would encourage people to look at what they’re doing but also take a step back and deliberately twist one or two of the pieces to see what it looks like from the other side. So, the example that I gave about being able to access information on climate change from behind a Chinese firewall is an interesting technical challenge. But I would also encourage people to do other things. If you’re interested in, let’s say, sculpture, go to your local museum, hopefully there is something like that around where you are. Look at what’s done, but then ask yourself, what is this museum experience like if I am legally blind? How would I navigate this museum experience if I am a five-year-old child? What does the website or marketing material look like for me if I don’t understand English, if that’s the language that the museum is built for?

So, these are the types of ways that we can focus on something that we love—in this case it would be art or sculpture—but switch the perspective very slightly so that you’ve identified perhaps a need or an alternate way of viewing it, and then build for that. Build a website for the legally blind for a sculpture museum. That’s a challenge that I’ve never done before and I’d love to do it, and I’d love to see what other people could do when presented with that. So, that would be my advice, is force yourself to think differently about how these things actually exist on the web and in the world.

Karen:

I have to say, that resonates so well with me. I think that the people who do the best work out there are the ones that take the perspective of wanting to look at their work through the eyes of other people really seriously, and they don’t treat that like it’s a requirement that they’re forced to meet but they treat that as actually part of their creative process. So, Senongo, I think that this has just been such an interesting interview. I would love to talk more, but we’re out of time, so I’ll just say thank you for taking a few moments out of your day to speak with us.

Senongo:

No problem. I really appreciate it.

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 help getting started, Karen and I offer a two-day onsite workshop to help you make it happen. Visit responsivewebdesign.com/workshop to find out more and let us know your company is interested.

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

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