October 2nd 2020
The #Hi_IMadeIt series features the work and stories of creatives from all over the world as we dig into what it really takes to make something and bring it to life on the internet. Submit your own on Instagram—share your design or code project, tag us @hisuperhi and include the hashtag #Hi_IMadeIt for a chance to be featured. Today, we chat to designer Anton Sten on working remotely, "dining together" with your team, and making Toast.
My name is Anton (@antonsten). I’m based in Sweden. I’ve been creating digital products or websites for the past 20 years. I help companies define what to make, who to make it for, then help them design it. And if they need it, help them lead a team to make sure that they ship it on time and a product that makes sense for their customers basically.
I’m a generalist UX designer, so I’m not specifically focused on user testing or user research or anything like that. I think in most projects, I have to use these skills in one way or another. One of the reasons I think that UX is so hard to define is that it’s such a broad spectrum and it’s really hard to define where it actually begins and where it ends.
UX really falls in under everything from defining what to make but also I think that there’s a lot of UX recommendations that fall in under the development phase as well, in terms of how do you make a site that’s fast and that loads quickly. So that affects UX as well as what features to use. It is hard to define in that sense that it’s not a specific thing.
If you compare it to visual design, it’s pretty obvious what that is whereas UX is everything, but then again, nothing.
What’s a project you’ve worked on recently?
I recently worked on Toast and this was actually pre-COVID 19. It was remote by choice and not because of the current situation, but it was a project through a collective of freelancers called SuperFriendly—all remote, all experienced in their own area.
So what we did for Toast was actually they wanted a media hub or a blog. And the main part with that was actually to find out more about their users.
Can you talk a little bit about your work with Toast and how you found the process working remotely with clients?
What SuperFriendly basically does is that depending on each project, they put together a group of people that will fit that project perfectly. So they operate on what they call the Hollywood model, similarly to how Hollywood makes movies. They put together a director and a producer and actors based on what kind of output do you want to have basically, what kind of film you want to make. And similarly, SuperFriendly puts together teams for projects based on the skillset that is needed for that specific project.
Toast’s customers are primarily restauranteurs or smaller coffee shop owners and finding out what their pain problems were and where they needed help and where Toast would be able to help. So one of the things that we found out through user research was that a lot of these people did not have a lot of time on their hands. They are extremely busy people. We needed to create something that was able to allow content both to go in depth, but also be tangible at just reading the headline, basically in finding out whether or not that is relevant for them.
And then the other thing that we found out as well was that they do think that it’s a lonely business in the sense that it’s difficult to share these common problems many of them have owning restaurants and small coffee shops. Going back to working remotely, one of the taglines for SuperFriendly and what they always try to operate for each project is to work together, eat together, play together and win together.
Pre-COVID, it was easy to get together and actually eat together as well. And that’s something that I’ve found on all projects, basically, that I’ve done remotely. Probably 90% of my projects are remote even prior to COVID but I have always found that meeting up in person, even if it’s just for a day or something like that really helps the remote relationship going forward as well. And that’s one of the reasons that we’ve always found within SuperFriendly to dine together or eat together during that first initial setup is really important for the project going forward.
That’s a really fair point. SuperHi itself, we’re proudly remote team. We have people from Hong Kong all the way to Vancouver and every year we do the same, we have a IRL meetup because it is quite important to have that connection. Obviously now it’s a little bit different and we’ll have to adapt, don’t we? How was the process like basically working together versus remotely?
We all flew to where Toast is based, which is in Boston. So we were in Boston for a couple of days last summer. And for that specific project, all of the other team members were based in the US and I was the only one based in Europe. Most of the team members were based on the East coast of the US so it’s not that much of time difference.
I have done projects for the West coast previously. And depending on whether it’s six hours or nine hours really makes a huge difference. I do think that it’s important to just get that up, even if it’s just an hour or two of overlap each day is really important. And one of the interesting things that I’ve found on projects like these are that you can actually get a efficiency boost that I haven’t seen on projects where everyone is based either in the same, whether it is in the actual same space or just in the same time zone.
What I’ve found with some of the projects in the US is that you get this continuous iteration on the work. So basically I’ll have really focused work during my mornings because everyone in the US will be asleep. Then we’ll have a couple of hours of overlap. Then they’ll continue to work while I’m at home during the evening. And then when I get to work the next morning, there’s been progress as well. So the working day of the project just gets longer. So that is one of the hidden benefits that I’ve actually seen on a lot of projects that you might not think of, but actually has been really helpful.
What steps did you take or what were some of your creative processes with in terms of helping Toast or being involved in this project with the rest of the SuperFriendly team?
So prior to meeting up, we had a user researcher that did a lot of user interviews, and she shared some of her findings when we met up as well so we didn’t actually meet up and started from scratch, but we actually had some brief ideas at least of where we’re heading when we had our time to get around.
We had a full day workshop, just not necessarily thinking of solutions, but more in terms of discussing our target audience and what potential outcomes can come from that. And then once we had defined that together, I found that the signing came pretty easily because at that point we all had this shared vision, at least, of what it potentially could be.
When we got back, when everyone flew back from Boston, Dan Mall—the creative lead on the project—he and I did most of the design work. We started simultaneously basically designing and designing pretty publicly. We both used shared files on Figma so we could easily see directions that the other one took along the way and just get these small bits and pieces of inspiration from one another’s work as well. And then a week or two after we’d been in Boston, we presented the first initial designs or design directions.
Sounds like you were both influenced by each other. Did you have any other creative influences for that project?
I think one of the important bits that we wanted to touch on as well was to make something that felt a bit editorial, but also wanted it to be not necessarily image heavy, but at least it should be very visual. So, a tutorial, but still visual.
There’s been a couple of sites that have been experimenting with finding solutions for that specifically. Some of the Medium articles can be pretty engaging and visual, even though they’re primarily text focused. The New York Times have done a lot of things where they have specific articles that really push the idea of what an online article looks like in terms both of multimedia, but also animated graphs and things like that.
How much time would you say, yourself, or maybe the entire team, do you think you spent planning for this project, particularly your part of it?
I would say that the design part was initially quick, so maybe just a couple of weeks and we decided to pretty quickly move design files over to the browser. But then once we had that design in the browser, there were a couple of additional weeks just tweaking things. I think anyone who has ever worked on a digital project knows that there are differences between looking at something in, whether it’s Photoshop or Sketch or Figma, and then actually seeing it in a browser. Even if it’s just small things, how fonts render, there are always things that will differ so we wanted to move to the browser pretty quickly.
I’ve found this in other projects as well, that once you move to browser, it becomes a lot more tangible for the client as well because it feels more real in a sense. So that’s the other thing that we wanted to move to browser pretty quickly and just start playing around there more once we felt that we had a good idea of what it could look like in Figma.
What do you think was the most challenging part about building this project with the team or for yourself?
I’m always most stressed out in the beginning of projects when I don’t have a vision yet of what it is that we’re creating. And especially on this project, the brief was actually to explore different options. So it didn’t have anything set out as to what we should create, which in many cases, the brief actually tells you what to create. That was, for me, a difficult thing to try to keep my mind open for different possibilities as long as possible.
Even after designing and still having that open mindset as to, well, what if we tweak this thing to become something else? What does that mean for the entire piece?
In terms of designing, when you met with the team, a lot of work had been done already with research or user research. Did that have any influence in your design?
So we knew that it should load quickly. It should be very accessible on mobile. Many times people will just check their phones five minutes during a quick break during the evening or something like that. So you have this small window of opportunity that you have to grab basically.
What other tools did you use for this project, if you’re able to be specific, or does it depend on the industry that whoever you’re working with?
I would say that it is pretty much up to any project to decide. Figma is just my choice of tool. I know Dan, who I’ve worked with on other projects as well, is someone who still prefers Photoshop for specific things. A lot of companies are still using Sketch as well.
One of the hidden benefits of using Figma is that because you can give access to anyone and they don’t have to download a specific software, they can use it straight in their browsers. I’ve found that in many cases, that it’s easier to engage other stakeholders in the process of creating as well so they can actually go in and edit copy in the design files themselves. They can make comments on a specific things on the design. If you send them a JPEG, they can’t put their comment on a specific thing. You could use Envision or something like that for that as well. But having everything integrated into one tool is super helpful.
On that project, we used Google docs a lot. Now we mostly use Notion just because we can add more types of data to the same files. But between that and Slack, the key to all of the tools that we use regularly are just how easy it is to collaborate within them. If you look back five years or so, online collaboration in tools was still pretty basic and not really something that you used. You started using Google docs, but that was pretty much it.
Now if we look at the tools we use, we have collaboration in pretty much all of them.
What kinds of tools and processes did you use to communicate with the team on this project?
We actually used a Slack channel for all of us. So the SuperFriendly team didn’t have our own Slack channel. We just had one Slack channel and everyone in any way related to the project was in that same channel. And that was actually a Toast Slack channel, not a SuperFriendly one.
We had a recurring weekly meeting on Zoom. What we usually do in projects as well is try to mimic some of the stuff that you normally would have in an agile working process. So we don’t do a daily stand up in terms of video, but we do have a written one.
We actually write down: this is what I’m looking to do today. This is what I did yesterday. Here are some of the blockers that I have. Just to get that commitment, but also I think just for everyone to get a look into what other people are working on as well.
In terms of finishing this project, how did SuperFriendly transition or pass on the reigns to Toast in terms of an end of product review?
During the final stage, it was mostly development planning and collaboration, getting everything set up in terms of code.
What we did do though in terms of design as well as the final step was once we had a online version that we all felt was good and something that we would be proud of to actually launch as well, we added what we refer to as sauce to the steak, speaking in restaurant terms.
So just adding a couple of animations for some of the headers, making sure the buttons had decent on mouse-over effects and just these small bits and pieces that, again, really can affect the user experience as well.
How different was this particular project to your other projects or including any current ones that you’re doing? What was the main difference that you found?
I think in a way, every project is really different, but also in a way, every project is also pretty much the same. For me, it was my first project with SuperFriendly. So while I had been on a lot of remote projects before, I hadn’t been on a project where everyone was remote. So usually it’s been a couple of persons remote and a couple of persons on location for a company, whereas now everyone was remote. I think that was a big difference.
Other than that, it was pretty quick project. I had worked for a very large company for almost a year before that and in very large corporations, things tend to move slowly. That was a huge difference for me as well, to get back to a project where things moved very quickly and you can see actual daily progress being made. That was a huge shift.
What’s next for you?
I’m starting a new project next week. I’ve actually now been taking a long summer vacation. So I haven’t worked on anything for almost five weeks, which is the longest break I’ve taken since I was 16. So it’s been really nice, but now I’m excited to start new projects as well.
-As told to Mirna Wong, August 2020