BIM 360 Mobile App
When my team joined BIM 360, it initially consisted of web and iOS platforms. The main request from our users was to add Android to the platform base. The challenge was to maintain the same functionalities as web and iOS, while creating a new UI and interactions for Android.
The Android platform was also the first “next generation” BIM 360 product, and all other products would base their new look and feel and visual guidelines on this design.
Document View
For document view, the grid view was selected as the default view, so users could easily identify their drawings through the thumbnails. We also noted that many of our users changed between project quite frequently, so this functionality was moved from the menu onto the main header.
.png)
View Drawing and Create Issue
When designing the canvas look and feel, I wanted to maintain a minimal interface, with the actions buttons being the most prominent element on the page in black. The same was applied for creating an issue, where the ‘Create’ button is the most prominent element.
.png)
.png)
Issues on Tablet
The tablet view screen size allowed for the placement of elements side by side. For example, users could view an issue while keeping the canvas open, or scanning other issues from the list. In the list view, I added icons to make it easier to scan the issues.
.png)
Issue View
Each issue contained a large amount of information, and it was crucial to use visuals and hierarchy to create order. I used icons, user avatars and graphic elements to guide the users eye throughout the layout. The different font sizes and colours also helped create balance.
Edit Assignee
Each issue could be assigned to a user, role or company. This division is especially helpful when a user isn’t familiar with the name of the assignee, or if many people from the same company can have to be assigned to an issue.
.png)
Issue Statuses
Each issue contained a large amount of information, and it was crucial to use visuals and hierarchy to create order. I used icons, user avatars and graphic elements to guide the users eye throughout the layout. The different font sizes and colours also helped create balance.
High Fidelity Mockup
