Recently, UX Academy student Annie Devine joined Designlab for an internship with our design team!
Twice a week, the team meets for design reviews—an opportunity for us to present and review work, listen to feedback, and iterate on new versions.
Annie recently took on a project to update Designlab’s cover images for Twitter and Facebook. Her process is a great example of how listening to feedback and iterating can open up new directions and lead to a stronger final result.
Take it away, Annie!
Getting started
I decided to focus on one social media channel, with the intention of adapting the header to the other channels once we had a consensus on the design concept.
I figured Twitter would be a good place to start, since its cover photo takes up the most screen real-estate compared to other social media platforms. I wanted to make sure I was using that large space effectively—creating something engaging without overcrowding it.
Over the course of a couple of weeks, I presented the latest versions to the design team, listened to their feedback, and then went away and explored new directions. 19 iterations later, we uploaded the finished graphics!
Here’s how getting feedback from the team really helped me to move this project forward. I’ll go through theme-by-theme.
Versions 1–7
Branding & Audience
I started with a very abstract workspace illustration that included a floating desk, desktop computer, notebook, UI elements, and other assorted office objects.
I got a bit whimsical with the colors and positioning of all the elements, but I figured it would be okay to be somewhat adventurous for a first draft and get the team’s thoughts. The initial feedback I received was that it came off a little busy and the colors felt young for our target users.
This was helpful because it immediately let me know that I needed to simplify the illustration and stick more closely to Designlab’s brand colors. Now that I had a more specific color palette and direction, I was able to iterate more quickly by focusing on the layout and grouping of the objects.
Angles & Perspective
Once I reduced the number of objects, and confined them to the desk to make the illustration less abstract, the team noticed that the perspective was off on some elements: When things were partially floating off the desk before, it was okay to have everything facing head-on, since the illustration wasn’t playing by the normal rules of perspective.
But now with all the objects on the desk from a bird’s-eye view, it appeared that the computer, plant, and coffee cup were laying flat on the wood, which didn’t look right. As a result of this feedback, I experimented with a couple different iterations: a few with the desk angled back so that upright objects like the computer could remain head-on, and a few keeping the bird’s eye view but either showing the computer from the top, showing it at a very slight angle, or replacing it with a tablet.
Versions 8–13
Hierarchy & Grouping
When creating an illustration that has multiple objects in it, there is a tendency to want to spread those objects around so that they feel sufficiently “random”. In this case, I wanted it to look like a messy, lived-in workspace, but I did receive feedback to introduce some grouping so that the placement of everything was more intentional.
I still angled things a bit – after all, pencils and rulers are not usually left in perfect alignment on a desk – but this feedback was a good reminder that grouping and visual hierarchy is important for guiding the eye of your audience so that they know where to focus.
Shapes & Flow
Through the process of reducing the amount of objects in the illustration, I had started grouping everything on the right side, and the team pointed out that leaving some negative space on the left created a nice angled shape overall.
I hadn’t noticed that initially, and it helped me realize the importance of considering the overall composition of these headers: since the webpages themselves often adhere to a strict grid structure with a lot of straight lines, a cover photo with interesting angles and shapes can provide some contrast and break up those horizontals and verticals.
This shape would flow nicely on Twitter in particular, where profile avatars partially overlap the left side of cover photos, so maintaining negative space on the left was helpful.
Versions 14–19
Details & Accuracy
The team wanted to ensure that the content on the computer, tablet, and phone accurately communicated what Designlab does. I tried a few different iterations for the computer to convey the Designlab platform, including depictions of wireframes and two users chatting with each other to indicate the mentor/student feedback cycle.
For the phone, the team suggested to show a simple call screen, again as a nod to the communication between students and mentors. As we got closer to the final iteration of the cover photo, the team also took note of details for me to tweak that made a significant difference in modernizing the illustration.
Technology moves very quickly, so depictions of devices like phones and tablets should keep up! I had used a picture of an iPhone X as a reference for my phone illustration, but I received feedback that my tablet looked outdated, and my inclusion of cords wasn’t really needed since wireless tech (keyboards, etc.) are now the norm.
Final artwork
Takeaways
Iteration on project deliverables was a huge part of my time as a Designlab student, and applying that discipline definitely served me well in this project. It allowed me to move through progressively stronger solutions to the given design problem.
It also brought home the value of regularly presenting and listening to feedback on work. By definition, other people have a different perspective on your work. Whatever their perspective, it has the potential to be valuable simply because they will see and think of different things than you.
Finally, this was also a good reminder to save the process and work non-destructively. Rather than overwriting the previous version all the time, I kept duplicating my artboards in Sketch. As well as allowing me the fun of going back and seeing the creative journey, keeping all this work can also be a great way to show process in a portfolio, or even get feedback on the process itself.
Thanks for reading. I’m looking forward to sharing iterations on another next project soon!
.jpg)
.jpg)
