Project Overview
Project Type: Academic
Role: UX Researcher, UX/UI Designer, Branding Designer, Project Manager
Timeline: 24 Hours
Tools: Figma
While at BrainStation, I participated in a 24-hour hackathon hosted by General Motors and BrainStation. Tasked with creating a digital solution in support of GM’s Goal Zero - I worked collaboratively with a multidisciplinary team to develop a proof of concept iOS mobile app that incorporated gamification to motivate and improve millennial driving habits. My primary contributions were conducting research, wireframing and prototyping, as well as managing the project timeline within the team.
🏆 Our digital solution was awarded 1st place - winning the hackathon 🏆
The Team
2
Data Scientists
2
UX Designers
2
Web Developers
Design Process
Modified Design Thinking and Double Diamond Processes were utilized throughout the hackathon to adhere to our strict time constraints. These modified processes allowed us to work effectively, stay on track, and ensure we were always keeping the user central.
Discover
The Challenge
As a result of climate change, climate action initiatives have become a priority for the automotive industry. General Motor’s current vision in response to this is Goal Zero - Zero Crashes, Zero Emissions, and Zero Congestions. Through this initiative, their challenge to us was: “How might we track & support our journey to Goal Zero to build a safer, greener, more equitable world for everybody?”, with an emphasis on predicting, tracking, and communicating this vision.
Brainstorming
Our team immediately kicked off with a brainstorming session to generate ideas. After familiarizing the team with FigJam, we briefly chatted through the challenge, had engaging discussions, and allowed time for everyone to throw as many ideas as possible on our virtual whiteboard. It was collaborative, fun, and allowed the design team the opportunity to answer questions about the design process.
After two rounds of voting, the team moved forward with two key ideas - gamifying the driving experience, in addition to offering suggestions based on driving history in order to encourage better driving habits in support of Goal Zero.
Team 10 FigJam Board
Who are we designing for?
After aligning on direction, our rockstar data scientists went to work in search of data that would support and validate our ideas. They soon came back with insights on gamification, data models to support and present to GM, and market research that helped us determine who our target user would be - millennials. We chose millennials for the following reasons:
Tech Savvy
Millennials are a tech-savvy generation - supporting best a digital solution
Green Mindset
Millennials have the greenest mindset, thus would be receptive to GM's Goal Zero
50%
GM only occupies 50% of the millennial market - presenting a prime opportunity
Define
Proto-Persona
With a clear focus, myself and the other designer went to work developing a proto-persona to help inform design decisions for the duration of the hackathon. Meet Samantha - who's behaviours, pain points, and motivations were referenced late into the night and early into the morning.
Proto - Persona: Samantha Williams
Refined Design Challenge
While creating our persona, we realized we needed to refine our HMW statement to better reflect the team's focus and our target user. After checking in and receiving full team alignment, we updated our how might we statement before proceeding further.
💡 Key Learning: Communicate early and often with your team in order to maintain collaboration and trust
Refined Design Challenge:
"How might we encourage millennials to improve their driving in order to achieve GM's Goal Zero?"
Task Flow
After quickly authoring several user stories, we identified a primary task - to review rewards from the last trip. With this task, created a task flow diagram to visualize how our digital solution would support this task. As our web developers had communicated early on about coding constraints, we kept this task flow minimal in order to adhere to our short project timeline.
Primary Task Flow - Review rewards from last trip
Develop
UI Inspiration & Branding
We sought out gamification inspiration from existing applications commonly used by millennials, and decided to leverage features we liked from the McDonald’s and Starbucks apps, including the progress bar and points balance display.
UI Inspiration - McDonald's and Starbucks Rewards Programs
GM Brand Assets
To ensure a seamless user experience in the design of our digital solution, we collected assets to adhere to GM brand guidelines.
From Sketches to High-Fidelity
With our protopersona, task flow, and UI inspiration in mind, we created sketches which were further fleshed out into mid-fi wireframes, which we then developed into high fidelity. While this part went late into the night and early morning, it was so much fun to collaboratively work with another designer - it was filled with suggestions, learning tips and tricks from one another, and plenty of “aha” moments - like when we found the perfect icon, or made the animation work to our liking.
Deliver
Developer Handoff
After completing prototyping, the next morning our web developers set to work coding our designs by inspecting the CSS and HTML in Figma. The design team stayed available to provide clarification or images to support completion. The web developers brought our wireframes to life using React, and as a team we had successfully developed an end-to-end digital solution!
Our final step was to produce and present our digital solution to the GM and Brainstation team for evaluation.
Prototype Developed in React
Conclusion
Results
After presenting our team’s designs, we were delighted to hear that out of a total of 10 teams, our digital solution had won! It was an incredible and rewarding feeling to have successfully applied the principles we recently learned in our respective disciplines to create a data-driven digital solution. I believe factors to our success included constant communication, the willingness to jump in and help one another out, and the ability to discuss differences in opinion in order to obtain team alignment.
As our prize, we had the opportunity to chat with several members of the GM organization - including recruiters, product managers, and a design thinking consultant. It felt great to share our design and process, and receive positive and constructive feedback on not only on our work, but the career journey that lies ahead.
Key Learnings
Within 24 hours we had successfully designed and developed an end-to-end digital solution. This was an invaluable experience in which I took away the following:
🧠
Cross-collaboration
Brainstorming with a large group of people with diverse skillsets and experience was an invaluable experience - it really opened us up a world of possibilities, and allowed for the best solution to be made.
💬
Communication
Maintain communication with developers throughout the design process, not just after handoff. By speaking with them constantly, we were aware of limitations from the beginning.
⚖️
Working within Constraints
This was a great experience in understanding both business and technical constraints. Successfully working within real world constraints to create a digital solution has me excited to practise this in industry.
Want to work together?
Get in touch for opportunities, or just to say hi 👋
