Week Notes: April 2020

I wrote last month about Week Notes, and in the following weeks I forgot to share what I’d been noting. So here are some week notes, work and personal, from the past few weeks: April 5, April 12, April 19, and April 24.

 

Week ending April 24

Work

  • Another client meeting that reviewed work and ended on-time with no outstanding feedback
  • Redesigned mobile wireframes for a section of account preferences, presented updates, and created desktop versions after receiving feedback
  • Presented desktop wireframes for mobile wireframes from previous sprints
  • Incorporated client feedback into wires and sent updates
  • Included a table within the wireframes to map processes between systems, for better messaging for the customer
  • Added arrows between wireframes that are part of workflows
  • Took notes from a final client meeting to document decisions and status

 

Personal


Week ending April 19

Work

  • Had a very successful client presentation of overflow work from a previous sprint – (4/13)
  • Reflections on why the meeting had such a good outcome
    • My thoughts: We had at least 3 requirements meetings for our sprint, and we really got into the detail of the features. We also reviewed workflows and made adjustments in real-time. I think all of that helped create accurate designs, which led to few/no questions
    • Another team member: Everyone was on the same page because the client team finished up their requirements and walked everyone through them. The client team knew exactly what they were looking for from the creative team.
  • Virtually met new team members located in Minneapolis and Dallas, (4/14)
  • Presented additional wireframes and workflows to client but wasn’t able to present all work during the meeting
  • Took screenshots from GAP account pages to explore messaging, and noticed extra options

Personal


Week ending April 12

Work

  • Updated wireframes for massive review session
  • Created new walk-through flow for different stages a workflow
  • Attended a meeting to walk-through new product requirements (4/6)
  • Presented wireframes reflecting new requirements (4/8)
  • Attended an internal presentation, where other team members presented their work on the discussion of development of a design system
  • Created new reference material of newsletter sign-up by taking screenshots of competitor websites (see below)
  • Reviewed new product requirements against existing designs
  • Worked one-on-one with manager on a client presentation to help her get caught up with work new and existing work needed for an upcoming sprint
  • Found new list of competitor websites, including Dune London , Clarks, Reebok, Timberland, Country Attire, Adidas
Screenshot from Dune London account sign up
Dune London account sign up

Clark’s Newsletter modal

Personal

 


Week ending April 5

Work

  • Reviewed requirements for payment method sections of account profile, for in-scope and out of scope functionality
  • Updated workflows for payment method sections of account profile, to accommodate removal of out of scope functionality
  • Collaborated with internal project team on which updates and recommendations to share with client
  • Held a design share with client and presented workflows on order tracking
  • Presented workflows on how to reset password, for different user flows
  • Updated shared notes regarding changes to previously approved designs
  • Uploaded screenshots taken with Simulator to inform discussion of designs using 3rd-party, plug-in, for address completion.

Personal

  • Wrote a blog post on last month
  • In-between books…started one, but didn’t finish
  • Created a spreadsheet to help track my deliveries and shopping lists

Personal (undated)

I can’t remember when it was, but I rearranged my furniture in April. My desk is now in the living room, behind the couch. The TV is back in the living room. The sofa is angled to face the living room and divide the desk area from the TV area. And the bedroom now has a little reading nook. Although, most of the books I read are audiobooks and I listen them all over my apartment.


Image credit: Schrijvende vrouw, Willem Wenckebach, 1870 – 1937, brush, h 321mm × w 248mm – View at rijksmuseum.nl

Deep Dive: E-Commerce Redesign for Luxury Retailers

As a freelance UX Designer for Publicis Sapient, I worked with a small team to redesign the e-commerce website of a luxury retail client.

Summary

The goal of this project was to redesign e-commerce sites for a NYC-based luxury retailer and partner sites. The sites would be migrating to a new backend platform.

  • Role: UX Research and Design (Experience Lead)
  • Design Tools: Sketch, InVision, Keynote
  • Collaboration Tools: Skype, Microsoft Teams, Box; Zoom (client)

Challenge: The challenge for the design team was that all sites would be migrating to a new platform. Solutions needed to work for all three. And they needed to be mobile first.

Team: I reported to the Associate Creative Director (UX). Other team members included the Design Director (Visual design), and two art directors. The project manager was the final core member of our team.

