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.
Homepage Hero3.jpg

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.

Content@3x.png
Content Strategy
Coordinate with a marketing consultant and project manager. Contribute to marketing strategy, copywriting, insights, and content creation.
UX-UI@3x.png
UI/UX Design
Critical role in the redesign of the current mobile app, coordinate with developers, project manager, marketing consultant, and other stakeholders
PRODUCT@3x.png
Product Design
Leading roles in second-generation suit design and development. Collaborate with the supply chain for prototyping and performance optimization

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.

Group 2822.png
Regular Training
Login
Info
Landing
Homepage
Calibration
Customized Training
Browse Training

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".

Balanx Orange new.jpg

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.
Homepage Hero.jpg

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.

history@3x.png

EMS Applied in Astronaut Rehabilitation

EMS Applied in 

Athletic Training

history@3x.png

EMS Applied in 

Gym Training

Portable EMS For

Home Training

history@3x.png

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.

Product Hero2.jpg

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.

producthero.gif

BalanX Hardware Design (Interface Illustrational)

1.2 Contextual Inquiry & Insights

Test_pic4@3x.png
Test_pic1@3x.png
Test_pic2@3x.png

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.

icon_1@3x.png
icon_2@3x.png
icon_3@3x.png

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.
 

icon_6@3x.png
icon_4@3x.png
icon_5@3x.png

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).

Graph5@3x.png

"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.

Group 2759@3x.png

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. 

Group 25@3x.png
Group 24@3x.png

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.

Group 23@3x.png

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.

3_homepage1@3x.png

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

3_homepage2@3x.png

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

3_homepage3@3x.png

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.

Group 2828@3x.png

Samsung UI Example

Onehand.png

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.

Group 2830@2x.png

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.

Group 2783@3x.png

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.

Group 2787@3x.png

Original Intensity Setup Process

Group 2786@3x.png

Updated Calibration Setup Process

By cooperating with instructional text and guidance video, we integrate the calibration process into our training routine.

Group 2834@2x.png

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.

Group 2794@3x.png

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.

9_ customize1@3x.png

Time

9_ customize3@3x.png

Wave & Frequency

9_ customize2_1@3x.png

Impulse Mode

9_ customize4@3x.png

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.

Group 2797@3x.png
8_Training2_1@3x.png
8_Training2_2@3x.png

​Control Panel Design Iteration

Group 2843@3x.png

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.

Group 2848@3x.png

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. 

Group 2846@3x.png

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.

Fitpal.jpg

Training provides an active weight loss mechanism where people exercise to stay fit.

Training

1meal.jpg

Diet provides passive maintenance to help people engage in healthy metabolism.

Diet

2data.jpg

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?"

Group 2863@3x.png

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).

Group 2892@3x.png

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: 

  1. 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

  2. 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

Group 2882@3x.png

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.

Group 2887@3x.png

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.

Group 2888@3x.png

Content Ratio for Screen Responsive Design