Background
CodeBlox developed a new builder app for businesses to manage their operational functions. Rather than paying pricey licenses for many disconnected software platforms to manage different business functions such as sales and HR, CodeBlox created a solution that could enable businesses to handle all operations in one app for a lower monthly fee. Their app needed review from an independent third-party to evaluate its usability and readiness for public release.
Project Team
My Roles
UX Design and Business Analysis Consultant
Team Members
Product Owner, Lead Developer
Project Tasks
1. Test
Document current usability bugs and issues
2. Build the App
Become familiar with the app’s business logic by becoming an app builder
3. Research
Compare and document interfaces of competitor products
4. Ideate
Sketch ideas for new design improvements to address usability bugs and/or improve the customer experience
Testing the App
One of the major tasks in determining the state of the CodeBlox app was uncovering usability issues. In the process of testing the app, I recorded over 90 bugs that would go into Jira. Some issues were fairly straightforward, such as a mouse cursor not changing to a pointer when hovering over a clickable item. Other bugs were indicative of major usability issues, such as not properly updating the screen state to let a user know that their change was saved, in turn leaving the user hanging.
The CodeBlox app had three major components to its user interface, a dashboard view, a dashboard editor view, and a builder view. For each bug I documented, I recorded the view state where the bug occurred, my estimation of the bug's priority, and what area of the app's architecture the bug affected.
Becoming a Data Architect
To become familiar with the CodeBlox app, the best approach was to imagine myself as a small business owner. I had to determine what functions an enterprise app would need to help automate and streamline a business’s operations.
In many ways, this became an exercise in learning relationships between data structures. CodeBlox used a Salesforce-style object relationship model, where blocks of data had specific types of relationships with other blocks of data. To better understand the app’s business logic, I also took on the role of an app builder and created my own custom enterprise resource planning (ERP) app for a telecom business.
In the process of building the telecom ERP, I also documented the data relationships so that this model could be used as the basis for a prebuilt app to be featured in the CodeBlox app store. These prebuilt apps provide end user customers with templates to use for their business without having to be an app designer themselves.
Competitive Market Research
Since the CodeBlox app was designed to be customizable for any business function, the research into competing products gave insight to both design cues as well as data structure by industry sector. One important general discovery that I made was that these apps largely captured the same type of data from the user. What ultimately separated an app custom-built for one industry such as construction versus another such as legal was language and wordsmithery.
While studying the design cues of other apps, I examined how they implemented actions such as adding, modifying, and removing dashboard components, as these actions were important to the CodeBlox app’s dashboard editor and builder modes. I also looked into how common UI elements such as menus, window controls, and navigation could be handled when there is an indeterminate amount of data. Since the CodeBlox app allowed for users to customize its controls, there had to be predictable and logical ways to handle data that overflows the viewport so that it does not cause usability issues in the UI.
Ideas for Improvement
Following all my testing and research, I also looked at ways to improve the existing UI of the CodeBlox app. During numerous whiteboard sessions, I illustrated ways to improve various user controls and components to upgrade the app’s general usability and component visibility to the user. The ideas for improvement spanned the entire visual gamut from iconography to navigation to better-defined window states.
These whiteboard sketches were photographed and documented by the team for future reference.
Result
The extensive evaluation of the CodeBlox app uncovered many issues that provided the development team with a significant backlog of tasks that were not previously considered. This led management to realize the product was much farther from being ready for the general public than originally thought.
While my discoveries caused heavy setbacks in the development process, they were necessary if the company hopes to deliver a solid user experience for an app that is intended for everyday business owners who are often not web-savvy and need apps to be easy to use. Even though the team was disappointed to see that the app was still a significant work in progress, the insight and documentation I provided gave them a better-defined roadmap of how to move forward with their app.