Hiroo
21312.jpg

BOMO

Pennapps XVI Semi-Finalist

Product Designer

 
21731517_1659430830765195_4652499257620425337_o copy.jpg
 

BOMO

 

Duration: 2018 February 8 - 10 @Penn Engineering Campus, PA

Summary: 36 hours of non-sleep. 700 mi away from home. 1200 participants in a single event. I went to PennApps with 3 developers from Emory University, in which we placed in the Semi-Finals with our app: BOMO.

My Role: I took the role of the lead UX designer to create personas, research with potential users, and to design the wireframes. I also helped to communicate well with the team to keep up the pace and an organized to-do list.

Methods and Tools: Customer Journey Map, Persona, Interviews, Wireframes, Photoshop, Illustrator, Sketch, Invision, user testings, AfterEffects

 
 

 

What is BOMO?

gallery.jpg
 

BOMO is an AR mobile app that allows clinicians, coaches, and patients alike to easily quantify body movement.

You’re playing a game of intense basketball. As you are about to shoot the tie-breaking shot, you tear your ACL. You go to the doctor sulking in defeat, and during weeks of physical therapy, your PT arbitrarily asks you to “try a little harder than last week” during each session. However, your PT soon hears about the app BOMO, where they are now able to objectively track your knee recovery with just a smart phone. With BOMO, you are now able to have extremely detailed records of your rehabilitation and see your progress in an immersive and personalized way without the use of expensive hardware or software.

BOMO can not only track joint flexion angles, which are useful for measuring flexibility progress, but it can also track joint movement in 3d, allowing users to analyze common dysfunctions such as lateral knee movement during walking and running, tracking overall joint stability, and measuring muscular imbalances…all with just a smartphone.

 
 

 
 
 




Inspiration


One of our team members previously did physical therapy research in a Motion Analysis lab, constantly monitoring the walking rehabilitation progress of patients and using cumbersome, expensive software and hardware to get relatively simple data. Combining this problem with the fact that there are currently no reliable real-time motion tracking apps on the app store, the need to make a medical and accessible AR motion tracking app became obvious.






 
 

Night 1.  Sleepless Sketcher

 

I picked up the pen and just started jotting down our ideas especially on the UI/UX portion. 

 
IMG_4493.JPG

After many hours of sketching and many cups of coffee, I was ready to survey people and create persona.

1.jpg
2.jpg
3.jpg
 

I was then more clear to start creating a low-fidelity wireframe. I first designed the main screen to select the muscle, then prepared a pop-up screen to clearly show the users how to set up the app before being thrown into the AR camera screen.

 
 

I then designed a wireframe for our Stats page. The stats page is our main selling point, as it shows a scientific impact by keeping track of the progress and presenting the quantitative data in a clear UI. I first introduced 3 categories: past, today, and goal. I wanted to separate the 3 categories to clearly present only the relevant information: a student during Pennapps told me that there is no point in showing all 3 under a single page and I should only present the category 'today' as the default. Next information is the graph, where the x-axis is organized according to the sets, not just time. There also is a summary section to complement the graph with further statistics. Tips is our final section to go through the statistics and present a constructive criticism for the user to speed up his or her improvements.

 
 

 

Night 2.  Side by Side

 

I was then ready to create the front-end with one of the developer. The basic flow was that I create the overall UI on Sketch, then I export him whatever icons or dimensions for him to code the design on Swift 4.0. I first quickly created our logo and our front page. I picked purple and blue instead of my usual black and white color scheme to both stand out at Pennapps and lean towards the professional color scheme. 

 
 

After we finished the front page, I designed the flow of choosing the category and opening the AR. I wanted the selection to be as intuitive as possible; hence, I only have the main title "select exercise" and 6 icons that clearly show the movement. The screen after selection was very important too, as I had very limited space to layout a clear, vital direction. I wrote a message: "please have the stickers at the appropriate locations" and sketched a stickman figure for the user to follow. I thought the opacity may be hard to implement, but my partner developer coded it pretty quickly. Finally, I also designed the UI of our AR component, but because that really depends on what our developers can and cannot achieve, I left it very simple and flexible for any changes.

 
 

It was finally time to design the stats page. The overall wireframe was translated to my design, but I also added 3 additional categories within category 'Today': Depth, Velocity, and Power. This was because my teammates managed to compile the data and calculate the two other variables that may be very useful to our users. Velocity can tell our users to slow down or speed up while doing the exercise, while power can tell our users how much calories our users have burned. The rest was easy to design, since I had already created a detailed wireframe.

 
 

Interaction on Framer.js

framerstudio copy.jpg
 
 

 

Final Presentation

 

When my developer and me finished our front-end, our two other team members were done implementing the AR portion. We finally combined all our work to create a working demo. Here is our final submission with our demo video:

https://devpost.com/software/bomo

 
 
 




Lesson Learned


36 hours were too short. My design for stats page was unfortunately unable to implement as we had no time in the end. I should've not designed and developed the front page with my developer, as that section had little importance and was mainly for aesthetics. But prioritizing during Hackathon is hard - we also wanted to talk to other groups and recruiters, so I am more than happy with what we have. Our team members were all good at what we do, and our collaborative effort created an amazing app: BOMO. If I were to redo the project, I would've spent more on a clear roadmap of a To-do list so we maximize our total 36 hours. But for now, I'm greatly proud of what we made and how we made top 30 out of 150 teams..






 
 

Awards

 
logo.081ac82f.png

Pennapps XVI Semi Finalist

1200px-Goldman_Sachs.svg.png

Goldman Sachs Data Visualization Award Candidate