A home for GirlForward’s annual report.
ThoughtMatter recently created a digital annual report for GirlForward, a nonprofit supporter of girls around the world who identify as refugees, immigrants and asylum seekers. We sat down with Sarah Mohammadi, the lead designer for this project, to learn more about her experience.
When you began this project, did you have specific goals that you wanted to accomplish?
SM: Whenever I’m working in a digital space, a personal goal of mine is to push the boundaries of whatever tool I’m working with — see how I can break it, use it in a new way, or rethink the context in which I’m using it. A goal for this project was to make the flat space of the digital into something that felt spatial and three-dimensional.
Did that goal evolve over the course of the project?
SM: Yes. Whenever you’re dealing with a digital space there are lots of speed bumps and unexpected obstacles that you have to work around or accept as part of your design. The structure of the annual report website uses a very fluid system that doesn’t always lend itself to digital space all that well, so part of the challenge was finding the right partner to develop it. That way, we both could continue to push the boundaries and how ThoughtMatter is thinking about design. Making the navigation fluid was a major obstacle we faced, but we found ways to work around that and we’re really happy with the result.
Also, some of the animations we intended to use in the beginning were challenging because of their load times. Sometimes it gets too heavy for animations to all exist on the same page, so we’d ask ourselves how we could simplify the animations to minimize the load time.
Do you think anything fruitful came out of that simplification?
SM: You can always overcomplicate things. The limits of what the web set before us pushed us to simplify some of the things that maybe didn’t need to be so complex or over the top in the first place. I don’t think we lost anything by simplifying the animations. If anything, simplifying the user’s interactions with the website makes the user pay more attention to the content.
Had you ever worked on a project like this before? Had you worked on an annual report before?
SM: I’d done print annual reports, but I’d never done a web annual report. And I’d worked on print reports for nonprofits, but not for a nonprofit like GirlForward, which is definitely a unique and special partner for us to collaborate with. They genuinely trusted our design decisions and ability to make the website the best we possibly could for them and their audience. They were very, very open to all of the ideas we had. And they were excited about the process, too. I think it also was their first annual report that lived on the web, so it was a big moment for them as well. Given that ThoughtMatter did the previous year’s annual report, which was print, the digital report was a big jump for both parties.
How did your work on other annual reports affect how you approached this project? Did you approach this project differently?
SM: With annual reports, it’s about information first. Design should be the silent partner in that relationship. GirlForward was different in that they wanted the project to lead with design, but also to have all the information be accessible. They didn’t want it to be just about the design. I think because of the work that they do — working with refugee girls, young girls — they really needed the girls’ personalities in the site itself. That’s something you don’t see so often in most annual reports. And it’s exciting to make a website for something that traditionally has been print-based. I approached the digital product as a translation from print, and from there it was really about the content and the strategy behind the design. The idea of home became the running theme. Then we took that into the sketching phases of the design process. How to translate “home,” something that feels so physical, so three-dimensional, into a flat space. That was the lens I was looking through. And what pushed that design direction was the fact that the 3-D aspect doesn’t exist in the flatness of the digital. If it were print, I think it would be more about the folds of the paper, or the structure of it. Quite different.
How else did your experience with print inform this project?
SM: Print teaches you, or more specifically, print annual reports teach you hierarchy and how to deliver information as clearly as possible. In digital space, you have the ability to click anywhere, that kind of loop you can go into — the cycle of hyperlinks going here, going there, looking at whatever you please. A print annual report has a rhythm built into it with the turn of the page. So print had taught me the hierarchy of information to apply to the web, but I couldn’t apply the same rhythm you get in print because that’s impossible.
What was your strategy for creating the rhythm the user experiences on the website?
SM: I don’t like to make traditional websites that are single-page, top-down, scroll-down; you know, that present information in a very linear way. I wanted the user to have some direction but freedom of movement. I like to break the system as much as possible to then learn how I can fix it or put into play different elements that tie the whole thing together.
You’ve mentioned pushing boundaries a couple of times now. Do you see a parallel there with GirlForward itself?
SM: I think you can say, if the client itself is willing to take risks, ought to be your design is willing to follow. ThoughtMatter chooses clients, such as GirlForward, that are doing something new. So designers here also have to do something new, and I think they do.
What aspects of GirlForward did you want to emphasize in your design?
SM: I wanted this idea of being playful, almost carefree. The stage in life the girls of GirlForward are at is a hard one to capture in web design, but their spirit is what I hope is coming through. Just because they’re refugees doesn’t mean they’re still not just girls trying to get through life. So a lot of their playful aspects and their personalities are what I tried to play up with different types of animation or with the art that frames a lot of the photos. I also added colors to the palette that tried to incorporate the girls’ personalities. Again, I pulled those colors from their everyday clothing patterns, colors of all the things that surround them and feel like a home. I wanted to bring a little bit of that character in.
Did anything beyond GirlForward influence your design?
SM: It wasn’t one designer or artist, but mostly the field of architecture and the blueprints they draw up to visualize a 3-D space. That was a big inspiration for how to lay out the actual structure of the website. I used the language and look of those layouts — like a bedroom here, a kitchen there. And some of the divider elements on the website itself also use that language. So you’ll see little boxes that are kind of the structure of the interior or exterior of a home. There are dotted lines that show the door opening or something. Stuff like that.
How would you describe your relationship with GirlForward? Do identify with the girls at all?
SM: I mean, I am not a refugee, and I can’t even imagine that experience, but I did come to this country at a young age. So I think in terms of trying to find my voice, trying to find my place and trying to find my community, I can definitely relate in a sense. And that’s why I think it’s so amazing that something like GirlForward exists. They are willing to put the girls first. And I hope the website does a good job of showing that they do put girls first no matter what. So, yes, in the sense of belonging, definitely. I feel very connected.
Is there an aspect of your experience on the project that you’re especially proud of?
SM: I’m proud to be working in a space that lets me do a project like this. I think it takes a lot for a design studio to get behind something that at first we weren’t sure how to build. So I’m proud that we are surrounded by people who are willing to push those boundaries with you and try to understand the tools in a new way. In terms of the design itself, I’m proud of the subtlety that we could communicate in the animations. It goes back to my earlier answer about making something too complex. It’s easy to make something complex; it’s much harder to make something subtle and simple. There’s something subtle about the whole website — it’s almost zen.
Is there anything you learned from this that you think you can apply to future projects?
SM: Well, there’s a lot of just like technical things, but in terms of the bigger picture, I think I learned not to lose sight of what the concept is. When you get into the web, it gets easy to add on a lot of flashy, fun things that, because it’s like one line of code, can make the website go upside-down.
How do you think this project aligns with ThoughtMatter’s ethos?
SM: We truly believe in work worth doing, and I think that’s the reason I joined. I don’t want to make websites just to make websites and I hope that’s clear. But from just a content standpoint, GirlForward was the perfect client for ThoughtMatter and me to do work that is interesting, is pushing boundaries, is experimental on some level but still rooted in conceptual thinking and delivered in an accessible way. It was just the perfect combination. Why wouldn’t you want to do work like that? It’s a designer’s dream.