STAR WARS FORCE BAND
This project is from my time at Sphero, a toy robotics company based in Boulder, Colorado. The aim of this product was to build an interactive wearable which would connect with the Sphero BB-8 via Bluetooth in order to control the bot without the use of an app. The band would also provide users with mini-games that further Immersed them into the Star Wars universe.
Some of the main objectives included creating and evaluating gesture detections in order to drive and play other activities with the Force, instructing users on how to operate the band, and retaining the Star Wars aesthetic along with the joy and enthusiasm Star Wars brings to millions of people around the world.
Project Timeframe: 6 months
MY ROLE
I was part of the design team for this project and was responsible for assisting in the experience strategy, UX design, and research for this product. I worked directly under the Senior UX Designer at the time until she moved on from the company, leaving me with her expertise and confidence to finish the project with my team. This product was unlike any other and the process was not a painless endeavor.
Due to the one-button band design, my focus began with communicating to the user which game play mode they were in and when they left said mode to get to the menu or to shut the band down. This was done with varied LED lights, vibrations, and sound effects. However, the biggest challenge with this product was assessing the many different use cases and the involvement of each device, the band, app, and robot, within each case. Although challenging, this was by far the most interesting project that gave me great experience as well as a new outlook on how UX Design could be utilized.
SKILLS USED
-
UX Design
-
Human-Centered Design
-
UX Research
-
Competitor Research
PROJECT DELIVERABLES
-
UX Flows
-
Wireframes
-
Design Review Docs
-
UXR Documentation
TOOLS USED
-
Omnigraffle
-
Marvel: Prototyping App
-
Adobe Illustrator & Photoshop
-
JIRA: Project Management Tool
INITIAL FEATURES & MULTI-DEVICE UX CONSIDERATIONS
Approaching the UX Design for this product required a considerable amount of planning, organization, and iterations. After all, we had to determine the Force Band, BB-8, and companion app design holistically. We began with laying out some of the fundamental needs of the product, shown below:
FIRMWARE UX FLOWS
The Senior UX Designer and I began with Firmware UX Flows for the band. Due to the one-button band design, there needed to be clear indications of where the user was in terms of game play as well as simple instruction on how to switch between modes and shutting the band down. We also needed to determine states such as charging and errors.
Out-of-Box UX
Charging UX
Band-to-Bot Connection UX
Menu UX
DIGITAL UX DESIGN & WIREFRAMES
SKETCHING
Once the Firmware UX Design was underway, we began sketching wireframes based on the flows we had in place. It was extremely important for the Force Band companion app to effectively instruct the user through the first time user experience.
Force Band FTUE
Band-to-Bot UX Flow
Band-to-Bot (Not Connected) UX Flow
UX RESEARCH & APP ITERATIONS
WEARING THE BAND
Shortly before I began working at Sphero, the physical design for the Force Band had been decided and sent to manufacturing. The intention was to have the Rebel Alliance emblem facing right side up when worn, making the correct orientation obvious to the user. Due to the hardware/firmware inside the band, most importantly the gesture detection, it had to be worn with the Micro B USB port facing the wearer. Right-handed individuals should not have any issue with this intuitive, emblem-up concept, however left-handed users may have to dig deeper to figure out why their droid was not obeying their commands. Or so the team thought... I began testing the Force Band with participants as soon as I could and it turned out that right- and left-handed users had similar issues with band orientation.
BAND ORIENTATION SPECIFICS
Although the emblem appears to be right side up when worn on the right hand, the clasp for the band attaches behind it. This makes putting the band on correctly very difficult. On the other hand, putting it on the left is easier to do, if you can ignore the emblem being upside down. Again, the most important thing is to have the USB port facing the wearer, whether it is on the right or left hand. Once we realized how substantial this flaw was, the Senior UX Designer and I pushed for more direct messaging within the FTUE of the app.
These screenshots are the before and after UI designs for this process. This shows the collaboration of the UX and creative team to create an interaction suitable for teaching the user how to wear the band properly.
Early UI Design
Final UI Design
AIMING
Band orientation was not the only issue we faced where more direct language and visuals became essential to the user experience. With Sphero products, users must aim properly in order to ensure their bot goes in the intended direction. However, with other Sphero bots, the app is used to aim and drive. In this case, the user only needs to focus on their thumb movements rather than their entire arm, and in some cases body, like with the Force Band. This makes it easier to correct movements or refer to a guide in order to re-aim. With the Force Band, the user is typically less concerned with the app once they think they have aimed correctly. This essentially meant that we had one chance to correctly instruct the user on how to aim.
The following is the process of user testing results and the creative team/UX department collaboration in order to improve this experience. My research and support to the Senior UX Designer and creative team resulted in a 50% increase in successful band orientation as well as aiming.
Aiming - Version 1
Aiming - Version 2
Aiming - Version 3
