Architectural Showcase Mobile App
I designed a mobile app for SAOTA
to showcase their architectural designs and allow users to interact with them in virtual reality.
an architectural design firm in Cape Town, SA.
Design a mobile application that allows users to view and interact with architectural designs with or without a virtual reality headset.
2 monthsMobile App Facelift
*This was originally completed in 2016, but I updated the visual design in 2021 in the spirit of constant improvement and iteration and to reflect how my UI design skills had evolved in 5 years. Read more about my redesign process here:
SAOTA is an architectural design firm that offers clients the ability to "walk through" and preview building and home designs in virtual reality. They needed a way to showcase their work and VR functionalities with a wider audience by giving users a glimpse of both their architectural expertise and virtual reality capabilities.
SAOTA's mobile application enables users to browse through their top work, select a project to learn more, and download that project to experience it in virtual reality or as an interactive 360° photo.
Browse through Projects
A clean, visually-driven interface with clear action buttons makes scrolling through projects an enjoyable, engaging experience.
View Project Details
After selecting a project that interests them, users can see more details about it and swipe through additional image files to get a better sense of the design. The next step users can take, downloading the project, is clearly shown on the same interface.
"Walk Through" Projects
Users can view projects as an interactive 360° photo or in virtual reality if they have a VR headset. A simple, minimalist layout gives users easy access to key actions while not distracting from their viewing experience.
The purpose of SAOTA's mobile app is to showcase their architectural designs and allow users to "walk through" the designs, either by interacting with 360° images or by using a VR headset.
Below are the main goals that guided the UI and UX design of the app.
1. Make the app easy to use and navigate.
The goal of the app was for users to get a taste of SAOTA's designs. Whether someone was a VR expert or had never done any sort of digital walkthrough before, the app should be simple to learn and use.
2. Emphasize the images.
Since the focus of the app is on SAOTA's architectural designs, the interface needed to be simple and minimalist as to not distract from the images. This meant avoiding bold, distracting visual elements.
3. Ensure VR capabilities and functionality is clear.
SAOTA's app allowed users to view images in virtual reality mode (with a VR headset) or in regular mode with a 360° photo. Since these were two very different experiences, it needed to be clear to users how to choose which one they wanted and how to properly calibrate their device.
I began my process by outlining the key product functionalities and user goals.
The app needed to allow users to explore the different projects, learn more about an individual project, and then download and view that project. That sequence of events made up the main user workflow for the app.
Using the user goals and flows, I defined the app's information architecture to help visualize how the different interfaces worked together.
Once I defined the basic functionalities the app needed to have, I began sketching concepts of how the individual interfaces would look and act. The design goals I outlined helped guide the creation of these interfaces. I used the imagery as the guiding focal point in my designs, with the rest of the interface supplementing the images and helping drive user action.
Since the focus of the app was on the imagery, I kept the interfaces simple and minimalistic. Using bold design elements would compete too much with the images for the user's attention and add confusion. I used color sparingly, using it only for elements that users could interact with, which helped guide user action by easily identifying the possible actions on a given screen.
The goal of the explore page was to give users enough information about each project to help them determine which they wanted to learn more about. To keep the interface simple and follow the goal of being heavily visually-driven, I used a large photo for each project along with its name and location. To make it obvious that users could tap a project to learn more, I used a large orange button with an arrow to signal that this was something they could interact with.
For apps where users are navigating frequently between different features, bottom navigation bars are the most ideal. However, for this app, the additional links for the About and Contact pages are not commonly visited and are not part of most user workflows. Because they are less frequently visited, it makes more sense to hide them within a hamburger menu rather than always displaying them on the bottom of the screen. This keeps the overall interface cleaner and avoids adding extra links that, for most users, would be unnecessary.
When a user is typing in the search bar, a list of matching project names and locations appear as they type. If a user is searching for a specific project, they might not remember the full name of it, so the search suggestions help guide the user to what they are looking for. This enables users to accomplish their search goals faster and more effectively. The suggestions also help avoid search errors caused by typos.
The project overview screen gives users more information about a project and the option to view it in VR mode. As with the explore page, the interface is visually-driven with the text supplementing the imagery. The next recommended action, downloading the project, is clearly identified with a large orange button.
Even if users don't want to download the project or see it in VR mode, they can still swipe through multiple project images in full screen mode. Since the ultimate goal of the app is to showcase SAOTA's designs, it's okay if not all users want to use the full viewing functionalities.
While it would be most ideal if a user could immediately view all the projects, the project files are quite large and use a lot of data. To ensure the app took up less data when first downloaded, the projects are initially not downloaded, and users can opt to download the ones they are most interested in.
I intentionally used the language "Download Project" instead of "View Project" for the button. This helps set expectations that data will be needed to access this project and helps avoid a situation where a user who isn't on WiFi unintentionally uses a lot of data, thinking they are accessing a project that is already downloaded.
After selecting the button, the text changes to "Downloading." If users change their mind, they can tap the button again to stop the download.
Once a project is downloaded and users choose to view it, they can interact with a 360° image or explore it in virtual reality. To avoid confusing users with VR if they did not want it, the screen defaults to the 360° image mode with VR disabled. First-time users are shown instructions on how to interact with the image to avoid confusion and ensure they are aware of all possible actions to take.
To avoid distracting users from their viewing experience, I used a very minimalistic design, only including icons for the most essential actions: a way to exit (back arrow), a way to exit VR mode (toggle), and a way to be reminded of the instructions (information icon).
Result & Next Steps
The final product allows users to quickly and easily navigate through the different projects. All interfaces were heavily focused on SAOTA’s images, making it easy for users to preview the projects before downloading them. After selecting and downloading a project, the straightforward interfaces and clear instructions help users understand how to interact with the image files.
The design accomplished the goals I outlined while still adhering to SAOTA’s existing style guide, resulting in an app that is intuitive and enjoyable to use.
If I were to continue working on this app, some enhancements I'd add would be the ability to like or save favorite projects to encourage user retention, a global map users could explore to see where the different projects are located, and a way to easily share projects with others to help increase the app's utilization.