Keys Soulcare
Aveda
Nioxin
Case Study
Summi
Hack for LA
About
Resume
Contact
Hack for LA
OverviewHfLA is an organization that brings together civic-minded volunteers to build digital products, programs and services with community partners and local government to address issues in the LA region. The Design System initiative seeks to empower volunteers with the tools, documentation and templates for creating and maintaining a design system for their HfLA projects.
Roles: Lead UI Designer
Team: UX Researchers, UX/UI designers, Content Designer, and PM
Duration: 8 months
Problem
HfLA projects have a high turnover rate because when volunteers land a full-time role they leave without warning. Volunteers aren’t required to go through an offboarding process at HfLA leaving new members trying to make sense of the current project.
In addition, with the creation of a new project the stakeholder has to give a walkthrough on how to properly set up a project in Figma. Right now, when it comes to existing projects she has trouble finding their most recent designs and has a hard time following along with the progression of designs in general.
Goals
- Help new projects set up their Figma file
- Create uniformity across the organization’s 22 projects
- Reduce friction during the onboarding and offboarding process
Requirements
- Include templates for users to copy + paste fro.
- Share examples of what other HfLA projects are doing
- Be a Figma file within Figma
Context
The team is currently working on what they are calling ‘Figma Foundations’, a shift from traditional design system work. ‘Figma Foundations’ (FF) is a collection of templates designed to help HfLA teams create organized and compliant Figma files. I joined the project just as the first version was presented to the stakeholder. Since I was new and still getting familiar with the project, I focused on refining the intro section of FF. My intention was to create a UI that didn’t overwhelm and easy to scan.
Intro Section
Version 1[created by teammate]
Version 2[my iteration]
This version is not overwhelming and easy to scan.
Usability Testing [round 1]
Agile Project Management
Once we had the main screens needed to complete the first task, we put it in the hands of users.
Frames we tested
As we continued to iterate the team decided to condense the intro section into one page [as seen in image 2 “Create a Project Cover”]
Key Findings
[Based on two participants]- Users didn’t know how to copy + paste template
- The star rating system didn’t make complete sense
- Users spent only a few seconds scanning the example page
- Users clicked around looking for more frames [intro section]
Big task related issues
The skill level between the 2 participants were pretty drastic and the both of them seemed pretty new to Figma and UX/UI.
Participant 1 Didn’t know she was supposed to update the project page for her team’s file.
Participant 2 Ended up deleting everything and second guessing herself.
The research team synthesized the usability testings and gave recommendations for v2 based on their findings. The design team gave recommendations based on usability findings, user feedback, and our knowledge of how to use Figma. We were definitely coming from a place that even the most novice of user should know basic keyboard shortcuts such as cmd + c then cmd + v for copy and paste. In the end the whole team agreed to:
Updates for v2
Intro page- Change name to ‘start here’ page
- Include information on how to navigate Figma Foundations
- Only one frame per page
- No outside links
Create a Project Cover Page
- Remove Github link
HfLA Examples page
- Add information regarding checklist as a minimum requirement
- Swap out the star rating system for a checklist
- Add ‘has’ to requirements checklist to further emphasize action needed
I continued iterating on the Create a Project Cover page while also trying to slim down the examples page. I personally didn’t see the benefits of including every single HfLA example. Our PM did mention that other sections would be dependent on HfLA examples because a template just isn’t going to be possible.
Usability Testing
[version 2, round 2]The design team collaboratively worked on making changes for v2 and combined what we liked from each other’s designs, as well as feedback from researchers for the final v2. The deadline was tight, still we got it to where we thought it was ready for testing [some last minute adjustments were outside of the design team].
>>> This new final version was rich in information and included extra sections, which was straying away from my north star of creating a UI that didn’t overwhelm and easy to scan. I spoke up about this and was overruled.
Create a Project Cover
[only request was to remove Github link]
Participant 3
When we tested v2 on the third user who was a more seasoned designer he expressed his frustration:
“I feel like this is instructions on instructions on instructions. The amount of instructions doesn’t match the level of the task.”
Aha Moment
That comment resonated with me — we needed to create a whole new UI! One that is easy to scan and keeps designers at every skill level in mind. I created this one pager, a one stop shop where designers like participant 3 can grab and go. Instead of having to through 5 pages to get to finally get to the template, everything is front-loaded in the new UI and designers can choose [not required] to look at HfLA examples.
Exec Team Feedback
The stakeholder loves this new UI and has plans of turning it into a website.
My UIs
I am leading the efforts in creating templates for Figma Foundations [below is what I’ve designed thus far]. Keep in mind only the create template has been approved by the stakeholder. The design team is using that template as a reference for other sections. We are still exploring color schemes etc.Approved
Retrospective
We were so busy trying to help HfLA teams organize their projects that we lost sight of our own project. We worked on personas, but never agreed on a working persona. We talked about needing an IA, but never created one. Everytime a new designer joined, they would introduce features we’ve already decided against. Instead, we kept moving forward because this was an agile environment and the stakeholder wanted to ship the product asap.
Working with people from various backgrounds and varying skill levels can get pretty chaotic. If I were to do this again, I would spend more time establishing a workflow, some sort of roadmap, and documentation process before getting into the designs. So many hours wasted because the team was not in aligninment. The goal is to work smart, not hard. After being on this team for six months, I see how much of a game changer Figma Foundations will be for HfLA and project teams.