The BloxMob App Builder is SaaS B2C product empowering teens to build their own mobile apps without code. In a matter of minutes a new user can create a customized app, test it and share it for use on their iOS or Android smartphone using the BloxMob native app viewer. I joined BloxMob shortly after the conclusion of the initial product prototype, the BloxMob App Builder. This was the first iteration of a functional customer facing product. Early observations quickly exposed considerable usability challenges for our teen customers.
Discovery & Observation leads to Insights
Through a combination of methods:
- User testing
- Interviews
- Session recordings
- Support tickets
- Team exercises
The team was able to identify 5 critical usability themes to address customer success.
Key Usability Insights
Build Steps
The initial implementation of the build steps did not present the user with an intuitive process to follow. While the BloxMob App Builder is designed to allow for easy iterative development, we needed to get our audience moving more clearly and intentionally, as quickly as possible. I decided to break the development process into 4 primary steps; Design, Build, Settings and Publish. Eventually we incorporated Settings into Publish.
Expanded Color Pallet
The limited color pallet of the prototype missed an opportunity to use color to identify specific UI functionality throughout the product. Cyan (#00bcca) had been used for every element that the user interacted with, no mater the function. Additionally, the lack of a clear navigation color left the user struggling to easily identify where they were in the build process at any given moment. An expanded color pallet introduced unique color for primary and secondary navigation and another for action button while retaining cyan for visibility toggles.
Blox Editing
A blox is essentially a page or screen of a BloxMob app. Each blox has a unique set of attributes that need to be customized by the user. The blox editing steps in prototype where generalized and the same for each blox. As the product evolved and greater functionality and depth was added to some blox, it became clear that the generalized steps did not scale nor present the user with the level of clarity needed. Not all Blox are created equal and a one size fits all solution was not working. I tweaked the build step visual design to suggest process and created unique steps per blox while maintaining familiarity across blox editing.
Prototype: generic steps for all blox
Production: Guided custom steps for each blox
Managing Data Sources
Some blox (app pages) in a BloxMob app use “Collections” as their data source. The management of these collections has been the most difficult usability challenge. A collection or data table is where data entries are stored and those entries are defined by any number of fields that define an entry. A collection can be assigned to any blox that uses collections as a data source. In the prototype collections could be shared across any apps that a user had built. While an interesting feature, it opens up opportunities for the user to unintentionally delete or modify the data of one app while working on another.
Prototype Design
Additional usability challenges with Collection management surfaced during early user testing including the identical visual presentation of the disparate elements (Blox & Collections) which created uncertainty around choosing and editing Collections. Data loss during collection modifications occurred regularly by either deleting a Collection attribute or changing the data type after data had been entered.
Production Design
Completely redesigning the user’s experience around collections took a great deal of interaction with and observation of our users, as well as, collaboration between myself and the BloxMob developers. Through this process, I was able to redefine the interaction design and improve feature functionality for our user.
The first goal was to differentiate Blox from Collections and ensure that the user’s choice of what Collection to use as the Blox data source was clear and intentional.
After addressing the Blox-Collection paradigm, how the user managed their chosen data source was dramatically altered to allow for greater visibility into available data fields, and the ability to restore deleted data fields without data lose was introduced.
App Preview Responsiveness
One of the more significant changes that has been made to the product to improve the user experience, beyond changes to information architecture, is the responsiveness of the app preview. The app preview is intended to be a real-time interactive visualization of the app they are developing. Unfortunately, the app preview often did not respond to changes being made in the build tools and, at times, would require the user to refresh their browser.
This condition was simply not acceptable for a consumer product of any kind. By driving consistent internal messaging, product review, bug tracking and testing, the team has been able to solve this issue and today the builder and the app preview are fully synchronized.