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
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
Opened the radiator, again (and now dealing with the unfortunate rattle, again).
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.
Initial state for Sephora’s form field
Sephora uses a 3rd-party plugin for address completion
Completed address
Sephora’s formatting of saved addresses.
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
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.
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).
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.
Baymard Institute recommends avoiding ‘Quick View’ overlays and advises focusing on building better product list pages.
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:
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
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.
How Initiative and Collaboration Helped Build a Design System:
At one point in our sprint cycles, the client requested the team start building a design system. The request came with a prioritized list of components from the branding team. As the team reviewed the list, it became clear that the naming convention used by the client created some confusion and made it difficult to get started.
My experience with design systems comes from using or playing around with tools like Basecamp, Foundation, or Tachyons.
Bootstrap
Tachyons
When I saw the list, I started thinking about how to break down the designs into smaller elements, so that they could be combined again in increasingly complex ways. Rather than explain my ideas, I thought it best to show the concept.
I created a Sketch document that showed how even the most complex component could be created from combinations of individual elements, as long as they obeyed certain functional rules. The outcome was the design team was able to use my document in establishing a base for the design system. At the end of the sprint, we presented our concepts together.
Outcome
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.
The UX team 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
Initial state for Sephora’s form field
Sephora uses a 3rd-party plugin for address completion
Completed address
Sephora’s formatting of saved addresses.
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.
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
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
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
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.
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
Program from Animation First. Excited for my first event!
Reviewing scenes from the animated film, The Bearsâ Famous Invasion of Sicily
New Yorker cover by Lorenzo Mattotti
New Yorker covers by Lorenzo Mattotti
New Yorker covers by Lorenzo Mattotti
Lorenzo Mattotti autographs a book following his talk.
