Don't worry...
It's coming Soon!

Google Hackathon

During week 10 of my BrainStation bootcamp, I had the opportunity to participate in a 24 hour cross-disciplinary hackathon run by Google. I was teamed up with one other UX Designer, 2 Developers, and 2 Data Scientists. My team worked through the night to solve the problem space and generate a solution that would benefit our users. My teams solution was a fitness app specifically for individuals who live their life in a wheelchair. Check out our process bellow!

UX/UI Designer

24 hours

Figma | Slack | Google Slides

Industry Project

Role

Duration

Tools

To start the design sprint, Google had all designers, developers, and data scientists hop on a zoom call to introduce the how might we question we would be solving and to answer any questions. The rules were simple:
  1. Have a presentation ready with your final product in 24 hours.
  2. Have a well formed solution to the problem space.
  3. Make it an original design.

 

The Kick off

Ready, set, go!

At the end of our zoom, we were finally given the how might we question we would be solving for. What we didn't expect, was how incredibly broad it was going to be. 

How Might we 

The Design Challenge


How might we leverage digital solutions to provide equal access to resources and information for people with disabilities?

With the timer now quickly counting down, my team and I met up to start brainstorming ideas.  We scoured articles, current google products, and competitor products. We soon found a large accessibility and equality problem within fitness applications. Out of 320,000 health and fitness apps available in major app stores, my team could only find 5 fitness apps that were dedicated to individuals in wheelchairs. We did more digging, and found some shocking numbers...
  • 5.4 million people live with paralysis in the US.
  • 47.6% of all injuries that lead to paralysis happen between the ages of 16 and 30.
  • 131.8 million people within the global population require a wheelchair. 
  • The number of wheelchair users is expected to increaser by 2 million people every year. 

Problem Space

expanding

We decided, based on our research that our solution was going to be a fitness app dedicated to users who were confined to a wheelchair. This solution solved the HMW question of leveraging digital solutions (the fitness app) to provide equal access to resources and information (wheelchair specific workouts, alternative calorie counting, etc.) for people with disabilities (individuals in wheelchairs).

Fit HAVEN

Solution

view prototype

Once my team and I had a solid understanding of what our solution was going to be, my other fellow UX designer and I began the (very fast paced) design process. We started by creating a persona that would represent our core user and ensure we stayed user focused for the remaining 22 hours. 

persona

Process

User Stories

With a persona developed, we wanted to grasp what our users needs were. To accomplish this we created user stories that consisted of an action and benefit. Doing this helped outline the function of the application (action) and how this would, in turn, help the user accomplish their goal (benefit). 

process

Ledged:

Task Flow

Creating the user stories is an exercise that not only helped us further understand the user, but also continued to develop the solution. For instance, we focused our task flow and final product on the user stories that involved tracking calories and watching exercise videos.  At this point, our data science folks came in to help us figure out how it would be possible to alternatively count calories for individuals who are in a wheelchair. They started busting out graphs, numbers, and data while we finalized our task flow and stated gathering inspiration.

Process

Screen State

User Action

Before sketching, we decided to take the time to pull some inspiration so we weren't designing out of thin air. From these images we pulled concepts like the rounded corners, font pairings, tile design, and overall layout. With our task flow outlining our screen states, and our inspo to guide us, we were ready to start sketching.

UI Inspiration

Process

Sketch to Wireframe

Using our inspiration images, we sketched multiple iterations of each screen until we were confident with a design. We then drew solution sketches to build our low fidelity wireframes off of. We brought the low fidelity designs to our team members to ensure they were happy with how the design was going and to just touch base. At this point we had about 17 hours left until presentations.  Our team was liking our progress, so we continued trucking along!

Process

When the user opens the application, it opens to their dashboard. This is were they can see how many calories they have burned for the day, their average heart rate, and how much water they drank during the day. They can also see their exercise log and log any workouts they have done or want to do. 

Dashboard/home page

Exercise Selection Screen

The user can get to his screen one of two ways. By selecting the add exercise CTA or the weight icon in the navigation bar. Once here, they can explore available workouts, sort workouts by muscle group, or even search for a specific workout they are looking for. 

Workout Preview Screen

When the user selects one of the workouts, they are brought to a version of this screen. They can see a description of the workout, intensity levels, time it will take to complete, and how many calories they will burn. This information allows the user to make an informed decision about their fitness that can all be tracked directly in the app.

Video play screen

When the user decides on their workout, from the preview screen, they press play and their pre-recorded workout starts playing. They can follow along with the video and  pause to take a break whenever they need to. When the workout is completed, their workout will be added to their log and their calories burned will be updated. 

Back

Next

Design Decisions

Process

  • We liked how the image was dark but almost electric with the neon, and wanted to continue that theme across our application.
  • We pulled colors like the neon purple and dark charcoal and tweaked them to make a palate. 
  • We used a gradient effect throughout the task flow like you see the neon makes against the wall.
With our low fidelity wireframes good to go, we started injecting color, typology, images, and other design nuances. To begin, we found an image we both liked and started pulling elements from it. We made sure to pull inclusive images the users can relate to. Because we also decided to design an android app, we had to be cognizant of the material 3 design system standards and design with them in mind.

High Fideliy

After a grueling 10 hours, my UX team mate and I created the final high fidelity prototype. Let me walk you through it!
  • The user starts by getting a notification on their lock screen that they have not logged a workout for the day. They click the notification to open the app.
  • When the app opens, it lands on the users dashboard. One of the first things they see are the calories they have burned for the day. Our data science folks at this time were still working on a data set to support this. The user can also see their average heart rate, update their water intake, and view their exercise log.
  • They select the "+ Exercise" CTA and is brought to the screen where you can explore exercises
  • They can see what exercises are recommended for them based on previous workouts, or search for one specifically. They decide to go with the bicep curl workout.
  • The bicep curl description opens where they can view details of the workout, like intensity level and time commitment. They press play and perform the workout alongside the video.
  • When the video ends, they select "Exercise Complete" and is congratulated for a job well done and a reminder that their log and calories will be updated. 

solution

view prototype

With the UX portion done, the remainder of the project was mostly in the hands of the developers and data science people. My other UX team member and I exported all the assets the developers would need to code and made comments here and there of things we would like them to change along the way. My data science team members worked through the night developing graphs and data sets to explain how our app would track calories for individuals in wheelchairs. The end result was a wonderful presentation that clearly outlined the solution we had designed. It was a rewarding experience getting to see how UX design, development, and data science overlap and work together. By the end of the 24 hours we were exhausted, but so proud of the work we had done.  

Working Inter-Displinary

Conclusion

Some main take away's I had from this experience was that even in a shortened version, the design process is so valuable and always produces great results that are user centered. I also learned that communication is the key to great team work. My team was constantly communicating with one another about design decisions and progress, making it very easy to trust each of them and feel confident in our product. As for next steps, I would like to do a few rounds of user testing on their current task flow to see what revisions are necessary. It would also be wise to do further research and possibly conduct interview with individuals in wheelchairs to get first hand perspective. 

Key Learning & Next Steps

Conclusion

resume
My work
About me
HOME
X