BCapp

← BACK

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

Platforms: Web Application
Role: Product/UX/UI Designer
Duration: 6 months (Contract)

BCapp_Screen_01.png

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:

  1. Email notifications

  2. Personal notification feed

  3. Subscriptions to project items

  4. Specific linking - Allowing the user to go directly to the item from a link

  5. Text editor

  6. Mentions

  7. Project members page

  8. Clearly defined app terminology to avoid confusion

  9. Email verification

  10. Item activity feed

  11. Account creation

  12. Admin control and settings

  13. Improved UX and UI

  14. Improved and implement new account settings features

  15. Improved 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:

  1. Listening and understanding the needs and requirements of the client and the project

  2. User and market research

  3. User interviews to understand their pain points and what they want

  4. Working 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

  5. Plan the design and development process with the development team

  6. Work with the client to adjust the development plan

  7. Create sketches and wireframes of the design

  8. User interviews to get feedback on the design solutions

  9. Work with the client and development team to come up with different design solutions and make iterations

  10. Collaborate with the development team through quick diagrams, sketches, and wireframes to make design decisions during the development process

  11. Refine designs

  12. Implement designs

  13. Test 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