UI Design, 3D apartment finder app

Redrow London (April-May 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. Colindale Gardens is a Redrow property development in NW9.

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.

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. Regarding the UI software, I now work with Sketch , Zeplin and I am looking into using Figma.

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:

These 3D stills were used in the app along with the 3D real time section created by in Model works media landscape 3D Artists and 3D Software engineers using the games engine, Unity.

I did not do any of the 3D work.

Loading screen and overview page (pressed logo on gold bar)

3D stills of Colindale Gardens - Amenities and Exterior

3D stills of Colindale Gardens - Exterior and Search

3D stills of Colindale Gardens - Search and about page

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.

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.

Results - Client Feedback

The app was completed on time, the feedback from the client feedback was very positive.

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.