Developing Stages: Part 10 — An Apostrophe

Chronicles of an interaction design student turned UI engineering intern.

Week 10, Day 1: Error Unknown

Nothing like kicking off the week by getting locked out of the system. Several phone calls later, and the situation was resolved and work began. Then it was on to cleaning up the code and trying to figure out what in the world was going wrong with the animation (functioning but seemingly ignoring half of the properties which were supposed to be animated).

The project meeting brought the news of a new goal: showcasing the project at the team wide offsite in two weeks. Should be interesting. As both a design project and a research piece for the UIE department involving some new combinations, there should be a lot to discuss. Now to get it all polished up before then!

Observations:

  • When scheduling a project it is important to plan time for iterations as well as the initial execution/implementation.

Week 10, Day 2: Mystery Solved!

…Not in the sense that I know exactly what went wrong but in the way that I tried yet again but this time it worked. My best guess is the problem had something to do with manipulating the DOM when it didn’t need to be after we changed how the animations were called. It would probably help if I knew Javascript/ReactJS.

Now that the animations are not only moving but moving the way they are supposed to, the illustration transitions can be dropped in (complete with reversible timeline so they can all collapse to the same spot for seamless transitions without the need for a unique animation for each combination) and I can apply the new knowledge to cleaning up the other animations.

Observations:

  • If you hit a brick wall, don’t sit there trying to figure out what’s wrong with the mortar any longer than you have to. In this case, after picking through the code multiple times to no avail I went back to the beginning to reimplement the animation step by step. What do you know, it works. Next time I’ll try that sooner.

Week 10, Day 3: Struck My Brain Just Now

With everything animating as it should be, it’s motion madness. Plotting, designing, and coding the various interactions/transitions is also helping me gain a better understanding of React. Lifecycle methods in particular are beginning to sink in because triggering the animation at the right stage is crucial.

After many (MANY) sketches, iterations, and feedback, the final section is also ready to hit the code with a radical redesign. After going back to the stakeholders, we were able to refocus the design to reflect the variety and allow much greater scalability while treading around legal potholes. As with everything, there is room for refinement but overall the design is

The epiphanies didn’t stop there. Delayed by almost half an hour on the way home, I took the opportunity to clean up some components that had been bothering me. I had created nested components before but never to this level and the use of props finally clicked. Ah, that glorious feeling when 50 lines of code become 5.

Observations:

  • State = component’s internal mindset. Props = information passed in from outside (such as a parent component). Everything makes so much more sense now.
  • React truly excels in those moments when you transform a screen from a cluttered mess to a series of readable and reusable elements.
  • Now that I understand how to create better and more modular components, I feel like half of those I created earlier need to be remade and optimised. Live and learn.

Week 10, Day 4: Surprise!

Going back to the grid to code the new section but first, an surprise demo for the senior manager. And by surprise, I mean we were surprised. Still, apart from the feature in the process of being redesigned most of the design was in a good state and the weekly project meetings have improved our walkthrough and talking points.

Then it’s back to the code as the new section takes form. We even managed a collapsing list (surprised it actually works!) for the responsive version so the user doesn’t have to spend ages scrolling. Granted it was more about putting together the pieces the other UIEs had already helped us construct but still, to build a working interaction in React without once needing to ask for help is still satisfying.

Observations:

  • Know your design. Know why you made every decision and be able to justify it on the spot. You should be prepared for a demo any time, anywhere.

Week 10, Day 5: Break Out the Pen and Paper!

Instead of the usual product design critique, we were greeted by a host of sticky notes and a blank wall. This morning, we were doing a LUMA session. LUMA ‘recipes’ combine different methods and tools to create unique approaches for specific design challenges. In this case, we started by listing Alternative Worlds (featuring Narnia, Nasa, and Spotify, with a guest appearance by Nike), then Starter Statements to accompany our overarching “How might we…” challenge, and finally Thumbnails for potential (and sometimes crazy) solutions for the chosen statements.

As a designer and pen & paper gamer, I live for off-the-wall idea generation and improvisation so this was my kind of Friday morning. Follow it up with some SVG interactions and iconography brainstorming and I was so caught up that I nearly stayed overtime by accident. The perfect way to end a week which began with everything going wrong.

Observations:

  • Be that person. Take the extra 5 minutes to ask about the methods. If you’ve never heard a term, don’t pretend you know but stop and ask. You’ll learn more than you think (like a full explanation about the LUMA workshop and even a peek at the recipe book which truly does resemble a cookbook).
  • Time flies. Only two weeks left!