Phases of Work: Our work was completed in 2 phases. In phase 1, we focused on identifying best practices. In phase 2, we focused on completing the design.

Publicis Sapient calls itself a "digital business transformation company". Its headquarters are in Boston, MA.

Phase 1: Best Practices

The early UX phases of the project centered on finding examples and best practices for e-commerce websites. Many best practices came from the Baymard Institute, as well as other expert sites like Nielsen Norman Group (NNG.com).

Screen capture of baymard.com
Home page for Baymard.com

The best practices were organized by page or section, such as home page, product detail pages (PDP), and checkout.

We presented the best practices with screenshots of example sites, the current sites, and “out-of-the-box” functionality for the backend platform.


Surprising Finding About Quick View: Don’t Use It

One best practice that surprised me involved the use of Quick View. Baymard Institute identified that around 48% of websites utilize Quick View on product listing pages. However, their research concluded that “Quick Views are often symptom treatments for poor product list designs.” Therefore, the priority would be to create strong designs for the product list pages rather than create a new design for Quick View.

Screenshot
Baymard Institute recommends avoiding ‘Quick View’ overlays and advises focusing on building better product list pages.

Learn more about this finding on their blog: https://baymard.com/blog/ecommerce-quick-views


Early UX Collaborations with Visual Design in Phase 1

Starting out, the visual design team concentrated on UI foundations, like building a pattern library and exploring typography, etc. We collaborated in a few of the following ways:

Whiteboard with drawing on it.
Depiction of whiteboard exercise.

Shopping Journeys: As a team, we also discussed various shopping journeys to address specific requests from the client.

Information Architecture: We also discussed information architecture and iterated on multiple sitemap options, reviewing the current site, similar sites, and consulting with the tech team.

Phase 1 Conclusion

Phase 1 concluded with a focus on aspects of the product page, shopping journeys, and best practices.


 Phase 2: Design Sprints

Whiteboard with a schedule
Depiction of sprint planning.

Our goal starting Phase 2 was to complete several rounds of sprints. The work would include most of the site, starting with PDP. A few highlights from the start of Phase 2:

Design-Pairing on PDP: In the first month, I closely collaborated with one of the art directors on an early design of PDP. We discussed various options for page elements, like product descriptions and reviews. I gave feedback on functionality and usability.

Annotations for Visual Design: I also supported the visual design team that first month by creating annotations for visual designs, which were uploaded to Confluence.

Responsiveness & Functional Limitations: Throughout the project, I worked with the development team on understanding functional limitations and keeping the layout responsive.

Mid-Project Refocus Towards Global Nav and Framework

As with many projects, plans changed and our work refocused:

Refocus on Global Nav and User Profiles: We redirected our efforts towards the global navigation and user profiles, instead of the shopping journey. The work would now include global header/footer, sign in, account creation, favorites, purchase history, password, etc.

New Client UX Lead, Refocus on Design Framework: On the client side, a new UX team lead with a focus on longer-term goals — including a design framework for all three brands to use.

Collaborative Effort on Design Framework

In one sprint, following these changes, the UX and Visual design teams did a remarkable job collaborating on establishing a base for the design framework.  I used my experience with Basecamp, Foundation (Zurb), and Tachyons to advise the visual design team on UI components.

Eventually the UI and UX teams split into two. The visual team supported the design framework/UI and the UX team continued the product design/wireframes.


Outcome

The UX team continued with the product design, as planned. We focused on screens associated with user profiles, including purchase history, favorites, communications, user registration, address book, etc. We spent a lot of time iterating on form design and mobile layouts.


Screenshot references

Newsletter sign up for Dune London, a UK based retailer.

My Week Note blog posts document some of the tasks I completed in Phase 2. They can be found for March, April, and May. A few highlights are below:

  • Created wireframe desktop layout options for account profile dashboards in Sketch
  • Created workflows to map proposed account profile functionality, including update address from account profile and checkout, communication preferences, and expired cards/payment methods
  • Worked with the visual design lead and UX associate director to prep for a client presentation on wireframes and visual design of requirements
  • Included a table within the wireframes to map processes between systems, for better messaging for the customer

If you visited this blog post from my website, you can jump back here.


Sidenote

It sounds like science fiction, but right in the middle of this project a new and deadly virus spread across the United States. A global pandemic was declared. The city of New York became the hardest hit locality in the United States. In the early weeks of March, we stopped travel to the client’s location and the main office. For 2-3 months, all work became remote.

