BCapp

BCapp is an architectural tasks management platform designed for BIM Consulting/Architectus

PlatformsWeb Application
RoleProduct/UX/UI Designer
Duration6 months (Contract)
BCapp

Context

BCapp was originally built for BIM Consulting (Architectus) to help in clash coordination with external consultants. It was designed to improve communication by collecting information spread across emails, spreadsheets, and hand-crafted reports into a single place. Architectus' management wanted to determine if BCapp could also be used to optimize architectural project workflows so the BCapp team was tasked with implementing certain features to allow architectural users to start using BCapp.

My Role

My role for this project was to redesign and take their existing web app from beta to full production to be used across Architectus and fulfill new feature requirements of the project - bringing the project one step closer to commercialisation. My goal was to help the client make the best product design decision possible. By working closely with the client I was able to understand their needs and introduce design solutions to help solve problems and improve on existing ideas.

My role included:

Product/UX/UI design
Product roadmap
User journey mapping
Improve user experience
Setting up Sketch component library structure and workflow
Work with the development team to implement the new design
Product quality assurance and testing

The Problem

The beta version was missing features that hinder collaboration such as notification and other communication features that enable would users to quickly send small bits of information to collaborate efficiently.

Solution

After speaking with the client, analysing the original app, and discussions with the development team, we have determined a MVP set of features to be implemented in the 6 months that would drastically improve communication and workflow of BCapp.

The features integrated were:

01Email notifications
02Personal notification feed
03Subscriptions to project items
04Specific linking - Allowing the user to go directly to the item from a link
05Text editor
06Mentions
07Project members page
08Clearly defined app terminology to avoid confusion
09Email verification
10Item activity feed
11Account creation
12Admin control and settings
13Improved UX and UI
14Improved and implement new account settings features
15Improved and implement new admin features

Ideation to Production

Because this was an existing project with existing full time and part-time developers, the design and development process was customised to suit the availability of the team, development had to start without new designs. The way we managed the process was to have the development team go forward and implement the backend infrastructure while the design was being refined, some features and screens such as the sign up, account creation and settings were partially implemented first by the development team and was adjusted later when the design was ready. Quick collaborations, sketches, and design decisions were made along the way to not hinder the development process. The plan was to give the development team as much autonomy as possible and come together and implement the refine designs at the later stage of the project so that the design had enough time evolved and mature.

Below is the basic outline of the process:

01Listening and understanding the needs and requirements of the client and the project
02User and market research
03User interviews to understand their pain points and what they want
04Working and collaborating with the development team to determine a set of features that could be implemented in the 6 months period that would fulfill the app requirements as best possible
05Plan the design and development process with the development team
06Work with the client to adjust the development plan
07Create sketches and wireframes of the design
08User interviews to get feedback on the design solutions
09Work with the client and development team to come up with different design solutions and make iterations
10Collaborate with the development team through quick diagrams, sketches, and wireframes to make design decisions during the development process
11Refine designs
12Implement designs
13Test design implementation, quality control, ensuring the app and each feature is bug-free
App structure explorations
App structure explorations
Items organisation concept diagram
Items organisation concept diagram

User Feedback and Testing

For this project I was able to sit next to and work with the users I was designing for, there was consistent user feedback in the whole design and development process. So I was able to test ideas early, allowing the users to point us in the right direction before we invested more time and resources in a design direction.

Measure of Success

As the product was getting more and more developed we saw a consistent increase in metrics such as engagement, retention, number of projects, files and task being created. Success for this project means internal adoption of the app.

Beyond Requirements

Beyond fulfilling the requirements of the app, I have also introduced:

The idea of “workspaces” to better management and organise items
New app structure and navigation system
New items sorting and filtering system
Created design consistency within the app
Simplifying workflow to increase efficiency by reducing the steps it takes to perform a task

Increased efficiency was measured by reducing the number of steps, screens and clicks it takes to perform specific tasks in the app. A series of workflow diagram was used to demonstrate the reduction in steps thus increase in speed and efficiency.

Mouse movement analysis of different design options to determine which is the most efficient option
Mouse movement analysis of different design options to determine which is the most efficient option
Breaking down and comparing the steps it takes to perform a task with the old design and new design variants
Breaking down and comparing the steps it takes to perform a task with the old design and new design variants
NextTeleprompt.