HARVEST · DESIGN CHALLENGE · MAR 2023
Keeping Gen Zs accountable for their food consumption
CGI's file upload process was plagued with accessibility issues and a lack of clear usage guidelines. This led to longer onboarding times for new customers and challenges for existing ones. My redesign addressed these pain points which enhanced visual consistency across 7 CGI products and drove a 60% boost in development output.
Team
John - Senior designer / John - Senior designer / John - Senior designer / John - Senior designer
Skills
Design systems / Documentation
Role
UX Design Intern
Timeline
May - August 2023
[CHALLENGE] In March 2023, my friends and I took on the challenge presented by UWaterloo's annual TILE Designathon – to craft an experience fostering positive social challenge. [Insight] Research and user interviews led us to discover that Gen Zs lacked external accountability mechanisms hindering their efforts to curb food waste. [Solution] In response, we created harvest - a social app designed to track meals and build healthy habits. Of over 100 participants our team placed first!
TEAM
Alyssa Tan / Miguel Ting / Stella He
CONTRIBUTIONS
Problem exploration / User interviews / wireframes / Figma Prototyping / Pitching
TOOLS
Figma, Figjam
Timeline
March 2023 (2 days)
During our pitch, we emphasized three key functionalities of Harvest, each designed to encourage responsible and mindful eating habits.
We conducted 4 user interviews and uncovered a common obstacle among Gen Zs: they struggle to minimize food waste due to a lack of external accountability mechanisms.
In response to this insight, we designed a personal food diary within Harvest. This feature enables users to log their meals both before and after consumption, serving as an accountability partner to encourage them to consume their meals more responsibly. Users are encouraged to keep logging their meals through incentives like streaks.
The Meal Tracker Hub provides users with a comprehensive overview of their entire food diary entries. The hub also encourages the habit of logging meals by offering additional incentives such as achievements and friendly competitions within friend groups for consecutive meals eaten.
The fight against food waste is a shared responsibility. Sharing meals consumed socially amplifies that commitment and strengthens a sense of accountability.
I used to believe I had to stick to a rigid process and the same tools for every design project, such as creating personas or conducting user interviews. But participating in designathons taught me that UX artifacts are more like a toolbox. Now, I pick the right tool for the job instead of just sticking to what I've always done. It's about being intentional in your process, ensuring that each step and insight fit together. Design competitions, especially with time constraints, almost demand this intentional approach to your process.
During the competition, we dedicated about 70% of our time to customer discovery. We did loads of research, both primary and secondary, to nail down the problem we were tackling for our target market. The judges loved how thorough we were in validating our problem. It taught me that it's crucial to pinpoint the right problem before jumping into prototyping with Figma.
The competition happened over a weekend so our team had little time to waste. What worked well for us was delegating tasks before the competition so that when we got the challenge we could get straight to work. We also completed the customer discovery portion of the project as a team so that we were all on the same page before splitting up into our respective roles to complete the project.
I’m in the process of renovating the detailed case study for this project. While the hard hats are on, feel free to explore my other other work.
During the summer of 2023, I had the privilege of interning at CGI, a global IT and business consulting leader with a rich history of serving over 50,000 clients since its establishment in 1976. The focus of my term was expanding CGI's Ascent design system. During my time I improved 7 components from the ground up. This case study will guide you through the comprehensive process of enhancing CGI's file upload functionality—an undertaking I spearheaded from inception to completion.
The Ascent design system:
Supports
Focusing on financial management solutions
Supports
CGI designers and devs
across the globe
Spans
Components and styles a within the design system
TEAM PICTURE
Throughout my design process I considered 2 major user group: end customers interacting with shipped CGI products and CGI designers/developers engaging with the file upload in the back end with Figma. These perspectives were crucial to ensure that the file upload feature not only met the immediate needs of end customers but also integrated into the design and development workflow of CGI's internal teams. Below outlines the significant tasks each user group performs with the file upload feature:
End Customers:
CGI Designers and Developers:
USER TYPES FOR THE FILE UPLOAD
Issue: Users, such as Nick, faced challenges when uploading files across various categories to configure their products. The current design necessitated scrolling between upload sections, causing inconvenience, especially with a higher volume of uploads and potential longer onboarding times.
Some forms of color blindness diminished the visibility of the red hue in error text, making failed uploads difficult to identify at a glance. Additionally, successful and unsuccessful file uploads were denoted by identical icons, further complicating the distinction—especially cumbersome when managing a substantial number of uploads.
Instances of the file upload were not consistently implemented across CGI’s products, deviating from the specifications of the original design. Varied use of icons and layouts resulted in visual inconsistencies across platforms.
Some forms of color blindness diminished the visibility of the red hue in error text, making failed uploads difficult to identify at a glance. Additionally, successful and unsuccessful file uploads were denoted by identical icons, further complicating the distinction—especially cumbersome when managing a substantial number of uploads.
Instances of the file upload were not consistently implemented across CGI’s products, deviating from the specifications of the original design. Varied use of icons and layouts resulted in visual inconsistencies across platforms.
Issue: Users, such as Nick, faced challenges when uploading files across various categories to configure their products. The current design necessitated scrolling between upload sections, causing inconvenience, especially with a higher volume of uploads and potential longer onboarding times.
CLICK TO ENLARGE
This project marked my first time working on a design system. It was intimidating given its scale, but I came up with a 3 phase research plan to make it more manageable. The goal was to redesign the fil upload process and to do that i had to understand: CGI’s design system, how competitors handled their file upload process and any development constraints.
3 PHASE RESEARCH PLAN
When I joined CGI, their design department was going through changes like completing their transition to Figma and growing their design system. However, some components weren’t well-documented which was a major contributor to inconsistent development
The biggest constraint of the project was that file uploads had to be retained within a modal, as this was how it was already implemented.. Altering this approach would mean significant allocation of engineering resources. It was a case of "it is what it is," and we had to find a way to make the most out of this existing setup.
Looking at other design systems of similar maturity, I performed a competitive analysis to learn how these systems dealt with our 3 key challenges: spotting failed uploads, managing scalability, and keeping things consistent. Below is a summary of how they handled the problems:
I made a table that compared the UI of the competitors file upload component. A common theme was the use of iconography which improved scanability. However, when it came to handling uploads in multiple sections for scalability, no one had a clear example. It was a bit of uncharted territory.
To maintain consistency, I noticed that other design systems had design documents for their components. They covered everything from how things should look to the nitty-gritty details. CGI, unfortunately, didn't have something like this for file uploads. So, I took notes on how others did it – the styling, the structure, the dos and don'ts. These notes became my guide for making our design both seamless and well-documented.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Highlighting failed/errors in file uploads through iconography enables users to quickly spot any issues, especially when dealing with lots of files.
The status of file uploads should always be visible so that users can instantly tell if files failed to upload. This eliminates the need for users to scroll to check for upload errors.
Expanding the dropzone area enhances accessibility for a broader user base, including those with motor or visual impairments. A bigger dropzone makes it easier for users to drag and drop files.
Placing upload specifications outside the dropzone aligns with standard form and input field design practices. Jakob’s Law states that users are accustomed to finding instructions and guidelines outside input fields, making the design more intuitive. This approach also offers flexibility in the amount of instructional content provided.
Before diving into design, I took a step back to map out the journey that end users would take during file uploads. I split their path into 2 scenarios: a straightforward single-section and the more complex multi-section uploads. Doing this allowed me to identify the various instances (ex: errors, successes and warnings) that I needed to design. From here, I used my learnings from my 3 phases of research to make the first design.
FILE UPLOAD JOURNEY MAP
REDESIGN 1 FOR THE FILE UPLOAD
Unlike other companies, CGI’s design department has a limited budget for user testing, typically reserved for high fidelity product prototypes. As a compromise, our team uses critique sessions to test designs and get actionable feedback. In total, I tested my first design with 7 users, during which I gained 2 pieces of key feedback.
Extended scrolling still persists:
“Maybe there’s a way to bring more attention to the bottom message for the action bar? The updated icons on the uploaded files are great and I think we can use a similar visual language for the action bar.”
Action bar visibility
“The bigger dropzone is a great addition but I think the issue of potentially scrolling for a long time is still present. As a result, users can’t easily switch between the upload sections. I recommend looking at our tabs or dropdown component.”
Unlike other companies, CGI’s design department has a limited budget for user testing, typically reserved for high fidelity product prototypes. As a compromise, our team uses critique sessions to test designs and get actionable feedback. In total, I tested my first design with 7 users, during which I gained 2 pieces of key feedback.
Recognizing the challenge of section navigation, I introduced a toggle switch for seamless transitions between file upload sections.I chose this option instead of a dropdown so that users could efficiently change sections in 1 click as opposed to 2 clicks if it was a dropdown. Following the principles of the Gutenberg Principle ( Z-Pattern Layout), I strategically organized the modal layout, placing the primary CTA at the end of the flow guiding users to the next action.
My first design of the action bar didn’t distinguish its states. To better improve the visibility of the system status I added icons to the receptive action bar states, which were consistent with the icons that I was already using within CGI’s design system.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
Putting all the pieces together, this is the redesigned file upload process for CGI! I made high-fi prototypes to demonstrate the flexibility of the components showing use cases for single and multi section file uploads.
.gif)
Considering my 2nd user group of the file upload (CGI Designers) I made tweaks using Figma’s variant and properties feature to allow our designers to easily customize the upload component - speeding up their iteration process.
MAKING QUICK CUSTOMIZATIONS WITH MY FINAL DESIGN
OVERVIEW OF ALL THE COMPONENTS/VARIANTS I DESIGNED
Recall that one of our main issues with the current design was that its implementation was inconsistent across our products. What was missing was a source of truth that designers, devs and PMs could refer to when implementing file uploads, So I developed a comprehensive usage and best practice guidelines to help our teams understand how to use the pattern even after my internship ended, I took inspiration from the usage documentation I discovered during phase 2 of the research.
FILE DESIGN DOCUMENTATION
In the summer of 2023, I interned at CGI, a global leader in IT and business consulting. During this internship, I played a key role in expanding their Ascent design system, which underpins seven products used by over 150 developers. This case study will take you through my journey of improving the file upload process, a project I spearheaded.
Increasing the dropzone area's height enhances accessibility, catering to a broader user base, including those with motor or visual impairments, making drag-and-drop easier.
Increasing the dropzone area's height enhances accessibility, catering to a broader user base, including those with motor or visual impairments, making drag-and-drop easier.
Increasing the dropzone area's height enhances accessibility, catering to a broader user base, including those with motor or visual impairments, making drag-and-drop easier.
In the summer of 2023, I interned at CGI, a global leader in IT and business consulting. During this internship, I played a key role in expanding their Ascent design system, which underpins seven products used by over 150 developers. This case study will take you through my journey of improving the file upload process, a project I spearheaded.
