Builtview
Streamlining photo management in the construction industry
Internship
Product Design
Mobile
Desktop
Design Systems
Company
Laing O'Rourke
Role
UX/UI Design
Timeline
6 months
Tools
Canva, Figma, GitHub, MaterialUI, MixPanel, Asana, Loop11
Design methods / activities
User Persona, Affinity Diagraming, Heuristic Evaluation, UX/UI uplift, Design System Curation, Mobile design, Web design
Table of contents
Introduction to the product and my role
Research
Design process
Iterations
Final Design
Introduction to the product and my role
What is Builtview?
Builtview is a photo management application designed for construction teams. Builtview saves time for site engineers and creates a comprehensive record of site based photo evidence. This improves efficiency, preventing unnecessary site visits, solving disputes and saving money.
What Builtview Offers
Separate personal and work photos Automatic cloud uploading between mobile and desktop Customisable site reports Organisation of site progression in Teams and Projects Contextual photos with embedded timestamps, GPS location, tags, annotations, markups and more Easy filtering of photos through tags, description, date, uploader or media type
What was my role?
I was hired to tackle two goals:
Prepare Builtview for external use
Evaluate the usability and improve the user experience
These objectives are quite broad, and outside of general UX Research and UI Design, involves Product Design and UX Strategy. I worked alongside the Change Manager (who helps construction projects get set up to integrate Builtview in their construction processes) to align UX Strategy with the Product Strategy.
What I learnt
How to communicate the value of UX Design to stakeholders How to prepare and deliver work for the development stage How to establish and integrate design system documentation How to lead and justify design decisions whilst following stakeholder needs How to be adaptable and change design processes to meet time constraints and stakeholder needs
What did I deliver (and do) in 6 months?
Exploratory research & analysis
conducting competitive landscape to better understand the environment, interviewing engineers to better understand the user, crafting user personas to assess the needs of different types of users. User flow diagrams, documenting app architecture
Exploratory research & analysis
Comprehensive, scalable design system
with components and documentations of use between mobile and desktop interfaces
Comprehensive, scalable design system
Two design iterations, uplifting the UX/UI of mobile and desktop
the first one being a major design overhaul, focusing on the UI, and the second focusing further on the UX. Both iterations were pushed to production on desktop and mobile
Two design iterations, uplifting the UX/UI of mobile and desktop
Two rounds of usability testing and user research
one focused on the existing UI when i joined and another on the first iteration. Following the first iteration launching, interviewing existing users to identify other pain points both in the new interface but also in the existing experience.
Two rounds of usability testing and user research
QAT and Stress testing
documenting all bugs or glitches identified throughout my time at Builtview to further elevate the user experience beyond the UI through clear communication with development team and inputting bugs or small UI glitches through github.
QAT and Stress testing
Simplifying the mobile experience
For Mobile, focusing on the main user behaviour on mobile of photo documentaiton, improving the camera page, process for adding tags, locations and allocating photos to project, optimising offline mode.
Simplifying the mobile experience
Improving the usability of advanced construction features on desktop
For Desktop, improving the tag management, advanced team settings, automatic geotagging, floorplan upload, automatic site report generation and user role permissions in teams were focused on extensively in the second design iteration.
Improving the usability of advanced construction features on desktop
Crafting user onboarding, new feature flows and help content
interactive experiences with clear steps with onboarding (introducing the application), learning the existing features, new feature flows to introduce users and help support content addressing a pain point identified in user interviews which decreased adoption and retention.
Crafting user onboarding, new feature flows and help content
Research
Exploration of the problem area
With foundational primary research available for review, I started my design process by researching the construction industry and workflows to better understand the users and industry. Following this, a competitor analysis and heuristic evaluation was conducted to further evaluate and understand the product offerings and how to prepare the product for external use.
Competitor Analysis
Using past data gathered in early stages of the development process for Builtview and new data gathered I consolidated a competitor landscape of similar products aimed at construction teams. This included looking at CompanyCam, GoTradie, Procore and much more. One notable competitor, UnearthLabs helped aid in UX Strategy in the development of effective onboarding, product tours and help centre content (available at support.builtview.com).
User Personas and Empathy Mapping
Contextualizing the target audience's need for photo capturing and management for evidence-based site photo records formed personas which represented the different types of users which related to the hierarchy in the construction industry. In order to form these personas I organised a collaboration session alongside the lead developer. This collaboration session also lead to creating the structure of the questionnaire which lead users on different questioning based on the type of user they are.
Usability Testing - Heuristic Evaluation
From this point, understanding the product and user the next step was to assess the usability of the existing application to prioritise improvements to the experience. This was done through a heuristic evaluation conducted by me and one external designer.
Research Aim: Identify usability issues within the application through understanding the processes from the perspective of unfamiliar users (designers).
Goals: Usability Testing
Understand how users navigate, access features and use the application.
This will help us see why some features may not be used and issues with the UI / UX
Identify how new users would navigate the application to complete specific tasks.
Evaluate expert perceptions for potential improvements to the existing application.
Highest ranking Heuristic Criteria
H1 = Visibility of system status H2 = Match between system and the real world H3 = User control and freedom H4 = Consistency and Standards H8 = Aesthetic and Minimalist style
Highest ranking Heuristic Criteria
Analysis of the results & prioritisation
Despite the product offerings being quite simplistic, the user flow was complex, confusing, and different between mobile and desktop versions. Multiple bugs, glitches and crashes were noted and also communicated to the development team whilst the design uplift was underway.
Through this, four key tasks were identified, aligning with the heuristic evaluation results.
Improving the UI aesthetic
Establishing a design system for consistency
Improving user freedom and flow
Increasing visibility of system status through snack bars, dialogs and banners.
From this, priorities for the design up-lfit were also identified for specific mobile and desktop.
For Mobile:
Redesign gallery page structure
Redesign visibility of system status and error prevention (no internet pop-ups, success, errors, delete confirmations, etc...)
Experimentation of different user flows for photo capturing process (need user data to support this however)
For Desktop:
Collapsible side nav bar
Redesign for dashboard, organisation, teams and projects
Redesign visibility of system status and error prevention (no internet pop-ups, success, errors, delete confirmations, etc...)
Design Process
Architecture
User Flows
Before beginning the sketching and wireframing of specific user flow and UX changes, I formed user flow diagrams for both the desktop and mobile application.
Documenting all possibilities
Although the intentions of the application were quite single there are many possibilities. I noticed many errors within the application and each one needed to be documented clearly for both developers to fix and for me to re-design. As the UI was changing completely I needed to make sure I re-designed each page and each possibility.
Following the user flows as a guide, I took screenshots of light and dark mode variants of the current BuiltView application on mobile and desktop.
Design System
The design system documentation was in the works from the beginning of the design process, it was not till the end until it was consolidated, finalised and cleaned up. Dark and Light mode variants and various component states were documented in this design system. The design system was extensive, including documentation and proper use. Below is 5 snippets from the design system.
Design Mockups (V1)
The designing stages of the project went through rapid ideation with sketching for particular sections, such as user flows changes for the camera page on mobile and the dashboard concept on desktop. Wireframing to mock-up was the process for UI based changes.
Some new ideas such as advanced tag management (with folders and archives), change to role functionality, notifications, activity logs, private media gallery and more were introduced in this design stage.
Although not shown here, all instances for snackbars, confirmation dialogs and banners were developed, to view these check out the Figma file.
Iterations
User Research
Primary User Research
Additional testing was conducting on existing users on the new interface to evaluate some of the UX changes and further identify areas for improvement.
Target Audience: User's who regularly use Builtview in their workflow and construction process.
Problem Statement: Understand potential threats impacting the integration of Built view due to limitations of the application or existing barriers within construction.
Research Methods: Questionnaire, Interviews
User Testing Goals
Identify clear pain points for users and the reasons why. Evaluate the most used and unused features. Broadly understand user’s perspective on existing features. Understand issues preventing further integration of the application in a project. Identify the user’s perspective regarding the complexity of the application and reasons for not using particular features. Evaluate recommendations from users to understand how best to improve user experience. Identify the monetary value of using the application over regular processes.
Analysis - Affinity Diagram
Key Findings
Overall from the pool of participants from the survey (10) they are satisfied with BV and agree that it saves time, prevents unnecessary site visits, mitigate risk, saves money and improves efficiency. The main value of Builtview, which made it stand out from competition was the tagging feature, however if not managed properly there can be 100s of tags for each team. This slows down site visits as impacts the quality of record keeping. Users will stop using BV and use their camera roll instead due to multiple bugs and glitches. Users often forget to remove tags or team location before they start capturing, making it easy to lose photos. Users were unaware of many new features and / or how to use them, suggesting features which have already been implemented and being discouraged to use new features as they don't know how.
Insights
1. The basic concept and features of BV has the highest value and therefore does not need to be more complicated (e.g. tags, photo categorisation / organisation, cloud saving, instant upload between mobile and desktop) 2. Outside of suggestions the only user frustrations came from BUGS and GLITCHES (particularly the mobile freeze) 3. For integration to be successful - Push and support from management or a ‘project champion’ - Structure for implementation - especially with roles and permissions for easy use - Clear onboarding tutorial - the application can be confusing at first but is memorable 4. Users will use there phone camera instead of BV due to frustrations from it being too slow or bugs / glitches
What's changing in the next iteration from this research?
Notifications concept was scraped and replaced with similar 'activity log' idea
Saving money preventing unnecessary development
Dashboard user activity monitoring on desktop scraped
Saving money preventing unnecessary development
New plan to develop onboarding and new feature product tours and create new helpcentre content
Resulting from users being unaware of features and / or how to use them - UX Strategy and Product Design
BV Camera roll introduced on mobile to make it easier for users to quickly find recently captured media
Improve error recovery from user based errors
Recently uploaded media and personal activity log added to profile page on mobile
Improve error recovery from user based errors
Further usability testing
Another round of usability testing was conducted on the live mobile app after the changes from V1 was implemented. The testing was conducted in a similar manner, but only with the same external designer (to avoid bias from me conducting it on my own designs). To summarise, the comparison of results from the first round of usability testing to this round was minimal, and mostly outlined some bugs with the UI or the mobile app itself.
Comparison of external designer's first and second evaluation
Despite the second heuristic evaluation having more tasks (22 compared to 17) both the first and second heuristic evaluation noted the same amount of usability notes above a severity rating of 0 (being 8 issues total for both). The severity of these issues in the second heuristci evaluation were much lower, with no major (3) severity issues noted compared to 4 in the first. Most of the heuristic usability metrics were positive in the second whilst very few were positive in the first. The tasks given to Ana in the second heuristic evaluation were designed based off version 304 and a basic understanding of the app which resulted in some of the minor (2) severity issues she noted. All minor (2) severity issues were due to either bad wording of tasks or individual user errors.
Notable design changes and improvements V1 to V2
Desktop
General changes not noted below: Outside of the changes mentioned here, there were further changes to team and profile settings, and the dashboard which is similar to the mobile profile page.
Tag Management
One of the more significant changes for desktop was with the 'tag' page in team settings. From user research it was clear there needed to be changes to make it easier for user's to create folders, allocate tags to folders and set up automatic geofence tagging. A new feature was also added to let user's archive and unarchive tags to make photo categorisation more efficient on construction sites during site visits with engineers.
Creating Roles
Another change was seen in the process, default roles and options for role creation in Builtview. Beforehand, the options for each permission was vague and did not effectively describe what you were enabled or disabling. Default roles were also changed to 'Admin,' 'Member,' and 'View-Only.'
Mobile
General changes not noted below: Other changes to mobile include the display when editing information on existing media and the user flow for uploading
Profile Page
It is clear that a persistent issue amongst user's is forgetting to change tags or location for media files before they start capturing again. This can make it very hard to track down the location of your media files unless you have a hard copy backup on your phone. Therefore the profile page was re-designed to include a 'recently uploaded media' slider list and 'activity log' which documents your uploads, edits and much more! This works alongside the new BV Camera roll which functions the same as a regular team, but only included captures you have taken instead of other members of your teams.
The same design for the profile page on mobile was applied to the dashboard on desktop with the inclusion of recent teams.
Profile Page AFTER
Camera roll AFTER
Camera page design
The camera page is the primary function of the mobile application, with the main intentions of Builtview is for capturing on mobile and managing or viewing on desktop. Hence, there are some limitations of mobile when it comes to managing teams. There were issues with the old design due to visibility of categorisation options, or tagging, descriptions and setting team location.
The changes also included improvements to visibility when uploading media items and option to pause uploads. Below is a comparison of design iteration 1 to design iteration 2
Onboarding flow
The most important change resulting from user research was the introduction to onboarding and product tours. Although the application is quite simplistic, there are many other functions and features the app has to offer, such as automatic geotagging and floorplans. Users either did not know how to use it or did not know it existed.
Onboarding, product tours and new feature dialogs were all introduced for mobile and desktop interfaces. This can be seen in action in the mobile product video
Onboarding flow - new user desktop
New feature tour - profile page flow mobile
Final Designs
Due to funding cuts to the project, not all design improvements were implemented to the desktop interface. Below, you can watch my designs come to life in the real desktop and mobile Builtview application!
figma wizard
open to full-time opportunities in Brisbane / remote
4 internships landed during university
graduated nov 25 with Bachelor of Design (Interaction Design) from USYD
two years experience in product design
Builtview
Streamlining photo management in the construction industry
Internship
Product Design
Mobile
Desktop
Design Systems
Company
Laing O'Rourke
Role
UX/UI Design
Timeline
6 months
Tools
Canva, Figma, GitHub, MaterialUI, MixPanel, Asana, Loop11
Design methods / activities
User Persona, Affinity Diagraming, Heuristic Evaluation, UX/UI uplift, Design System Curation, Mobile design, Web design
Table of contents
Introduction to the product and my role
Research
Design process
Iterations
Final Design
Introduction to the product and my role
What is Builtview?
Builtview is a photo management application designed for construction teams. Builtview saves time for site engineers and creates a comprehensive record of site based photo evidence. This improves efficiency, preventing unnecessary site visits, solving disputes and saving money.
What Builtview Offers
Separate personal and work photos Automatic cloud uploading between mobile and desktop Customisable site reports Organisation of site progression in Teams and Projects Contextual photos with embedded timestamps, GPS location, tags, annotations, markups and more Easy filtering of photos through tags, description, date, uploader or media type
What was my role?
I was hired to tackle two goals:
Prepare Builtview for external use
Evaluate the usability and improve the user experience
These objectives are quite broad, and outside of general UX Research and UI Design, involves Product Design and UX Strategy. I worked alongside the Change Manager (who helps construction projects get set up to integrate Builtview in their construction processes) to align UX Strategy with the Product Strategy.
What I learnt
How to communicate the value of UX Design to stakeholders How to prepare and deliver work for the development stage How to establish and integrate design system documentation How to lead and justify design decisions whilst following stakeholder needs How to be adaptable and change design processes to meet time constraints and stakeholder needs
What did I deliver (and do) in 6 months?
Exploratory research & analysis
conducting competitive landscape to better understand the environment, interviewing engineers to better understand the user, crafting user personas to assess the needs of different types of users. User flow diagrams, documenting app architecture
Exploratory research & analysis
Comprehensive, scalable design system
with components and documentations of use between mobile and desktop interfaces
Comprehensive, scalable design system
Two design iterations, uplifting the UX/UI of mobile and desktop
the first one being a major design overhaul, focusing on the UI, and the second focusing further on the UX. Both iterations were pushed to production on desktop and mobile
Two design iterations, uplifting the UX/UI of mobile and desktop
Two rounds of usability testing and user research
one focused on the existing UI when i joined and another on the first iteration. Following the first iteration launching, interviewing existing users to identify other pain points both in the new interface but also in the existing experience.
Two rounds of usability testing and user research
QAT and Stress testing
documenting all bugs or glitches identified throughout my time at Builtview to further elevate the user experience beyond the UI through clear communication with development team and inputting bugs or small UI glitches through github.
QAT and Stress testing
Simplifying the mobile experience
For Mobile, focusing on the main user behaviour on mobile of photo documentaiton, improving the camera page, process for adding tags, locations and allocating photos to project, optimising offline mode.
Simplifying the mobile experience
Improving the usability of advanced construction features on desktop
For Desktop, improving the tag management, advanced team settings, automatic geotagging, floorplan upload, automatic site report generation and user role permissions in teams were focused on extensively in the second design iteration.
Improving the usability of advanced construction features on desktop
Crafting user onboarding, new feature flows and help content
interactive experiences with clear steps with onboarding (introducing the application), learning the existing features, new feature flows to introduce users and help support content addressing a pain point identified in user interviews which decreased adoption and retention.
Crafting user onboarding, new feature flows and help content
Research
Exploration of the problem area
With foundational primary research available for review, I started my design process by researching the construction industry and workflows to better understand the users and industry. Following this, a competitor analysis and heuristic evaluation was conducted to further evaluate and understand the product offerings and how to prepare the product for external use.
Competitor Analysis
Using past data gathered in early stages of the development process for Builtview and new data gathered I consolidated a competitor landscape of similar products aimed at construction teams. This included looking at CompanyCam, GoTradie, Procore and much more. One notable competitor, UnearthLabs helped aid in UX Strategy in the development of effective onboarding, product tours and help centre content (available at support.builtview.com).
User Personas and Empathy Mapping
Contextualizing the target audience's need for photo capturing and management for evidence-based site photo records formed personas which represented the different types of users which related to the hierarchy in the construction industry. In order to form these personas I organised a collaboration session alongside the lead developer. This collaboration session also lead to creating the structure of the questionnaire which lead users on different questioning based on the type of user they are.
Usability Testing - Heuristic Evaluation
From this point, understanding the product and user the next step was to assess the usability of the existing application to prioritise improvements to the experience. This was done through a heuristic evaluation conducted by me and one external designer.
Research Aim: Identify usability issues within the application through understanding the processes from the perspective of unfamiliar users (designers).
Goals: Usability Testing
Understand how users navigate, access features and use the application.
This will help us see why some features may not be used and issues with the UI / UX
Identify how new users would navigate the application to complete specific tasks.
Evaluate expert perceptions for potential improvements to the existing application.
Highest ranking Heuristic Criteria
H1 = Visibility of system status H2 = Match between system and the real world H3 = User control and freedom H4 = Consistency and Standards H8 = Aesthetic and Minimalist style
Highest ranking Heuristic Criteria
Analysis of the results & prioritisation
Despite the product offerings being quite simplistic, the user flow was complex, confusing, and different between mobile and desktop versions. Multiple bugs, glitches and crashes were noted and also communicated to the development team whilst the design uplift was underway.
Through this, four key tasks were identified, aligning with the heuristic evaluation results.
Improving the UI aesthetic
Establishing a design system for consistency
Improving user freedom and flow
Increasing visibility of system status through snack bars, dialogs and banners.
From this, priorities for the design up-lfit were also identified for specific mobile and desktop.
For Mobile:
Redesign gallery page structure
Redesign visibility of system status and error prevention (no internet pop-ups, success, errors, delete confirmations, etc...)
Experimentation of different user flows for photo capturing process (need user data to support this however)
For Desktop:
Collapsible side nav bar
Redesign for dashboard, organisation, teams and projects
Redesign visibility of system status and error prevention (no internet pop-ups, success, errors, delete confirmations, etc...)
Design Process
Architecture
User Flows
Before beginning the sketching and wireframing of specific user flow and UX changes, I formed user flow diagrams for both the desktop and mobile application.
Documenting all possibilities
Although the intentions of the application were quite single there are many possibilities. I noticed many errors within the application and each one needed to be documented clearly for both developers to fix and for me to re-design. As the UI was changing completely I needed to make sure I re-designed each page and each possibility.
Following the user flows as a guide, I took screenshots of light and dark mode variants of the current BuiltView application on mobile and desktop.
Design System
The design system documentation was in the works from the beginning of the design process, it was not till the end until it was consolidated, finalised and cleaned up. Dark and Light mode variants and various component states were documented in this design system. The design system was extensive, including documentation and proper use. Below is 5 snippets from the design system.
Design Mockups (V1)
The designing stages of the project went through rapid ideation with sketching for particular sections, such as user flows changes for the camera page on mobile and the dashboard concept on desktop. Wireframing to mock-up was the process for UI based changes.
Some new ideas such as advanced tag management (with folders and archives), change to role functionality, notifications, activity logs, private media gallery and more were introduced in this design stage.
Although not shown here, all instances for snackbars, confirmation dialogs and banners were developed, to view these check out the Figma file.
Iterations
User Research
Primary User Research
Additional testing was conducting on existing users on the new interface to evaluate some of the UX changes and further identify areas for improvement.
Target Audience: User's who regularly use Builtview in their workflow and construction process.
Problem Statement: Understand potential threats impacting the integration of Built view due to limitations of the application or existing barriers within construction.
Research Methods: Questionnaire, Interviews
User Testing Goals
Identify clear pain points for users and the reasons why. Evaluate the most used and unused features. Broadly understand user’s perspective on existing features. Understand issues preventing further integration of the application in a project. Identify the user’s perspective regarding the complexity of the application and reasons for not using particular features. Evaluate recommendations from users to understand how best to improve user experience. Identify the monetary value of using the application over regular processes.
Analysis - Affinity Diagram
Key Findings
Overall from the pool of participants from the survey (10) they are satisfied with BV and agree that it saves time, prevents unnecessary site visits, mitigate risk, saves money and improves efficiency. The main value of Builtview, which made it stand out from competition was the tagging feature, however if not managed properly there can be 100s of tags for each team. This slows down site visits as impacts the quality of record keeping. Users will stop using BV and use their camera roll instead due to multiple bugs and glitches. Users often forget to remove tags or team location before they start capturing, making it easy to lose photos. Users were unaware of many new features and / or how to use them, suggesting features which have already been implemented and being discouraged to use new features as they don't know how.
Insights
1. The basic concept and features of BV has the highest value and therefore does not need to be more complicated (e.g. tags, photo categorisation / organisation, cloud saving, instant upload between mobile and desktop) 2. Outside of suggestions the only user frustrations came from BUGS and GLITCHES (particularly the mobile freeze) 3. For integration to be successful - Push and support from management or a ‘project champion’ - Structure for implementation - especially with roles and permissions for easy use - Clear onboarding tutorial - the application can be confusing at first but is memorable 4. Users will use there phone camera instead of BV due to frustrations from it being too slow or bugs / glitches
What's changing in the next iteration from this research?
Notifications concept was scraped and replaced with similar 'activity log' idea
Saving money preventing unnecessary development
Dashboard user activity monitoring on desktop scraped
Saving money preventing unnecessary development
New plan to develop onboarding and new feature product tours and create new helpcentre content
Resulting from users being unaware of features and / or how to use them - UX Strategy and Product Design
BV Camera roll introduced on mobile to make it easier for users to quickly find recently captured media
Improve error recovery from user based errors
Recently uploaded media and personal activity log added to profile page on mobile
Improve error recovery from user based errors
Further usability testing
Another round of usability testing was conducted on the live mobile app after the changes from V1 was implemented. The testing was conducted in a similar manner, but only with the same external designer (to avoid bias from me conducting it on my own designs). To summarise, the comparison of results from the first round of usability testing to this round was minimal, and mostly outlined some bugs with the UI or the mobile app itself.
Comparison of external designer's first and second evaluation
Despite the second heuristic evaluation having more tasks (22 compared to 17) both the first and second heuristic evaluation noted the same amount of usability notes above a severity rating of 0 (being 8 issues total for both). The severity of these issues in the second heuristci evaluation were much lower, with no major (3) severity issues noted compared to 4 in the first. Most of the heuristic usability metrics were positive in the second whilst very few were positive in the first. The tasks given to Ana in the second heuristic evaluation were designed based off version 304 and a basic understanding of the app which resulted in some of the minor (2) severity issues she noted. All minor (2) severity issues were due to either bad wording of tasks or individual user errors.
Notable design changes and improvements V1 to V2
Desktop
General changes not noted below: Outside of the changes mentioned here, there were further changes to team and profile settings, and the dashboard which is similar to the mobile profile page.
Tag Management
One of the more significant changes for desktop was with the 'tag' page in team settings. From user research it was clear there needed to be changes to make it easier for user's to create folders, allocate tags to folders and set up automatic geofence tagging. A new feature was also added to let user's archive and unarchive tags to make photo categorisation more efficient on construction sites during site visits with engineers.
Creating Roles
Another change was seen in the process, default roles and options for role creation in Builtview. Beforehand, the options for each permission was vague and did not effectively describe what you were enabled or disabling. Default roles were also changed to 'Admin,' 'Member,' and 'View-Only.'
Mobile
General changes not noted below: Other changes to mobile include the display when editing information on existing media and the user flow for uploading
Profile Page
It is clear that a persistent issue amongst user's is forgetting to change tags or location for media files before they start capturing again. This can make it very hard to track down the location of your media files unless you have a hard copy backup on your phone. Therefore the profile page was re-designed to include a 'recently uploaded media' slider list and 'activity log' which documents your uploads, edits and much more! This works alongside the new BV Camera roll which functions the same as a regular team, but only included captures you have taken instead of other members of your teams.
The same design for the profile page on mobile was applied to the dashboard on desktop with the inclusion of recent teams.
Profile Page AFTER
Camera roll AFTER
Camera page design
The camera page is the primary function of the mobile application, with the main intentions of Builtview is for capturing on mobile and managing or viewing on desktop. Hence, there are some limitations of mobile when it comes to managing teams. There were issues with the old design due to visibility of categorisation options, or tagging, descriptions and setting team location.
The changes also included improvements to visibility when uploading media items and option to pause uploads. Below is a comparison of design iteration 1 to design iteration 2
Onboarding flow
The most important change resulting from user research was the introduction to onboarding and product tours. Although the application is quite simplistic, there are many other functions and features the app has to offer, such as automatic geotagging and floorplans. Users either did not know how to use it or did not know it existed.
Onboarding, product tours and new feature dialogs were all introduced for mobile and desktop interfaces. This can be seen in action in the mobile product video
Onboarding flow - new user desktop
New feature tour - profile page flow mobile
Final Designs
Due to funding cuts to the project, not all design improvements were implemented to the desktop interface. Below, you can watch my designs come to life in the real desktop and mobile Builtview application!
figma wizard
open to full-time opportunities in Brisbane / remote
4 internships landed during university
graduated nov 25 with Bachelor of Design (Interaction Design) from USYD
two years experience in product design
Builtview
Streamlining photo management in the construction industry
Internship
Product Design
Mobile
Desktop
Design Systems
Company
Laing O'Rourke
Role
UX/UI Design
Timeline
6 months
Tools
Canva, Figma, GitHub, MaterialUI, MixPanel, Asana, Loop11
Design methods / activities
User Persona, Affinity Diagraming, Heuristic Evaluation, UX/UI uplift, Design System Curation, Mobile design, Web design
Table of contents
Introduction to the product and my role
Research
Design process
Iterations
Final Design
Introduction to the product and my role
What is Builtview?
Builtview is a photo management application designed for construction teams. Builtview saves time for site engineers and creates a comprehensive record of site based photo evidence. This improves efficiency, preventing unnecessary site visits, solving disputes and saving money.
What Builtview Offers
Separate personal and work photos Automatic cloud uploading between mobile and desktop Customisable site reports Organisation of site progression in Teams and Projects Contextual photos with embedded timestamps, GPS location, tags, annotations, markups and more Easy filtering of photos through tags, description, date, uploader or media type
What was my role?
I was hired to tackle two goals:
Prepare Builtview for external use
Evaluate the usability and improve the user experience
These objectives are quite broad, and outside of general UX Research and UI Design, involves Product Design and UX Strategy. I worked alongside the Change Manager (who helps construction projects get set up to integrate Builtview in their construction processes) to align UX Strategy with the Product Strategy.
What I learnt
How to communicate the value of UX Design to stakeholders How to prepare and deliver work for the development stage How to establish and integrate design system documentation How to lead and justify design decisions whilst following stakeholder needs How to be adaptable and change design processes to meet time constraints and stakeholder needs
What did I deliver (and do) in 6 months?
Exploratory research & analysis
conducting competitive landscape to better understand the environment, interviewing engineers to better understand the user, crafting user personas to assess the needs of different types of users. User flow diagrams, documenting app architecture
Exploratory research & analysis
Comprehensive, scalable design system
with components and documentations of use between mobile and desktop interfaces
Comprehensive, scalable design system
Two design iterations, uplifting the UX/UI of mobile and desktop
the first one being a major design overhaul, focusing on the UI, and the second focusing further on the UX. Both iterations were pushed to production on desktop and mobile
Two design iterations, uplifting the UX/UI of mobile and desktop
Two rounds of usability testing and user research
one focused on the existing UI when i joined and another on the first iteration. Following the first iteration launching, interviewing existing users to identify other pain points both in the new interface but also in the existing experience.
Two rounds of usability testing and user research
QAT and Stress testing
documenting all bugs or glitches identified throughout my time at Builtview to further elevate the user experience beyond the UI through clear communication with development team and inputting bugs or small UI glitches through github.
QAT and Stress testing
Simplifying the mobile experience
For Mobile, focusing on the main user behaviour on mobile of photo documentaiton, improving the camera page, process for adding tags, locations and allocating photos to project, optimising offline mode.
Simplifying the mobile experience
Improving the usability of advanced construction features on desktop
For Desktop, improving the tag management, advanced team settings, automatic geotagging, floorplan upload, automatic site report generation and user role permissions in teams were focused on extensively in the second design iteration.
Improving the usability of advanced construction features on desktop
Crafting user onboarding, new feature flows and help content
interactive experiences with clear steps with onboarding (introducing the application), learning the existing features, new feature flows to introduce users and help support content addressing a pain point identified in user interviews which decreased adoption and retention.
Crafting user onboarding, new feature flows and help content
Research
Exploration of the problem area
With foundational primary research available for review, I started my design process by researching the construction industry and workflows to better understand the users and industry. Following this, a competitor analysis and heuristic evaluation was conducted to further evaluate and understand the product offerings and how to prepare the product for external use.
Competitor Analysis
Using past data gathered in early stages of the development process for Builtview and new data gathered I consolidated a competitor landscape of similar products aimed at construction teams. This included looking at CompanyCam, GoTradie, Procore and much more. One notable competitor, UnearthLabs helped aid in UX Strategy in the development of effective onboarding, product tours and help centre content (available at support.builtview.com).
User Personas and Empathy Mapping
Contextualizing the target audience's need for photo capturing and management for evidence-based site photo records formed personas which represented the different types of users which related to the hierarchy in the construction industry. In order to form these personas I organised a collaboration session alongside the lead developer. This collaboration session also lead to creating the structure of the questionnaire which lead users on different questioning based on the type of user they are.
Usability Testing - Heuristic Evaluation
From this point, understanding the product and user the next step was to assess the usability of the existing application to prioritise improvements to the experience. This was done through a heuristic evaluation conducted by me and one external designer.
Research Aim: Identify usability issues within the application through understanding the processes from the perspective of unfamiliar users (designers).
Goals: Usability Testing
Understand how users navigate, access features and use the application.
This will help us see why some features may not be used and issues with the UI / UX
Identify how new users would navigate the application to complete specific tasks.
Evaluate expert perceptions for potential improvements to the existing application.
Highest ranking Heuristic Criteria
H1 = Visibility of system status H2 = Match between system and the real world H3 = User control and freedom H4 = Consistency and Standards H8 = Aesthetic and Minimalist style
Highest ranking Heuristic Criteria
Analysis of the results & prioritisation
Despite the product offerings being quite simplistic, the user flow was complex, confusing, and different between mobile and desktop versions. Multiple bugs, glitches and crashes were noted and also communicated to the development team whilst the design uplift was underway.
Through this, four key tasks were identified, aligning with the heuristic evaluation results.
Improving the UI aesthetic
Establishing a design system for consistency
Improving user freedom and flow
Increasing visibility of system status through snack bars, dialogs and banners.
From this, priorities for the design up-lfit were also identified for specific mobile and desktop.
For Mobile:
Redesign gallery page structure
Redesign visibility of system status and error prevention (no internet pop-ups, success, errors, delete confirmations, etc...)
Experimentation of different user flows for photo capturing process (need user data to support this however)
For Desktop:
Collapsible side nav bar
Redesign for dashboard, organisation, teams and projects
Redesign visibility of system status and error prevention (no internet pop-ups, success, errors, delete confirmations, etc...)
Design Process
Architecture
User Flows
Before beginning the sketching and wireframing of specific user flow and UX changes, I formed user flow diagrams for both the desktop and mobile application.
Documenting all possibilities
Although the intentions of the application were quite single there are many possibilities. I noticed many errors within the application and each one needed to be documented clearly for both developers to fix and for me to re-design. As the UI was changing completely I needed to make sure I re-designed each page and each possibility.
Following the user flows as a guide, I took screenshots of light and dark mode variants of the current BuiltView application on mobile and desktop.
Design System
The design system documentation was in the works from the beginning of the design process, it was not till the end until it was consolidated, finalised and cleaned up. Dark and Light mode variants and various component states were documented in this design system. The design system was extensive, including documentation and proper use. Below is 5 snippets from the design system.
Design Mockups (V1)
The designing stages of the project went through rapid ideation with sketching for particular sections, such as user flows changes for the camera page on mobile and the dashboard concept on desktop. Wireframing to mock-up was the process for UI based changes.
Some new ideas such as advanced tag management (with folders and archives), change to role functionality, notifications, activity logs, private media gallery and more were introduced in this design stage.
Although not shown here, all instances for snackbars, confirmation dialogs and banners were developed, to view these check out the Figma file.
Iterations
User Research
Primary User Research
Additional testing was conducting on existing users on the new interface to evaluate some of the UX changes and further identify areas for improvement.
Target Audience: User's who regularly use Builtview in their workflow and construction process.
Problem Statement: Understand potential threats impacting the integration of Built view due to limitations of the application or existing barriers within construction.
Research Methods: Questionnaire, Interviews
User Testing Goals
Identify clear pain points for users and the reasons why. Evaluate the most used and unused features. Broadly understand user’s perspective on existing features. Understand issues preventing further integration of the application in a project. Identify the user’s perspective regarding the complexity of the application and reasons for not using particular features. Evaluate recommendations from users to understand how best to improve user experience. Identify the monetary value of using the application over regular processes.
Analysis - Affinity Diagram
Key Findings
Overall from the pool of participants from the survey (10) they are satisfied with BV and agree that it saves time, prevents unnecessary site visits, mitigate risk, saves money and improves efficiency. The main value of Builtview, which made it stand out from competition was the tagging feature, however if not managed properly there can be 100s of tags for each team. This slows down site visits as impacts the quality of record keeping. Users will stop using BV and use their camera roll instead due to multiple bugs and glitches. Users often forget to remove tags or team location before they start capturing, making it easy to lose photos. Users were unaware of many new features and / or how to use them, suggesting features which have already been implemented and being discouraged to use new features as they don't know how.
Insights
1. The basic concept and features of BV has the highest value and therefore does not need to be more complicated (e.g. tags, photo categorisation / organisation, cloud saving, instant upload between mobile and desktop) 2. Outside of suggestions the only user frustrations came from BUGS and GLITCHES (particularly the mobile freeze) 3. For integration to be successful - Push and support from management or a ‘project champion’ - Structure for implementation - especially with roles and permissions for easy use - Clear onboarding tutorial - the application can be confusing at first but is memorable 4. Users will use there phone camera instead of BV due to frustrations from it being too slow or bugs / glitches
What's changing in the next iteration from this research?
Notifications concept was scraped and replaced with similar 'activity log' idea
Saving money preventing unnecessary development
Dashboard user activity monitoring on desktop scraped
Saving money preventing unnecessary development
New plan to develop onboarding and new feature product tours and create new helpcentre content
Resulting from users being unaware of features and / or how to use them - UX Strategy and Product Design
BV Camera roll introduced on mobile to make it easier for users to quickly find recently captured media
Improve error recovery from user based errors
Recently uploaded media and personal activity log added to profile page on mobile
Improve error recovery from user based errors
Further usability testing
Another round of usability testing was conducted on the live mobile app after the changes from V1 was implemented. The testing was conducted in a similar manner, but only with the same external designer (to avoid bias from me conducting it on my own designs). To summarise, the comparison of results from the first round of usability testing to this round was minimal, and mostly outlined some bugs with the UI or the mobile app itself.
Comparison of external designer's first and second evaluation
Despite the second heuristic evaluation having more tasks (22 compared to 17) both the first and second heuristic evaluation noted the same amount of usability notes above a severity rating of 0 (being 8 issues total for both). The severity of these issues in the second heuristci evaluation were much lower, with no major (3) severity issues noted compared to 4 in the first. Most of the heuristic usability metrics were positive in the second whilst very few were positive in the first. The tasks given to Ana in the second heuristic evaluation were designed based off version 304 and a basic understanding of the app which resulted in some of the minor (2) severity issues she noted. All minor (2) severity issues were due to either bad wording of tasks or individual user errors.
Notable design changes and improvements V1 to V2
Desktop
General changes not noted below: Outside of the changes mentioned here, there were further changes to team and profile settings, and the dashboard which is similar to the mobile profile page.
Tag Management
One of the more significant changes for desktop was with the 'tag' page in team settings. From user research it was clear there needed to be changes to make it easier for user's to create folders, allocate tags to folders and set up automatic geofence tagging. A new feature was also added to let user's archive and unarchive tags to make photo categorisation more efficient on construction sites during site visits with engineers.
Creating Roles
Another change was seen in the process, default roles and options for role creation in Builtview. Beforehand, the options for each permission was vague and did not effectively describe what you were enabled or disabling. Default roles were also changed to 'Admin,' 'Member,' and 'View-Only.'
Mobile
General changes not noted below: Other changes to mobile include the display when editing information on existing media and the user flow for uploading
Profile Page
It is clear that a persistent issue amongst user's is forgetting to change tags or location for media files before they start capturing again. This can make it very hard to track down the location of your media files unless you have a hard copy backup on your phone. Therefore the profile page was re-designed to include a 'recently uploaded media' slider list and 'activity log' which documents your uploads, edits and much more! This works alongside the new BV Camera roll which functions the same as a regular team, but only included captures you have taken instead of other members of your teams.
The same design for the profile page on mobile was applied to the dashboard on desktop with the inclusion of recent teams.
Profile Page AFTER
Camera roll AFTER
Camera page design
The camera page is the primary function of the mobile application, with the main intentions of Builtview is for capturing on mobile and managing or viewing on desktop. Hence, there are some limitations of mobile when it comes to managing teams. There were issues with the old design due to visibility of categorisation options, or tagging, descriptions and setting team location.
The changes also included improvements to visibility when uploading media items and option to pause uploads. Below is a comparison of design iteration 1 to design iteration 2
Onboarding flow
The most important change resulting from user research was the introduction to onboarding and product tours. Although the application is quite simplistic, there are many other functions and features the app has to offer, such as automatic geotagging and floorplans. Users either did not know how to use it or did not know it existed.
Onboarding, product tours and new feature dialogs were all introduced for mobile and desktop interfaces. This can be seen in action in the mobile product video
Onboarding flow - new user desktop
New feature tour - profile page flow mobile
Final Designs
Due to funding cuts to the project, not all design improvements were implemented to the desktop interface. Below, you can watch my designs come to life in the real desktop and mobile Builtview application!
figma wizard
open to full-time opportunities in Brisbane / remote
4 internships landed during university
graduated nov 25 with Bachelor of Design (Interaction Design) from USYD
two years experience in product design