However, back in 2017, I wrote this blog post with tips for better conference calls. The remote work affected some members of the team more than others, but we were able to find new ways to collaborate using online tools and lots of patience.

“Month” notes: March 2020

Written documentation of a week’s activities.

Just finished reading about “week notes”, here and here. It looks like a really helpful productivity and project retrospective tool, so I figured I’d give it a shot. The examples I’ve seen are based on weeks, but this is my first time and March recently ended so I’m going to write my first “week” note for an entire month. Please forgive if there are any inaccuracies, or if it’s super long. 🙂

A note: If for some reason you’re not aware of current events, March 2020 has been one of the most volatile periods of time since WWII, or the civil movements of the 1960s. For most people, anywhere in the world, there’s been a lot going on. These are my small notes, on the work I’ve been doing, in my own little corner of the world.

Context

I am currently engaged on an e-commerce redesign and platforming project for a retail client. The client and internal teams are based in NYC and NJ, with a tech team in India. I work closely with an experience associate manager, a visual design lead, two visual designers, and project manager. I work semi-closely with the client (product) team. And the executive director of experience remains involved, here and there.

Work

  • Created wireframe desktop layout options for account profile dashboards in Sketch
  • Followed e-commerce project’s shift from wireframes to workflows – we got ahead of the requirements
  • Created workflows to map potential e-commerce interactions for  requirements for track order and favorites lists
  • Created workflows that mapped product requirements, for reset password as a guest/non-credentialed user and from account profile
  • Created workflows to map proposed account profile functionality, including update address, communication preferences, and expired cards/payment methods
  • Attended a product requirements meeting
  • Attended at least 2 product meetings to discuss requirements for profile pages
  • Discussed workflows on track order and favorites with a tech lead, before presenting to the client
  • Presented workflows on track order and favorites to client
  • Attended an informal session with the visual design team on their progress on a design system
  • Prepped with 2 others for a client presentation on wireframes and visual design of requirements
  • Revisited the requirements for account profile requirements, to make sure they were reflected in the wireframes
  • Uploaded screenshot examples of account profile pages for e-commerce sites for desktop and mobile, to help the design teams make decisions on the UI
  • Attended a global experience townhall (on Zoom)
  • Had a virtual check-in with the larger experience teams
  • Attended daily morning check-ins with the internal project team
  • Finally got Acrobat Pro installed on my work computer
  • Had several collaborative sessions with colleagues using InVision’s Freehand
  • Attended an online presentation of an internal collaborative tool
  • Checked out a website on design system repositories

 

Personal

I think this is a good practice. Let’s see where it goes.


Image credit: Old, Bearded Man Writing, Rembrandt van Rijn (school of), c. 1640 – c. 1650, pen and brown ink; framing line in brown ink, h 88mm × w 80mm – View on Rijksmuseum.nl

Black Hair Tutorials — In the Style of Famous Movie Directors and Their Films

Alfred Hitchcock Presents
The famous statue of Dinard in tribute to Alfred Hitchcock and his movie “The Birds”, erected on the occasion of the “Festival du Film Britannique”. Photo by Thibaut Démare.

Like so many other people, I too watch hair and makeup tutorials on YouTube. I’ve found that the majority of videographers film their hair tutorials from the front. Or from the back, like from the perspective of a hair stylist. Well, I came across some pretty unique hair tutorials sometime in 2019. The videographers/hair stylists filmed their tutorials completely different. They chose to film their tutorials in the style of famous movie directors and their movies.

My series of tiny home posts shows that many YouTubers create high-quality videos. The videos below are no different. The videos below, are extra special: they were filmed on a sound stage, with props and special effects. Both entertaining and educational!

Overview

What you’ll see below, where possible, is a short background on the movie and/or director, a preview of the original film or an excerpt, and then the tutorial. Thankfully, IMBD has some nice overview videos of famous directors. (Thanks, IMDB!)

The directors/movies are:

  • Stanley Kubrick/The Shining
  • Spike Lee/Do The Right Thing
  • Wes Anderson/Moonrise Kingdom
  • Alfred Hitchcock
  • Stan Lee & Brian Cooglar / Black Panther

I am very excited to share this post. I wrote it way back in 2019, and have been saving and adding to it, while sharing other posts. Now it’s finally time to share. So with probably my longest blog post title yet, enjoy!


