UI Design, 3D apartment finder app

Battersea Power Station Redevelopment (Feb - Mar 2016)

Project background

Model Works Media is one of the world’s leading purveyor in interpreting architecture and the built environment, led by qualified architects, engineers, creatives and artists.
MWM was chosen to work on the high profile Battersea Power Station redevelopment to develop a 3D real time apartment finder app.

Brief

Create a 3D sales tool app to show potential buyers an immersive approach to buying a property. Customers will browse off plan apartments before they are built with this 3D real time app. This app is design for an Ipad.

Skills

App UI design
Design system
UAT testing workshop prototype

Project goals:

Produce an app that end users can easily browse through off plan 3D designs of properties with the sales agent
Quick turn around time
Each property development has a print based brand guide and brochure designed for it. The app needs to look like the brand printed style guide, but be adapted for the app. (design digital elements in a design system)
The app needs to have 3D stills, a built in real time 3D feature using Unity games engine and a digital brochure to explain about environs / local area features

DISCOVER - Interviews , conversations

I had several meetings and impromptu chats with key stakeholders to gain an understanding of the requirements needed for the project.

The meetings consisted of : Looking at previous apps the company had done, client expectations, branding guidelines brochure, and wireframes /user journey steps that had already been created for the app.
Property branding agencies develop branding guidelines brochures for new housing developments. I used a brochure like this to work from.

DEFINE - Establish a design system

I established a design system for the UI, using the branding brochure as a reference point for the colour palette, typography and Iconography that was needed. I adapted key elements that would work for the user interface.

CREATE - UI design for the app

The UI designs were created in Adobe Illustrator and Photoshop. I used the wireframes and the list order of user journey steps to mock up all the screens. I included 3D rendered screenshots done by the 3D designers. This helped give an accurate representation of the finished app to the developers.

Please note:

The 3D stills shown below were created by Fosters + Partners architects. Gehry + Partners worked in collaboration with Fosters + Partners on the Battersea Power station re development.

These stills were used in the app along with the 3D real time section created by in Model works media using the games engine, Unity. I did not do any of the 3D work, that was done by specialist 3D artists and 3D Software engineers.

3D stills of Electric Boulevard and intro copy, Gehry building (right)

Location - The masterplan and Transport links to London

Real time 3D model - The user can zoom in and out with finger gestures.

3D stills of Battersea Power Station - Intro copy for Phase 2 Exterior

3D stills of Battersea Power Station - Intro copy for Phase 2 Interior

3D stills of Circus West - Intro copy for Phase 1

3D stills of Electric Boulevard, Gehry’s “Flower” building - Intro copy

PROTOTYPE - Upload UI to Unity Games Engine

The UI designs were exported to Unity games engine, for the developers to code (using C#) in the built 3D environment. This would make the working prototype. The app’s 3D work consisted of explorable 3D real time environments and 3D Studio max stills, imported to Unity.

Battersea power station splash screen (2).jpg

TEST - Check working prototype

The working prototype had to be tested for errors/bugs. I asked to personally test the app to check it was working following the user flow steps.
I designed/wrote a set of tasks to complete, to test the user journey steps work/requirements are fulfilled.

I found an error/bug with the cost £ search tool. The filter didn’t work when the user looked for a properties over a certain category amount. I flagged this to the director of the project, and the software engineers fixed the code.

Results - Client Feedback

The app was completed on time, the feedback from the client was very positive, They have sold a lot of properties using this tool.

New Improvements
Later apps now have the ability to collect data from the profiles created to track apartment sales. There is a new feature to create a user/customer profile, to send favourite apartments to the potential buyer's email.

See more examples and case studies:

For more choices, please continue to browse my portfolio or use the navigation below.