Industry Sprint
Contribute to a Safe and Equitable Future, One Tag at a Time
Team
UX Designers
- Hayden Duong
- Tiffany Hui
- Leona Burlew
- Vincent Ha
- Alessandro Dechellis
- Eddie Ni
- Arsen Iskindirov
- Harmanjeet Khera
- Jacky Cao
Role
UI designer, Prototyper, UX Researcher
Tools
Figma, FigJam
Timeline
24 Hours
00 - Prologue
The Solution
Get Rewarded
Earn points through GM Rewards
GM rewards members can earn additional reward points by participating in our image tagging mini-game.
Image Tagging Game
Tag objects to improve artificial intelligence
Designed for the purpose of tagging and classifying image data to be used in the development of GM's artificial intelligence in their fleet of autonomous vehicles.
Feel the impact
Learn about the contribution you have made by playing the game.
Once the game has been concluded, users can learn and feel that they have made an impact thus feeling more incentivize to continue earning more.
01 - Team building
First Meeting
Brief
This industry sprint was hosted by BrainStation and General Motors was my class cohort's specific client. They presented us with a problem space and a how might we statement. The challenge was to place us into a multidisciplinary team (Data Science, UX Design, Web Development) and have us work together and adapt to each other's strengths and weaknesses to come up with a digital solution in 24 hours that will address their GOAL ZERO initiative and present it to the board the next day.
The experience was exciting as well as nerve wracking all the teams were randomized within our respective disciplines. But this experience took me out of my comfort zone further as I get to meet and collaborate with new people.
01 - Strengths & Weaknesses
My team and I immediately got together in a video call to quickly become acquainted with each other. We began to discuss our strengths and weaknesses that pertains within our respective disciplines and what kind of value do we all bring to this sprint as well as role distribution.
02 - Brainstorming
Tiffany organized & created a FigJam session with everyone to brainstorm their ideas and have each their voices heard as well as providing feedback. After everyone presented their ideas, we then democratically vote on whose idea is the most feasible to develop in a short amount of time.
Create an image tagging web application to help with AI development while to educate and empower adoption of Automatic Vehicles of new and existing consumers.
02 - Schedule & planning
Divide & Conquer
03 - Research
Let the Hustle Begin
The data science team and I started to divide up the work and research. I started to sift through trends and social sentiments as well as academic journals to see how to people feel about autonomous vehicles. While the data science team will analyze data sets to look for patterns that we could use to shape our narrative.
03 - persona
Who are we targeting?
After researching on supply and demand of the automatic vehicle adoption, we then consolidate all of our sources to create our persona that would represent a millennial early adopter of new technology that is environmentally and money conscious who is also starting a new family.
Meet Tom Jameson! A 32 year old Sales Manager who is enthusiastic about adopting new technologies and is budget conscious as an individual who is about to start a family.
Meet Tom Jameson! A 32 year old Sales Manager who is enthusiastic about adopting new technologies and is budget conscious as an individual who is about to start a family.
Copy Writing & Editing
Once we have the persona skeleton formed I then let Leona take the lead and assist us with copy writing and editing. It was a major relief that Leona had a previous background as a copy writer which accelerated our workflow when writing and editing on the fly.
Logic Flow
Regarding the flow of logic in the persona, there were a lot of insights that came from the secondary research, thanks to the Data Science team. During the consolidation process, the UX and Data Science team began to tie up any loose end and created a solid narrative that describes what General Motors' next ideal target customer would be.
Goals
With the persona identified we quickly laid out a few goals for our project to mainly focus on.
- Meaningful ImpactHelp Tome feel like his contributions to GM's Goal Zero is impactful
- Trust BuildingBuild Tom's trust in GM as an environmentally conscious and forward-thinking brand that matches his personal values.
- Rewarding ExperienceReward Tom for his participation in increasing safety and reliability of self-driving vehicle
04 - User Flow
The Skeleton
Tiffany, Leona, and I created a visual task flow that would be the primary feature for our digital mobile solution. Users will go through an image tagging game similar to captcha system when verifying that you're human on the web.
The main objective is to give user incentives to play the game through gifts and discounts which they can accumulate points the more frequent they engage with the product. Also, our secondary objective is to allow users to be educated and be part of the next big innovation process.
Once all three of us are satisfied with the outcome, we then notified the other teams to gather feedback and quickly discuss on tweaks that we can implement in order to move onto the next step of the design process.
The main objective is to give user incentives to play the game through gifts and discounts which they can accumulate points the more frequent they engage with the product. Also, our secondary objective is to allow users to be educated and be part of the next big innovation process.
Once all three of us are satisfied with the outcome, we then notified the other teams to gather feedback and quickly discuss on tweaks that we can implement in order to move onto the next step of the design process.
Wire Framing
As the night continues on, the UX team including myself are starting to feel more pressure to get the design to the web development team on time. We started to scramble a bit and the work flow became more inefficient. So I took it upon myself to have a group with discussion with the UX team and make step by step plan on how we are going to get the design to the Web Dev. team on time.
Tiffany and I would be designing the prototype collaboratively while Leona was working with the Data Science team to begin creating the slide deck. So what we've manage to create was this low-fidelity wireframe below. We took the design to the Web Dev team for feasibility feedback.
Tiffany and I would be designing the prototype collaboratively while Leona was working with the Data Science team to begin creating the slide deck. So what we've manage to create was this low-fidelity wireframe below. We took the design to the Web Dev team for feasibility feedback.
Challenges & Obstacles
There were many struggles that our team went through during the design and hand off process. Each of the disciplines (UX, Web Dev, and Data Science) still had trouble know how each our processes would fit into the over arching product development process and we got into arguments on which objective should hold higher priority. Also the 24 hour time limit gave all of us additional pressure to rush and omit a bunch of steps in product design.
Due to the time we have left before going into the next day, Tiffany, Leona, and I all agreed to have compromises for the hand-off and not focus too much on getting all the step in the design process check off; given the nature of this sprint. So ultimately have omitted a bunch of stages including user testing in order to give time for the Web Developers to develop the app for the presentation.
Due to the time we have left before going into the next day, Tiffany, Leona, and I all agreed to have compromises for the hand-off and not focus too much on getting all the step in the design process check off; given the nature of this sprint. So ultimately have omitted a bunch of stages including user testing in order to give time for the Web Developers to develop the app for the presentation.
05 - High fidelity wireframe
Putting it all together
Asset Collection
Tools Used: CSS Viewer Plugin
Tiffany took upon herself to handle all of the asset collection while working with the Web Developers during the hand-off stage. She used the CSS viewer plugin and look all over General Motors website to gather GM related fonts, color palettes, and graphics.
Prototyping
After Tiffany has gathered all the assets needed for the high-fidelity; she then injected them into the UI and the result is what it looks like below. It was time for me to take over and start stitching up everything and created all the interactions and animations. While keeping animations to a minimum, I have made all the interaction very straight forward and simple for the Web Developers to easily code the interactions.
06 - Results & Conclusion
The Aftermath
In the end, it was an unforgettable and valuable experience for me and the rest of my team. It was a roller coaster of ride where there were humble beginnings, stressful rise, unified climax, and a satisfying climax. The whole digital solution was eventually realized, presentation was put together, and the development roster made most of what handed to them given the immense time constraints. It would result in an experience that far exceed on what Figma could do.
Upon presenting our solutions to the GM clients, there was much positive receptions received with tips and comments such as implementing the solution into their infrastructure in the future.
In terms of concept, here is the Figma prototype that was shown during the presentation which can be seen below.
Upon presenting our solutions to the GM clients, there was much positive receptions received with tips and comments such as implementing the solution into their infrastructure in the future.
In terms of concept, here is the Figma prototype that was shown during the presentation which can be seen below.
Key Learnings
- Being able to omit steps within the design process and adapt to the current situation and timeline.
- Learning how to hand-off design to the Web Developer and save time transitioning.
- Stay simple while being creative and feasible. Also being considerate for each of the discipline and their capacity to execute.
Next Steps
- Take more time to refine the design with community user testing.
- Add additional features and flesh out current task flow.
- Work on marketing concepts in order to make the digital solution more convincing.
Thank you for reading!
Related Projects
