Developing Stages: Part 7 — Design and Everything Else

Chronicles of an interaction design student turned UI engineering intern.

Week 7, Day 1: Meet the Team, Meet Your Maker!

It’s component madness as we put theory into practice and further break down the code. The afternoon project meeting brings to a light an important fact: we are responsible for pulling together the content. We were under the impression they were providing the copy so that changes things up (along with a clarifications about the different content areas). Time for copy overhaul!

Observations:

  • When it comes to components, dumb = more reusable.
  • Persistence pays off. After sketching off-on for a week, we finally have a design for a flexible Meet the Team feature.
  • Explain. Question. Double check. No one knows what’s in your head and two people can interpret the same situation two very different ways.
  • Put your assumptions out in the open. The first thing I did after the meeting was compose a rough content guide outlining the style, language, and content areas as we understood it from their feedback and share it with the rest of the team. If you made wrong assumptions at first, it helps to get everyone on the same page and ensure you don’t do it again.

Week 7, Day 2: Write for your Life

From designing with images to painting with words, we’re off on a new venture to write the copy. The design was crafted for flexibility (because we weren’t sure exactly what copy would be in each) so now that it’s up to us to thread it all together, we take the time to reexamine it and the content structure to tighten them up.

Gathering, organising, outlining, and furious typing are the order of the day, broken up by the international department wide conference where I learnt a bit more about designing for voice. Explained from the development perspective, which I had not considered before, this was especially interesting to me and dealt with some specifics as well as the mindset change necessary for structuring it all.

Observations:

  • Writing is an essential skill. Whether you need to mockup some quick headings/placeholder copy, draft a pitch, or update your CV, you will as a designer need to write.
  • Those weird skills and experiences you pick up along the way aren’t a waste. Even that Victorian Literature A-Level.

Week 7, Day 3: Viewbox Hates Me

It’s not just the copy, we also need to create the necessary graphics. One asset audit later and we have the list sorted out and can start work on the proper designs. Planning out the components and assets simultaneously is an interesting exercise as you consider not just the design but how it can be reused and how they will be implemented in the code. Between the icons, illustrations, background designs, and actual code, it’s a long day of jumping between the sketchbook and text editor.

Observations:

  • SVG view box is both amazing and amazingly frustrating. I read these excellent articles, experimented with this, felt like I understood, tried it for real, failed, kept trying, kept failing, and randomly succeeded before light finally (sorta) dawned.

Week 7, Day 4: Icon Insanity

It’s time to review those icon designs from yesterday. Here considering the final usage is essential because each will serve double duty as both a more detailed illustration and a representational icon at small sizes (all using the same base SVG without repeating the code thanks to the wonders of components). Not only that, but they need to be consistent thematically and stylistically, not to mention function across primary and reverse colour schemes (and split between the two).

That means sketching. LOTS of sketching. Even after deciding on a whole set, one was successful and the rest didn’t suit so time to rework them into consistent beauty. Ah, the joys of icons.

Observations:

  • It’s easy to forget how much planning and work goes into the seemingly small details.
  • Always remember the purpose of the design. Even if you have this amazing looking sketch, you need to consider how it is going to be used.

Week 7, Day 5: Divide and Design

With a consistent style established, it’s time to divide and conquer for the rest of the illustrations. But it’s also Friday which now means design critiques with the UX & Product Design team. Music and coloured stickers abound as we participate in the ‘silent’ critique, marking spots on the design we want to comment on and then offer feedback once everyone is done. It was my first time participating in a critique where they had a conscious rule that feedback should not ‘solutionise’ but rather raise an issue or compliment unless otherwise requested. Naturally solutions start popping up as well but it is an interesting approach and helps keep everyone talking about their choices rather than defending them.

Observations:

  • SVG to JSX converters ditch your <use> tags but don’t necessarily incorporate the values from them into the shape. Something to remember when you’re wondering what in the world went wrong with your icon.
  • The canteen can serve you enough noodles to feed an army.
  • Ask. Not just for help, either. I chatted with the Product Designer manager about sitting in on user testing and not only was she happy to oblige, she also offered an opportunity to attend the user interviews as well.