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?
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.
Night 1. Sleepless Sketcher
I picked up the pen and just started jotting down our ideas especially on the UI/UX portion.
After many hours of sketching and many cups of coffee, I was ready to survey people and create persona.
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
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:
Pennapps XVI Semi Finalist
Goldman Sachs Data Visualization Award Candidate