Molecule Profile: Taty Bernardo

Taty Bernardo basically holds this website together. But with less gaffer tape than you might think, and more clever code-manipulating genius. Thanks to her, you're able to browse all sorts of fascinating (and well-written, if we do say so ourselves) articles and guides all about the Dreamiverse. Here, we chat to her about moving from Brazil to Britain, how she almost went to medical school, and coming up with designs that makes those web pages pop.

Hi Taty! What do you do here at Media Molecule?

A photo of Taty Bernardo, looking very witchy in the woods.

A photo of Taty Bernardo, looking very witchy in the woods.

I’m Taty, and I work in the web team. I started at Mm as a senior web designer, but I consider myself more a hybrid of a web designer and web developer nowadays. I used to be more of a developer and then I ended up getting more into design, and now I mix and match to tackle whatever is needed of me. I handle a lot of the design conversations and indreams requests related to animations, designs or new blog posts like this one. Which is weird. I probably helped to put a page about myself live. That's really surreal.

So what does that actually look like day-to-day? What kind of things do you actually get up to?

Day-to-day there’s a lot of communication with the coMmunity team and other teams across Mm to discuss what we can do on web and what new things we can create or improve. If, for example, we're not getting many people seeing certain pages or articles, I can improve how the articles look or come up with a new design for a page so that it gets more attention. I think when we did Ancient Dangers: A Bat’s Tale, we knew that it was a big deal, so we discussed whether we could make the Ancient Dangers pages look different to any other pages we have. Then it becomes a process of gathering and selecting assets and coming up with a fun design.

When we created the Art’s Dream Mm Originals section of the site, we capitalised on the fact that Art’s Dream is about music by theming it around music, adding musical notes, and even including some of the audio from the game.

But then there’s the less design-focused side, which is fixing bugs when something is not working and sorting out web code. It’s perhaps not as creative, but is even more important.

Do you have a general approach when it comes to designing web pages?

An image of the new event calendar Taty designed.

An image of the new event calendar Taty designed.

I think that one of the things I always try to do is focus a lot on what is right for each particular brand. I think Dreams has a very creative, almost sparkly approach, where there's a lot of purples, so it became trying to find a design scheme for the buttons and icons that worked around the colour purple. Understanding the brand and the things that people want or expect from that brand helps a lot when thinking about how we can make this design slightly quirkier.

I tend to try to follow a lot of web design practices, as nowadays a lot of websites have a flat design and minimalistic approach, so you don’t want a bunch of menus and gifs and things flying in your face all over the screen. But the most important thing is that it needs to be good for usability. Will people be able to read this? Is it accessible for tools like screen readers? It’s really vital to consider those aspects.

How do you balance trying to make the site visually interesting, but also remaining accessible and easy to navigate?

Well there are a lot of ‘industry standards’, for want of a better term - things that a lot of websites do and work well. But for me, what I like to do first is to not think of the restrictions and try to be more creative and think big about what we can do. Then scaling it back as I think about how this works for mobile and other formats, as well as how it works for someone that’s visually impaired, or has other disabilities. And if it doesn’t work, how can we get it to work?

It can be a tricky balance sometimes that means you can’t always do all of the cool things you wanted to do, but it’s far more important to ensure what you make is accessible and easily navigable.

An image of the Art's Dream section of the website, showing off some of the musical note design Taty incorporated for the pages.

An image of the Art's Dream section of the website, showing off some of the musical note design Taty incorporated for the pages.

What do you think is the most visually striking, or interesting web design that you've done?

That’s a tricky one because when I was applying to Mm, I did quite a few proposals for both indreams and random websites. And they were not necessarily realistic, as there was a lot of things I proposed that looked really cool but in practise were either impossible, or too tricky to do.

Before I worked for Mm, I had to do this kind of advent calendar website where basically you would click a different button every day and there would be a little character that would dance around or do a different animation. And I think it was very interesting and visually striking but also for me it was really fun to do because it was very interactive.

We recently just released an updated version of the indreams website, using your new designs. What are you most proud of in the new version of the site?

It has to be how it’s way more streamlined to find content. There had been so many discussions about how we categorise the site content, what are we naming the sections, and that part was so difficult but we ended up basically taking the site apart like LEGO. You know, we just took the pieces apart and built it up again into something cooler.

We were really lucky to have some user testing for this new version as well which was incredibly helpful during the design process. Just seeing the fact that when we presented users the old site and the new site, they were able to find information much quicker with the updated version, was really satisfying. Beforehand, there was all this cool content that you sometimes had to go through sometimes five or six menus to get to, and now it’s just one or two maximum.

The new event calendar Taty designed.

The new event calendar Taty designed.

So what got you into working in the web design field, and how did you end up at Media Molecule?

When I was old enough to go to uni, my family wanted me to be a doctor. But honestly I hate biology. Ugh. So I went for game design and did a degree in Brazil, and then I was very lucky that during my time there I did some QA for a Facebook bingo game at the time. And then I moved from there to be a game designer for a bit at a design agency in Brazil.

Eventually, I moved to the UK and it was a bit of a struggle to get a job as a game designer at that time. But despite that, I wanted to stay in the games industry, so then I went to the root of my other passion which is designing websites. So I started as a web QA analyst when I moved to the UK, and then went from there to be a web developer, and now I'm a designer. I’ve been in the games industry for 13 years now, but I’ve done a lot of different roles, which has helped to keep it feeling fresh.

Indreams is a website which is partially tied into the game itself. Is that more complicated than what you've done before, as you have to make sure the code works for both the website and the game as well?

