Petit Duc

Petit Duc is a travel emissions calculator focused on the carbon footprint of company events and offsetting those carbon emissions.

Product Type

Mobile and Desktop User Form

Role

UX / UI Designer

UX Researcher

Mobile app screen from Petit Duc showing a 'Measure Your Impact' feature with an illustration of Earth and a woman standing next to it, indicating travel impact, with a 'Start Measuring' button at the bottom.
Mobile app screen displaying a transportation survey with questions about trip details, including how traveled, car type, carpooling, return trip, and a button to calculate emissions.

Tools Used

Figma, Figjam,

Figmake

Duration

Current

Prototype Link

Problem

Petit Duc wanted to provide users with a travel form that felt intuitive and easy to complete that also aligned with their brand identity and values.

Solution

I built off of the original Petit Duc form implementing the visual identity of Petit Duc while also consolidating key information into just a few steps in order to provide users with the most streamlined experience possible.

Conducting Research

The first step for creating the Petit Duc Travel Emissions Form was to connect with my client on previous research and conduct my own user research to better understand the product.

Step 1/5: Client Review

Goals:

Catch up with where the Petit Duc product is and understand the goals and needs of the client.

Takeaways:

  • We reviewed user stories prepared by the client prioritized from low to high

  • The scope of our project was defined for the team

  • The product background and user pain points were clarified

Document titled 'Petit Duc — Client Kickoff Agenda' detailing the structure of a kickoff meeting with sections for introductions, vision & priority, scope clarification, among others.

Step 2/5: Competitive Analysis

Goals:

Understand how other companies are approaching the carbon emissions field as well as what the common patterns and best practices are.

Key Insights

  • Users want to trust that their money is being used properly for carbon offsetting

  • The ability to calculate carbon emissions for multiple travel modes is necessary

  • Users are looking for a low-cognitive load and straightforward experience

Comparison of three websites: Sustainable Travel International, MyClimate, and TerraPass, with descriptions of their focus on climate protection, carbon footprint reduction, and sustainability solutions.

Step 3/5: User Interviews

Goals:

  1. Gauge the general knowledge of carbon emissions

  2. Identify travel patterns for potential users

  3. Clarify user expectations and needs for this product

Key Insights

  • General knowledge of carbon emissions is low, more of a good thing vs. bad thing understanding

  • Users would be willing to monetarily offset emissions if they can trust the company

  • Users are looking for results and proof that their donations are being put to use

  • A short form length is ideal, around 30 seconds to a minute

A research interview guide titled "Petit Duc Interview Discussion Guide" with sections for warm-up, background questions, and core questions, featuring a blue header and black text.
A document titled 'Interview Responses' with questions and answers about internet use, surveys, and device preferences.

Step 4/5: Affinity Map

Goals:

  1. Identify patterns and key themes

  2. Prioritize key features and user needs

Key Insights

  • Users prefer short form experiences where information is clear and concise

  • Establishing trust with the users is a key factor in encouraging carbon offsets

  • Users are looking for some kind of educational piece to help them understand carbon emissions

  • Results and proof are key to establishing trust between the users and the company

Comparison of feedback and preferences for three individuals: Meghan, Liam, and Jalen, on various aspects of form completion, travel, and trust. Meghan's feedback is mostly positive, Liam's is generally positive with emphasis on trust and timeliness, while Jalen's is mostly negative, focusing on form complexity and need for more information.

Step 5/5: User Personas

Goals:

  1. Define target audience and users needs

  2. Identify the scope of my product

  3. Prioritize features of the product and hierarchy of problems to solve

User Personas

  1. Event Organizers

  2. Event Attendees

Additional Methods of User Research

  1. Research Plan

  2. Project Timeline

  3. Business + User Goals

Designing The Product

After completing my product research and analyzing the data I began to design the UI for the Petit Duc Travel Flow.

Design Vision

The visual direction for this product is based on the Petit Duc visual identity and the simplification of the user form.

Color and Typography

Step 1/8: Visual Identity

The Petit Duc company already had an established brand identity with colors provided as well as a logo. We also used the Government of Canada Design System for key components and fonts.

Government Of Canada Design System

Official Canada government webpage for GC Design System v1.0.0, with links for getting in touch, token library, and French version.

Petit Duc Brand Identity

A graphic comparing accessible color combinations for branding, featuring color palettes, contrast grid charts, and color information data.

Step 2/8: User Flows and Task Flows

With the visual identity provided for our team we set out to create user flows and task flows in order to better understand the flow and navigation of our product.

My teammates focused on user flows mapping out a larger experience of the Petit Duc project where I prioritized a task flow that represented the travel form which I was working on.

Task Flow

Flowchart diagram illustrating tasks for customizing event forms and completing travel forms, with color-coded steps and decision points.

User FLow

Flowchart diagram depicting event organizer process and participant process for event management, shown in two sections with various decision points, actions, and flow lines.

Step 3/8: Low-Fidelity Wireframes

