Work at BalanX Tech
Design experience for the EMS (Electric Muscle Stimulation) Technology. Leading the mobile app design, website design & hardware design, as the ONLY designer.
Duration
Jan 2019 - Oct 2020
Tool Used
Adobe creative suites, Rhino
My Work
User Flows
Content Strategy
Visual Design
Interaction Design
Product Design
Work directly with
1 Researcher
1 Project Manager
2 Software Engineers
2 Marketing Consultant
3 External consulting team
0.1 My scope in BalanX
My work at BalanX has 3 fold: insights and materials for content strategy; redesign the current mobile app; design & prototyping the second generation Suit.
0.2 My Role in UI/UX Design
I led the second iterations of the BalanX mobile app between March 2020 with a project manager until now focusing on the app's user flow, training function, and visual style.
In addition, I worked alongside the project manager and 2 marketing consultants exploring potential functions for future expansion.
The Final Outcome
Unfortunately, due to the COVID-19 situation, all new developments are currently on pause.
0.3 My Take Away
As a designer working in a professional set-up, it is very different from academic study. Given the limited resource and different stakeholders, the ability to negotiating for trade-off and adjusting to abrupt decisions is crucial. Sometimes, a successful business decision is made not based solely on"doing the right thing", but more appropriately, "doing in the right time".
Thank you for browsing!
Keep scrolling to learn the full process of the mobile app design at BalanX!
BalanX Mobile App 2.0
Redesign the mobile app that controls our hardware.
Duration
June 2020 - Oct 2020
Tool Used
Adobe creative suites
My Work
User Flows, Visual Design, Content Strategy, Interaction Design, Prototype
Work directly with
1 Project Manager, 2 Software Engineers
1 Preliminary Research
1.0 Background: Company & EMS Technology
Electric muscle stimulation(EMS), is the elicitation of muscle contraction by applying controlled electric impulses. It could boost your training by enhancing muscle contraction and increasing VO2max through electrical stimulation. It has been first applied in physical rehabilitation and athletic training and later adopted by modern gyms as a complementary technique for a fitness routine.
EMS Applied in Astronaut Rehabilitation
EMS Applied in
Athletic Training
EMS Applied in
Gym Training
Portable EMS For
Home Training
1970s
1980s
2003
2019
Brief History of the Development of EMS Technology
BalanX is a tech company focused on the application of EMS technology in fitness training and rehabilitation.
BalanX EMS training suit is launched on Indiegogo in Jan 2019 and it soon became a featured project on the website.
It is the world's first portable whole-body EMS training system. It aims to capitulate professional EMS training experience into a backpack, enhance training performance, and help their customer fulfill their training goal in a limited timeframe.
Due to the sensitivity of this product, I have to state that although EMS technology sound sketchy, it is widely used in training and hospital rehabilitation. I took their offer after I used their product myself for a while and find it to be effective.
1.1 What is BalanX EMS Suit
BalanX suit includes one-piece tights and a detachable hub. Controlled BalanX mobile app, the hub could send an electrical impulse to the user’s muscle group through the electrode on the one-piece training suits.
Other than control the electrical impulse sending from the hub, the mobile app also provides dedicated video training programs with compatible electrical impulse combinations.
The suits are a huge success, but our mobile app is commented as counterintuitive and confusing.
BalanX Hardware Design (Interface Illustrational)
1.2 Contextual Inquiry & Insights
To dive into the issue, we conducted a series of informal contextual inquiry.
We asked a few of our users and a few gym instructors who are using BalanX as the equipment of their trainer’s class a few questions and train with them for a full EMS training session and see how would they use the mobile app, and whether they went into any confusion.
Based on what we have observed, we have the following insights.
Novice knowledge for EMS training
The user doesn't know how to correctly set up an electrical intensity for training. They often complain about feeling impulses
Weak navigations during training process
The current interface is very subtle and didn't provide any hint and it is very hard for them to navigate between different pages.
Awkward "training with phone" experience
Training with the phone is a bit awkward. Meanwhile, our user also has to keep adjusting the intensity on a horizontal layout during training.
1.3 Debate: A Tool or a Service?
Other than contextual inquiry, we have an internal discussion with our marketing team based on the general direction of our product.
For this debate, we have the following argument.
A Tool
Our development team and I think we should build an app that solely works as a controller of the BalanX EMS Suit. Other than decent EMS interaction with a few basic training programs for educational purposes in case the user doesn't have content at hand(wifi issue, first time user) for EMS training.
The reference for this mobile app would be Zoom, Philip Hue, and Roku.
Pros
- The design could be straightforward and friendly
- More effort in perfecting the mobile interaction
- Comparatively smaller workload
Cons
- No potentials for future profit point
- Binding our current mobile app with the hardware
- Hinder scalability
A Service
Our project manager and our marketing team think we should build an app that has a smooth interactive experience of EMS Training, but more importantly, it should provide a one-stop fitness experience including a customized training program, body status monitoring, and growth plan.
The reference would be Peloton, Amazon Halo, and Google Stadia.
Pros
- Extend current functions
- Cultivate brand culture (EMS training style)
- Increase customer loyalty
Cons
- Complicated function lead to further confusion
- Lack of content leads to too many blank pages
- Need other hardware for full service
Pros & Cons
Since we are currently making profits selling hardware, there were two directions for our further development. We could either make our app a fitness content platform (as a service) or simply an EMS Suit controller (as a tool).
"Feature Diagram", Our Agreement
After comparing the pros and cons, we reach an agreement where our main resources were focused on building the “core function” EMS Controller, while we build the starting phase of the “extra functions” for “service” so that we will have something to start with when we have the resource to do so.
1.4 Initial Ideation
Considering the fact that our project manager already has some thoughts and ideas according to his discussion with stakeholders and clients, we didn’t go through a wholesome ideation process. Instead, we came up with 4 key steps according to our insights and debates.
Ideation Diagram
To narrate the design process as structured as possible, we will discuss the “Revise Framework” and one hand interaction(high level) in the next chapter, and leave the rest in the detailed redesign(more granular) in the chapter after that.
2 "High-level" Redesign
2.1 Revise Framework
2.1.1 Framework Revision
To start the redesign, we mapped our current user flow and expand it to a full-fledge training experience.
Implementing Current App Structure
2.1.2 Framework Detail
Based on the updated user flow, we detailed each segment and turned it into a more workable starting point for wireframing and prototyping.
Detailing Updated App Structure
2.1.3 Homepage
To encapsulate the previous framework, I redesigned the homepage to include most of our new business strategy while providing a better visual cue for our user to navigate inside of the mobile app.
Training Page provides training entrance and general weekly training progress. The data is generated based on the time consumption of the user’s using the app.
Training Page
Stats Page provides training stats that are recorded by other hardware(smartwatch, smart scale, etc) The next iteration of the suits will be able to cover part of the suits.
Stats Page
New Page directs the user to an updating webpage that contains videos and blogs covering how to conduct professional and successful EMS training.
News Page
2.2 One-Hand Operation
2.2.1 Inspiration
The one-hand operation was first systematically introduced by Samsung in its One UI design system update as an accommodation for its bigger screen design.
Samsung UI Example
Home Page Design Example
BalanX One Hand Operation Set-up
Considering the fact that in the training session, people were most comfortable with one-hand operation, we borrow that idea to help our user better navigate through pages and control the suits. The upper part of the screen was mostly for viewing content, where the buttons and entrance would locate at the bottom part of the screen.
2.2.2 Execution
To enhance the idea of one-hand operation, most of our interface redesign, especially for the training page, was iterated based on this principle.
BalanX One Hand Operation Example
As shown above, the one-hand operation principle is executed throughout the exercise routine. To make it more user friendly, the operating section and the viewing section follows the same height ratio in the same process.
3 Detailed Redesign
3.1 Guided Calibration
Novice user who doesn’t know how to do EMS training was often confused by the “apparent” intensity, which is how people respond to the electrical impulse.
Considering the fact that people’s sweat will strongly affect his/her reaction to the electrical impulse, the recommended EMS intensity for achieving the best result during training is usually 80% of what he/she could stand when the individual is in sweat.
However, when setting up an electrical intensity value, the human body was dry(high electrical resistance) so it is hard to feel any impulse. However, when training progress, our user will feel the impulse is gradually getting stronger because sweating during exercise will lower the skin’s electrical resistance and enhance the “apparent” intensity.
Sweat/Intensity Relation(Illustrational)
In the gym setup, calibration is a manual process where the trainer helps the user find the most appropriate electrode intensity before training.
Original Intensity Setup Process
Updated Calibration Setup Process
By cooperating with instructional text and guidance video, we integrate the calibration process into our training routine.
Final Outcome
3.2 Customized Training
For the training process, there were 2 sets of input that we could control:
Core Inputs including time and intensity which obviously have a direct impact on the training results.
Optional Inputs affect the feelings of the impulse during training. This won’t have a substantial influence on the training result.
What the user can control during training?
For a regular video-based training program, our user could control only the core value, training time, and electrical intensity. In addition to that, we add a customized training mode where users can customize all settings and make BalanX accommodate all his/her routine.
Time
Wave & Frequency
Impulse Mode
Intensity
Custome Training Design
3.3 Other Improvements
3.3.1 Intensity Panel Design
The intensity panel design is the key to the mobile app. After a few rounds of design and iteration, we settled on a “foldable” set up which is more friendly to the small screens.
Control Panel Design Iteration
The foldable design also echos a lot of detailed suggestions from our users and trainers. This includes adjusting electrode intensity while training. The foldable impression would make it much easier to integrate into the workout panel.
Other than selected/unselected states, we also add a lock function per request where the user could disable certain electrodes so that he won’t manually cancel them when “select all”.
Button Status
Meanwhile, we uniformed intensity adjustment interface and made it possible for our user to adjusting his/her training intensity at ease while he/she is in training, and avoid any potential confusion while he/she is adjusting.
3.3.2 Landing Page Visuals
Not many descriptions here, as a UX designer whose visual skill is not my strongest ability, I just want to have a special place to show off these drawings I did. Most of the viewer is just going to skim all the text anyway, so I guess I just plant an easter egg here and pretend nobody notices.
4 Challenges and "Battles"
Since design decisions are usually subjective, it is inevitable that everyone in the team will have a word or suggestions about your work, especially in a small start-up where you are the only designer. Since my scope of work has been covered so many creative aspects of our company, our discussion and debate include but not limited to visual style, key features of the mobile app, content strategy, copywriting, hardware design, blog/e-mail promotion material, and sometimes even social media captions.
In this chapter, I will talk about a few arguments and trade-offs that I have with members of our team. My story is basically with my project manager and developer team.
4.1 With Project Manager
4.1.1 Visual Style, “Neumorphism”
Neumorphism is a visual style that starts to get popular in Jan 2020. It soon became an “influencer” style since it could create a high-end mood simply by a simplistic color scheme and visual effects like glow and shadow.
However, there was a usability issue for the neumorphism: buttons and contents were very hard to distinguish from the background since everything should be in a very similar color. Meanwhile, another key aspect of this visual style is that the illustrations in the app are also minimalistic and reflect the color scheme. This could also be difficult for us because we have limited materials whose visual style varies greatly.
BalanX Adaptation for Neumorphism
The minimalistic design of neumorphism soon captures my boss, who is also my project manager. He still insists on using this style regardless of my opinion. To both increase the usability of this product and keep the aesthetic that my boss wanted, a lot of adaptation move was made to make this design more viable in terms of usability and final visual effects.
Details like stroke and background texture were introduced to enhance the overall visibility of the interface. Illustrations were made from the hero photograph where the visual style has been strictly unified to protect the simplistic style of neumorphism.
4.1.2 Post-Debate: How technical we want to be?
As discussed in our debate section, our team has differences in whether this app should be a tool or provide service and we decided on a compromising route where we do both. In this chapter, we will cover some of the post-debate regarding how detailed the service would look like at this phase.
Normally, there were 3 key factors in providing a full fitness service: diet, training, and body stats. With the help of modern technology, we can cover training by video instructions, body stats by smart wearables, and other hardware. The diet area is a bit tricky, although the image recognition technology could track the calories, it is cumbersome to monitor everything.
Training provides an active weight loss mechanism where people exercise to stay fit.
Training
Diet provides passive maintenance to help people engage in healthy metabolism.
Diet
Data provide responsive feedback for suggestions to optimize the fitness plan.
Body Stats
Currently, most of the training app focused on training videos with tips that may involve diet since most of the apps can’t record data. The plans provided by these apps were usually confusing and really hard to follow. In that regard, our project manager wants to provide an all-in-one experience where he wants to make this process easier by the following 2 steps:
1. Provide data-driven customized training experiences based on the stats from smart devices.
2. Provide more training content including training tips and training videos from fitness influencers to motivate our customers
"Who is buying an apple watch?"
For the data-driven customized training experience, the critical issue I am raising is the fact that not everybody willing to purchase smart devices that track their data(ie. Apple watch). It is not inclusive to assume everyone could afford an apple watch. The result of don’t own this piece of hardware is that 70% of the data on the second page would be blank. However, our project manager claimed that if the individual chooses to purchase our product, he could afford to buy an expensive piece of a smart wearable like an apple watch.
Another concern comes with the necessity of if we should show that much data as displayed on the left. Our team is baffling whether we should make our target audience more towards the professionals who knows what it means behind those data, or towards novice user where he/she just want to participate in the exercise. But our project manager likes those technical data to be displayed, and he doesn’t think those data would be overwhelming.
As we can see above, there are only 3 data out of the total 11 that can be recorded in this panel.
BalanX Stats Panel
In a word, I failed this fight. Although I don't think his solution is 100% valid, I still respect my project manager's determination to provide the best service for our customers. On another note, in this phase, we haven’t built the logic of how to use data to provide customers training yet. That will be our next goal when we have enough training routine for selection.
"Who is reading the Data, when will we have more content? "
Another methodology is to provide training content including training tips and videos from fitness influencers. My boss’s concern is that he doesn’t think it is sustainable to only be a hardware company since our users tend to use it as a tool and nothing more. He looked at other fitness companies like Peloton who is building their brand culture through their service(the training class they are providing) and he thinks that could eventually end up in brand loyalty(more purchase).
Previous Company Fitness Blog
"Service Entrance"
It sure is an ambitious plan, however, the problem of providing more training content is that we don’t have enough time and resource from our development team to build up a full-fledge video-based platform and invite fitness influencer to post content on it(not to mention the investment of inviting the influencer). Another concern is that, even if we build a platform, we don’t have enough content in our hand to present on.
So our final solution is:
-
Our current app doesn’t host any platform, it simply provides entrance to a webpage that currently leads to a web forum where we could post videos and blogs
-
Start thinking about content for posting
The current solution is a compromise since it does not change the primary function of this mobile app(controller for the suites), but it also provides some wiggle room for future development in case we have the resource to build our content and platform.
4.2 With Developer
Compares to my debate with the project manager, my communication with our programmer is much more down to earth. Most of our coordination is based on the compatibility issue of our current design.
4.2.1 “Neumorphism” Compatibility
One issue of the neumorphism is that it didn’t do very well with responsive design. In that regard, I provide 2 solutions requested by our developer based on .9png. One is with all shadows, and the other is with only the inner shadow where the developer could add the box-shadow himself.
Two Ways of Adapting Neumorphism
4.2.1 Screen Compatibility
Although our project manager insists that most of our users should afford an apple watch, he refuses to make another bold assumption that they probably prefer to use a newer smartphone model which have a larger screen, and hence this chapter. Our developer set the iPhone 6 screen as an extreme condition.
The first strategy is to make the page scrollable. In my original design, everything stays on the same screen, as you see on the left. In that regard, I made a few changes and make the page partly scrollable so that it can fit to every screen.
Scrolling Layout for Responsive Design
Another methodology dealing with screens where scrolling is not an option. One thing that these screens have in common is that they are training page where there is a video display. And by minor editing, the screen ratio of the radio could be changed.
As you see on the right, the original video is in a 16:9 horizontal mode. So by cropping the video, we turn it into a square size to fit a larger screen.
Obviously, there were a few screens that can’t be cropped because in that case the trainer in the video would be cropped, in that case, I scale the video smaller and extend part of the screen to fit the new ratio since the whole background is almost white.
Content Ratio for Screen Responsive Design