An image from the Ancient Dangers: A Bat's Tale section of the website, designed by Taty.

An image from the Ancient Dangers: A Bat's Tale section of the website, designed by Taty.

In my previous job, a lot of the sites we did were marketing sites, so it was really just about encouraging people to buy whatever game we were advertising - mainly just showing off the trailer, screenshots and assets. With indreams, it's more about emulating the Dreams experience, so we make sure that we're very communicative with the server team and ensure we can incorporate their new features. Or if we want to implement scoreboards from the game to the website, how can we move those things across and still have it translate across, because Dreams is a game that you control with the controller, not a mouse and keyboard. And controlling a game with your controller and controlling a website with a mouse and keyboard are very different control schemes. Both work, but the controls in the game would obviously not make sense or work on the web.

So I think there is some level of difficulty when translating the UI from the game to the web to make sure that it is still consistent. It's still the same environment, but it has to be a different way of interacting than the game. So I think that’s the major challenge with indreams.

How do you design the site to work with the game then, and how do you decide what parts should mirror it? The in-game icons and Dreamsurfing navigation are the same, for example, but other designs diverge.

Yeah, I think we definitely transfer some things from the game verbatim at times - for example, with the scoreboards. We needed to make sure that the scoreboards looked the same both in-game and on the web, otherwise it could be confusing. The ultimate aim is to make it feel like you’re navigating Dreams even when you’re on the website, which isn’t always possible, but we try to emulate that as much as we can.

So with filtering, for example, I think we still have to do a bit of work on the web filtering, as it’s not quite the same as in-game. But we’re definitely proud of the homepage and how that emulates Dreamiverse navigation, as it has the same look and feel as scrolling through the creation playlists, just with a mouse and keyboard instead of a controller.

An image of the event list Taty designed.

An image of the event list Taty designed.

Because it’s a companion website, it’s very important to have elements that make sense within the context of the game, which is great as it allows us to take inspiration from the design and style of the game as well. Although it’s not always possible - as sometimes there will be an effect, like a glow, that's really nice but doesn’t quite work as well on web. So when we encounter a limitation on web, we just think, how can we represent this in similar manner but not exactly the same? So for indreams a lot of trying to match the game is just to feel they are, you know, kind of like working together.

The docs side of the site, where we host all the resources and guides, is a bit more free because the doc site has less of that in-game integration. On docs, we have to make sure that the style still matches the brand, but it’s not so important to have it match the actual game experience itself.

Mm staff seem to have a lot of interesting items on their desks. What's on your desk at the moment?

I have so many things on my desk. I have these Pop Mart figurines. I have at least three on my desk and I have like, another five or six behind me. There's one that's like a baby with a sunflower head, and an adorable sheep eating strawberries. They're so cute! What else? I have a Chocobo calendar statue that functions all year round, you just change the dates by rotating the blocks. Ignore the fact that it's currently the wrong date.

Basically, I went to Japan over the winter and I got a lot of things in Japan that I definitely didn't need in my life. A Sailor Moon washi tape holder, for example, because everyone needs one in their life. Other things I got in Japan that I don't need include a coaster featuring a Snorlax eating a doughnut, and a cat that doubles as a tape cutter. I could keep going - my desk is very big.

Japan, you say? What was your favourite thing you did whilst you were there?

For me, it was going to go the Studio Ghibli theme park. I really liked it because it wasn’t like a very traditional theme park. There weren’t so many rides, or long queues for attractions - it was just more like you were exploring the locations from the Ghibli movies, and they recreated everything. I was also lucky enough to go to Super Nintendo World, which was also an amazing experience. But Super Nintendo World is a much more traditional theme park experience, so spending ages queueing for everything was not as fun.

To wrap up, what are your favourite Dreams, and are there any that you'd like to recommend?

Rows and rows of plushy toys. A dream come true for Taty.

Rows and rows of plushy toys. A dream come true for Taty.

Yeah, this was a tricky one for me. I don’t get a huge amount of time to play Dreams, and new content comes so thick and fast that I’m a little bit out of the loop with it. But there is one creation that has stuck with me because I remember because Jen [Simpkins] talked about this on her Twitter when it came out and I was just like, wow I need this in my real life. It's Deh Plushies, by Yah_Deh, llCaptain_Morgan, and Elca_Gaming.

So many adorable animal food plushies! We're big fans of the cat waffles and turtle melon pans.

So many adorable animal food plushies! We're big fans of the cat waffles and turtle melon pans.

The people reading this can't see it, but behind me in my office, I have a lot of plushies. There are so many plushies. I might have an addiction. So a combination of plushies and Dreams was always going to appeal to me. It was very fitting, like it represented me in that sense. I like to think that if I ever had a shop... I mean, I wouldn't sell my plushies. But if I ever had to own a shop, that would be the kind of shop that I could imagine myself running. I love the style and the layout of it, and they've done such a good job making the plushies so unique and realistic.

Seriously, it's a good thing for our savings that this shop doesn't exist in real life.

Seriously, it's a good thing for our savings that this shop doesn't exist in real life.

And I think there's a lot of different creative foods and creatures. I think there's a cat, and a dragon. There is a mochi as well, I think. Ooh, one of my favourites is like, a sushi cat. There are all sorts of different creations I remember, like a cat burger, which is great, a pug made of spaghetti which is also amazing. You know, why not? Ultimately I think the reason I like it so much is that for me, it was complete wish fulfillment, as I would happily spend rest of my life in a plushie shop.

The Dreams User Guide is a work-in-progress. Keep an eye out for updates as we add more learning resources and articles over time.