Create general rules for Housekeeping section of the Kit

[khanhcao17]

Overview

Work with content design to research and create a page guiding designers on best practice for creating general housekeeping rules for their Figma files.

Action Items

Creating a quick guide on "general Housekeeping rules" for other designers.

• Research
  • [x] 1/26/2023 @TobyShanti
• Working with Content
  • [x] 2/9/2023 @ryayyychel
• Design
  • [x] 2/2/2023 @TobyShanti
  • [x] 2/9/2023 @TobyShanti
  • [ ] [Insert updated date and name of designer + comment date, a screenshot, and note any changes]
• Research - Usability Tests
  • [ ] [Insert updated date + comment date and any results]

Resources/Instructions

Figma file HfLA Figma Kit

Additional Context

• During the discovery phase of the project, DS team conducted interviews with HfLA's PMs and designers. We have discovered two prominent user stories:

• A slide deck that summarized findings from the Designers' interviews

• We did a series of interviews with designers that we asked them to walk us through their Figma files. The full recordings for the Figma Walkthroughs are on the drive. Here is a research report that summarizes the findings..

• We have discovered that some HfLA's projects create rules to combat the issues we have found in user interviews. We call them "Housekeeping rules". See some of the examples from HfLA's projects : Food Oasis

• In Summer 2022, we made some early drafts of what we thought could be a good template for Housekeeping rules. At that time, we shared our draft with a few teams at HfLA. Below you can see how they adapted our guidelines and made it their own.

Home Unite Us Project

Expunge Assist project

[TobyShanti]

1/26/2023

https://docs.google.com/document/d/17Nf5kWX0VlgDfgzAm_A-l6coIHsl4dwculYvEQNF8R0/edit?usp=sharing

[khanhcao17]

2/2/2023

I wanted to introduce Housekeeping by setting up the importance of it, but also talk about how it can get messy with multiple folks working in a shared figma file. Setting the scene for why housekeeping can prove useful.

The intention of the first page was to be a table of contents allowing for folks to dive in further on each of the suggested rules as needed.

Vision- Research of past HFLA projects showed that folks had expressed frustration over the learning curve of people joining the HFLA projects in regards to design processes and vocabulary used. Folks had also expressed a need to have newcomers joining the project have a better understanding of the purpose of the project and keep them motivated. This was my mindset going into creating the vision portion. To have folks feel connected to the project and get everyone on the same page.

The rest of the items on the table of contents page were building upon rules already in our figma kit and suggestions I found online. We dive in deeper into these rules individually in their separate pages.

[Low Fidelity Housekeeping Rules]

Name Items clearly- As a visual learner I wanted to provide examples of ways to and not to name items.

Prioritize Cleaning & Tidiness- The two main points I wanted to highlight here was for folks to keep their individual workspaces tidy and as a group to clean the shared space often so as to avoid clutter.

Keep team members informed- On this page I proposed two ways to keep team members informed. Emoji legend was taken from our established figma kit and the box idea was something I suggested based on our past conversations as a group.

Only edit your own work- I wanted folks to be mindful of respecting each others’ work and not making edits unless they are making their own copies and editing them.

[khanhcao17]

2/9/2023

I decided to reduce the amount of text in the table of contents to help avoid folks just glancing over it. I removed the “Name items clearly” part because there was some overlap with Liz’s work and what was already in the figma kit.

[ryayyychel]

2/9/2023

Introduction: I changed the title from Housekeeping to Introduction, but I'm not set on this title. Perhaps "Importance of Housekeeping" or "Housekeeping Tips" could be a better title.

The introductory paragraph was a bit long, so I shortened it by removing the definition/importance of collaboration because I think that's self-explanatory. Instead, I decided to focus on the importance of why housekeeping rules are crucial for the team to stay organized and efficient.

I changed the general housekeeping bullet points to Table of Contents because it's more sequential and also allows users to jump to the desired page quicker.

Purpose of Design: In a meeting two weeks ago, the PM was speaking on why a "Create a Vision" title doesn't make sense and I agreed. Because solving the problem with the design is a fundamental UX principle, I believe "Purpose of Design" makes sense for teams to stay focused on the feature/task at hand.

Below the short summary, I added 4 examples of how to define the Purpose of Design which are directly pulled from research I conducted for designer team focus. Page Tables was something I learned from Sandra, which is from a book she read about content design (and also the tables I used in my own content rework). Site Maps were from the research Asad conducted. User Flows is from a UX Content Design website I was researching to help teams see where they are in their design process. Finally, Solve the Problem is a reminder to the team that their design solution has to consistently solve the stakeholder's problem.

Naming Items I think Asad's original content is good, and I created a variation based on a good article I found from: https://backlight.dev/blog/naming-conventions-for-design-systems

Here, they speak on clear ways to organize naming items based on four principles: Logic, Scalability, Simplicity, and Standardization. I also added a section about updating pages with version numbers because we've seen many different versions of designs, and it's a clear way to distinguish different design versions with renaming.

Cleaning & Tidiness I decided to break this page into two sections: Cleaning in the first half, and Tidiness in the second. In Cleaning, I added a tip to set a weekly time to clean files because I read on a few websites that design teams do this to not forget to clean files. Additionally, suggesting an "Archived" page is a great way to store older files for cleanliness.

In Tidiness, I added suggestions to use Styles in Figma for colors, fonts, etc based on best practices.

Editing Work I moved Editing Work from the last page because I feel Communication makes sense to come after Editing Work since you inform team members after you edit.

I liked Asad's original content, but instead of showing Dos and Don'ts as two boxes, I expanded it to one large box to show what a personal Sandbox would look like. Happy to discuss it if that doesn't makes sense!

Communication I added one section about adding Comments because it's another great way to communicate changes to team members.