Developing Stages: Part 11 — All the Things

Chronicles of an interaction design student turned UI engineering intern.

Week 11, Day 1: All the Icons

It’s a holiday in the states so no project meeting this week but there is still plenty to be done. The radical redesign of one section in the late stages means there are some assets we hadn’t counted on that need to be created. Back to icon design!

It’s an all out sprint, starting with paper sketches in the morning all the way to implementing them in the code in the afternoon. Thankfully there were not too many to create so it was enjoyable process with a good sense of progress rather than a mad rush. Then it’s on to tidying up animation and starting to research grid fallbacks.

Observations:

  • Consistency is key with icons and it’s worth spending a bit of extra time (and frustration) to make sure any new designs match the rest of the set.

Week 11, Day 2: Lists and Boxes (Among Other Things)

First order of the day is reviewing the project against the new brand guidelines and updating content that does not align with the standards. Fortunately, even though we did not know the exact content of the new brand guidelines, we planned accordingly based around the old standards and other existing material so there is not much tweaking to be done.

But there’s plenty more happening today, including a drop in/out mini conference which is perfect for those breaks between coding. The bitesized talks were mostly aimed at being brief introductions to the different topics which was perfect for me. I took the opportunity to dart downstairs for several, including an introduction to chatbots, the process of building one (a project of two placement students. Way to go Lauren and Niamh!), and a brief overview of machine learning.

Alas, it’s not all fun and games. A particularly troublesome list illustration (and it’s friend The Box) is giving us trouble so it’s back to brainstorm ideas, walk the fine line of exaggeration, and research scroll animations.

Observations:

  • Another event announced at the mini conference? A botathon! So sad I will be missing out on it since I’m leaving next week.
  • Mutlilayered reveal animations can be tricky. I experiment with several methods using the viewbox but ultimately settled on a clip path with the SVG to be revealed layered behind. So far, functional in codepen. In the actual project? Not so much.
When everything finally comes together

Week 11, Day 3: My Life is Complete

You’re scrolling and look, what’s that? something moves! That’s right, we finally have scroll triggers!

It all started with Scrollmagic which, despite much research and many attempts (including my own working demos in vanilla javascript), refused to cooperate in our React app. On the bright side, between bouts of scroll struggles, I took the opportunity to brush up on my javascript understanding (you need to read this). My research finally paid off when even a fellow UIE had no luck so I dug out an alternate method using waypoints. Triggering a function on scroll is now a breeze and, after wrestling with undefined errors (thank you James, ever patient React wizard), they won’t be called again which means no irritating repeat animations when you try to scroll back to a particular section.

Observations:

  • Know when to pivot (a.k.a stop banging your head against a wall and go find a more suitable solution). Struggling to implement a plugin? Might be time to search for a more appropriate tool for the project rather than wasting even more time trying to figure out how to make it work.
The Compozed Lab, with more monitors, whiteboards, and sticky notes than you can count.

Week 11, Day 4: Just Say Yes

Sign up to a hackathon centred on bug testing and APIs (both of which you have zero experience in)? Sure, why not.

A helpful chat with the manager about different fallback methods kicked off a frenetic day. Besides polishing up the scroll animations and uploading the final assets to GitHub, the day was bristling with optional activities. Thursdays mean Learn Days in the lab and today I was particularly excited because some of the product designers were running a session on human centred design. That’s right, another collaborative exercise (this time featuring statement starters, an idea matrix, cover story mockup, and visual voting) to show off the benefit of such methods not only for designers but also developers.

The mini hackathon also kicked off the same afternoon. Unfortunately I could only stay for a few hours but it was a perfect introduction with free pizza and no pressure (except what I put on myself, in my determination to have a speedily wireframed product before I left).

Observations:

  • When it comes to SVGs, I think it’s important to have access to the original illustrator/sketch/etc files to aid upkeep and modifications. Sometimes the easiest way to fix a problem is to go back to your vector creator of choice and sort it out there rather than pouring over the code.

Week 11, Day 5: Testing, Testing

The project is live (at least on the internal server)! The manager also ran a quick Lighthouse check and the site fared surprisingly well. I’m particularly pleased with 94% accessibility after picking through SVGs to make sure they are screen reader friendly paid off. The test also came with a free explanation of Progressive Web Apps from our manager, which was well worth the initial tension of seeing what the ratings would be.

And of course, Fridays mean it’s over to join the product design team. No critique today but a brilliant casestudy of the start of a project and how they implemented design methods and collaboration from the very beginning.

We also discovered that our ‘casual’ presentation would actually require a slides. Thankfully our manager also gave some great tips on how best to do this and what to highlight when he revealed this tidbit. Time to get cracking!

Observations:

  • Lighthouse is built in to the Chrome inspector now!
  • Is it breaking? Better check your relative paths.
  • The trouble is SVGs is, depending on how you are using them, it can be difficult to separate them from images in your head. I was worried they might bog down the site because I was thinking like regular images but if used correctly they can be brilliant for performance and accessibility.
  • Sometimes the best tips for a designer are about organisation and planning. Seeing not only the impact of involving a variety of parties, stakeholders and developers, at all stages of the process but how they managed it was great.
  • About to enter my final week. It doesn’t feel possible.