Using a pre-existing form provided by Petit Duc the team and I created two potential low-fidelity mockups to be discussed and reviewed with the client.

Original Form

Screenshots of a travel planning app showing steps to record a completed route. Step 1 asks which route to record with options for Round trip, Outbound, and Return. Step 2 asks if multiple modes of transportation were used, with options for No or Yes, and includes a note about not counting short walks from parking lots or bus stops.

Low-Fidelity Wireframes

Screenshots of a mobile app interface showing steps for calculating carbon emissions from transportation. The first screen displays options for travel modes: car, bus, train, flight, and multiple modes, with a 'Next' button at the bottom. The second screen shows detailed trip info, including trip distance, mode of transport, starting address, destination airport, and trip type, with buttons for calculation and navigation.

Option 1 is the form I presented, initially it was in an incomplete state and Option 2 was chosen. I felt strongly about my design decisions and iterated upon my wireframes then presented them to the client in a more complete state which resulted in the client choosing to go in the direction that I proposed.

Step 4/8: Mid-Fidelity Wireframes

Screenshots of a mobile app's travel planning feature, showing steps for entering travel details, trip type, and transportation, with fields for start location, destination, trip type options, and return trip question.

After solidifying the direction of the travel form I combined ideas from both versions and utilized client, mentor, and peer feedback to create mid-fidelity wireframes.

Step 5/8: High-Fidelity Wireframes

Screenshots of a mobile app interface for trip planning, showing three steps: travel details with starting location and event destination, trip details with trip type options, and transportation mode with return trip question and emissions calculation button.

Utilizing feedback from client, team, and mentor meetings, I iterated upon my designs to create High-Fidelity wireframes for prototyping and user testing.

Step 6/8: Prototyping and User Testing

Flowchart showing app screen designs for a trip planning app, including steps for travel details, trip details, transportation mode, and calculating emissions, with multiple interconnected screens.

Next I created functional prototypes to be used for user testing in order to gather useful feedback and insights.

User Testing

Goals:

  1. Identify any problems or points of confusion experienced by users

  2. Gauge the overall effectiveness of the form

  3. Determine the average completion time of the travel form for users

  4. Gather data to justify the design decisions that I made

Key Insights

  • Users were able to complete the form in less than a minute for both the direct travel form and multi-stop form

    • 45 second average for direct, one minute for multi-stop

  • The language used for action buttons needed a change for user confidence and understanding

  • Users did not feel overwhelmed by the information that they were being asked to provide

Title: Usability Testing Plan. Subtitle: Petit Duc. Goals include measuring task completion time, identifying sources of confusion, understanding expectations, discovering improvements, and gauging willingness to offset carbon footprint. Participants: 5. Tasks: 2. List of tasks: complete a basic form and use Multi-Stop travel logging.
Screenshot of a task and participant report with tasks numbered 2, including completing a travel form with multi-stop travel logging, and a participant's feedback on using direct and multi-stop versions of the travel form.

Step 7/8: Priority Revisions

Screenshots of a transportation survey app interface showing different versions of a form for calculating emissions based on transportation mode, car type, carpooling, and return trip options.

After conducting user testing I reviewed the feedback with my team and client then carried out priority revisions updating the wireframes to a higher functionality.‍ ‍

Revisions included and were not limited to:

  1. Addition of secondary category option field

  2. Updated language of action buttons

  3. Improved consistency throughout flow using GCDS components

  4. Removed default states from selection fields

Step 8/8: Current Fidelity

Once the priority revisions were complete I reviewed with my team and presented the designs to our client.

The current version of the user flow was approved for our required deadline.

Screenshots of a mobile app interface called 'Petit Duc' for measuring carbon footprint through travel data entry. The app has four steps: 'Measure Your Impact,' 'Travel Details,' 'Trip Details,' and 'Transportation,' with options for start location, destination, trip type, car type, and return method.

Client, user, mentor and team feedback was considered and implemented throughout each step of this design process.

Version Timeline

Sequence of four mobile app screens showing a trip recording process: 1) a route selection screen with options for round trip, outbound, return, and navigation buttons; 2) transportation method options including car, bus, train, flight, and multiple modes; 3) trip detail screen asking about trip type with options for direct or multiple stops; 4) trip detail confirmation with choices for direct or multi-stop trip, plus informational text.

Next Steps and Lessons Learned

Next Steps

  • Continue working with Petit Duc as a freelance UX / UI designer

  • User test current version of product

  • Review insights with my client and then conduct priority revisions followed by user testing

Lessons Learned / Reflections

  • When I presented my design idea to my client and team it was very unfinished in a way that did not fully represent the concept I was going for. For the future I will make sure to solidify my ideas before presenting them to any team or client.

  • I learned how to work cohesively with a team and collaborate with other designers in a space where there can be competing design directions

This product was created as my final capstone for the DesignLab UX Academy. I am continuing to work on this product with Petit Duc currently as a freelance collaborator.