1. Stanley Kubrick, “The Shining”

The Shining is a movie adaptation of the book of the same name, written by mystery/thriller writer extraordinaire, Stephen King. The book was published in 1977. The movie was directed by Stanley Kubrick and released in 1980.

Stanley Kubrick didn’t just make thrillers, but his movies did have a psychologically subversive twist to them. Kubrick was pretty influential in film making. Here’s a summary of his style, by IMDB.

The Shining

The Shining is about a man who takes his family to live in an isolated mountain retreat as the winter caretakers. He…succumbs to the isolation.

Twist Out Tutorial In The Style Of “The Shining”


2. Spike Lee, “Do the Right Thing”

Do The Right Thing was released in 1989 and directed by Spike Lee. Many of his films, or joints, are set in New York City, and especially the Brooklyn neighborhoods of Crown Heights or Bed Stuy. Many of his films’ themes center around race and society. He has some distinctive film making cues that this IMDB video showcases.

Do The Right Thing is about the day to day life for residents in a predominately black Brooklyn neighborhood during a hot summer. The tutorial picks up style and scene elements from this movie, some of which are seen in this trailer.

Wash and Go, in the style of Spike Lee (with Do The Right Thing references)


3. Wes Anderson, “Moonrise Kingdom”

Hair Puff Tutorial, in the style of Moonrise Kingdom (Wes Anderson)

 


4. Alfred Hitchcock

Another dominating name in film making. Unlike Stanley Kubrick, Alfred Hitchcock specialized in thrillers and psychological thrillers, only. Pretty much all of his movies and Alfred Hitchcock Presents shorts have a very similar style. Check out the guide below and the tutorial following.


5. Stan Lee/Ryan Cooglar, “Black Panther”

Black Panther is based on a comic by Marvel, heavily influenced by legendary comic book artist Stan Lee. The movie, released in 2018, immediately became a cultural phenomenon. This scene below is when the main character, T’chala, goes into the underground science lair to check out some new tools and suit. The director, Ryan Cooglar, has completed other movies, but not really enough to have a distinctive style.

Scene from Black Panther

Bantu knots tutorial, in the style of Black Panther

Greatly mimics the scene above.

 


Learn More

What I liked about these tutorials were was not just the reference to pop culture — they also reflected the booming business of Black hair and the natural hair movement and acceptance within the African American community.

The business of Black hair is a big business and natural hair video tutorials are a popular sub-genre of beauty “vlogs” which are themselves very popular on YouTube. CNBC did a good job of summarizing the business of Black hair, in their video below, if you’re curious to learn more.

 


Image credit: Ceremonie van volwassen worden, Totoya Hokkei, c. 1822, colour woodcut, h 204mm × w 178mm – View original at Rijksmuseum.nl

FIAF Animation First, Feb 7-10, 2020

Over the weekend of February 8-9, 2020, I attended the third iteration of Animation First at the French Institute Alliance Française. It was also the third time I’ve attended the event, but looks like the first time I’ve written about it. As with the previous two events, I enjoyed myself and the animations.

Here are a few of my highlights and a few photos at the end.


Highlights

Louise by the Shore

The feature-length film I watched was Louise by the Shore (2016), by Jean-François Laguionie, the guest of honor. It was a movie about remembering the past and living simply.

 

Animated Shorts, by Jean-François Laguionie

I also watched a series of Jean-François Laguionie‘s early animated films, which had been recently restored and digitized. His works were both hand-drawn and stop-motion, such as the example below.

The animation style was relatively rudimentary, compared to today, but the stories were really good. I saw some student works and I’d say one of the key differences came down to telling a good story over technical ability.

The video below needs no translation.

Lorenzo Mattotti: Panel Discussion and Illustrations

I also attended a panel discussion with Lorenzo Mattotti, who recently directed The Bears’ Famous Invasion of Sicily. He has also been an illustrator for New Yorker magazine for many years and examples of his magazine covers were on display.

After the talk, he signed books. Those lucky people got a sketch from him, right there on the spot. Amazing.

FIAF Animation First, Feb 2020


I wanted see the The Swallows of Kabul but it came on right after Louise by the Shore. I didn’t want to sit for back to back films and I wasn’t in the mood for something super heavy. Hopefully it will be released in the US, soon.


Photos