Dev Log Major Project

Post Six: Companion App

by ward2021

This post encompasses the design of the companion app, a significant component of this project. The objective is to develop an app that enables customers to receive updates on their home’s development, communicate with their agent, make adjustments, and utilise augmented reality to visualise their home in 3D format.

During the research phase, it proved challenging to identify a new build company that offers a companion app for buyers. Additionally, there’s a noticeable scarcity of emerging technologies used within the sector. Whether these functionalities are publicly available or not recognised as beneficial remains to be determined. Consequently, this gap in the market presents Wardell Homes with a unique selling point, setting it apart from competitors.

Functionality

Before commencing the app design process, it was crucial to outline its functionality. This involved determining the app’s specific features and how they would be organised and placed. This preliminary step ensured the app’s design flowed seamlessly and effectively. Establishing the functionality upfront clarified where each function should be placed within the app’s layout, ultimately optimising the user experience.

Below is a flow chart demonstrating my thought process throughout this stage.

Figure 1: A flow chart showing the functions of the app and the screens of the designs. This helped to map out the designs and how the app would flow.

Design

Software

The selected software for app design is Figma since I have a good understanding due to previous use in other modules. While Adobe XD and Figma share similarities, Figma offers a distinct advantage in its collaborative features and accessibility across various devices. Figma’s collaborative nature enables seamless teamwork, allowing multiple users to work on the same project simultaneously. Additionally, Figma can be accessed from any device with internet connectivity, enhancing flexibility and convenience for team members.

One notable benefit of using Figma is its capability to quickly transfer components from the Wardell Homes website, minimising the need for repetitive design tasks. I streamlined the design process by leveraging existing components and ensured consistency across platforms. Furthermore, Figma’s sharing functionality facilitates effortless sharing of design files, enabling anyone to view and interact with prototypes efficiently.

Design Process

Due to the absence of existing apps resembling the Wardell Homes companion app, there was no inspiration to draw. However, this presented an opportunity as it allowed for a more unique design approach. 

I initiated the process by establishing a small component library, incorporating some elements sourced from the website design. This initial step was facilitated by outlining predetermined functions and flows, enabling a more structured and efficient design process. By creating a component library at the outset, I laid the groundwork for a cohesive and visually appealing app design that aligned seamlessly with Wardell Homes’ branding and functionality requirements.

With the frames laid out and the component library completed, I began designing the app. Having all the necessary components, I opted to start directly with high-fidelity designs. While this deviates from standard procedure, this approach is most effective for my workflow. I visualised the layout of each frame in my mind and translated these designs directly onto the frames as high-fidelity representations. This method allowed for a more efficient and intuitive design process, enabling me to convey my vision for the app’s interface and functionality accurately.

After completing the design of all frames, I meticulously reviewed each one to make minor adjustments, such as ensuring consistent and accurate clear spaces throughout the design. This attention to detail was crucial for maintaining consistency across the app’s interface. 

Figure 2: A screenshot of the figma file with the completed designs. There is both light and dark designs for light and dark mode, a feature most smartphones have.

Once satisfied with the design, I shared it with multiple individuals for trial and feedback. Soliciting feedback from diverse perspectives is essential as it allows people unfamiliar with the app to assess its ease of understanding and usability. This iterative process of testing and refining elevates the app’s overall quality and ensures it meets the needs and expectations of its users.

Upon receiving feedback, the only adjustment needed was resizing some icons. Remarkably, all testers clearly understood the app’s functionality and could navigate it seamlessly. This positive outcome indicated that the overall design process was completed, meeting the app’s objectives of clarity and usability.

Prototyping

The prototyping process was straightforward, thanks to the strategic layout of frames and the efficient functionality of Figma. Utilising Figma’s feature, which enables the selection of multiple components at once to transfer them to the same frames, facilitated seamless progress. In contrast to the website, there were fewer animations to incorporate, simplifying the process and significantly accelerating its pace.

Figure 3: A screenshot of the figma file showing how the app it prototyped.

Completed Design

I embraced an iOS-inspired design aesthetic, drawing inspiration from Apple’s commitment to sleek, elegant, and visually captivating interfaces. This choice was motivated by the unique blend of premium quality and meticulous attention to detail that characterises Apple’s products, which will strongly appeal to consumers who value aesthetics. 

I strategically chose the widely recognised Poppins font for all text in the app and website. Poppins, a font widely used for web content, was selected for its familiarity with platforms like Chrome, aligning with Jakob’s Law. This choice and my adherence to the brand guidelines and style guide ensure consistency across all assets and reinforce Wardell Homes’s brand values.

Below is a preview of the completed app design and the Figma link, providing direct access to the file. The link will allow you to explore the prototype and examine the designs closely.

Figma File
Prototype
Figure 4: A preview of the app’s homepage in both dark and light mode to get a glimpse of how the app looks as the user opens it. The homepage has a countdown, the progress of the home, the home itself and a to-do list of tasks that have been and need to be completed.

App Breakdown

Here is a brief video demonstration showcasing how to navigate the app and highlighting its features. Customers who have purchased a home will receive a link to the app via email, along with this demonstration video, which is attached. 

The video of the app breakdown will be included as part of the practical work assignment, so you may choose to skip it.

I decided not to include a tutorial within the app, as the design can be overwhelming. Instead, the simple and straightforward onboarding sequence provides insight into the app’s features, helping users get acquainted with its functionalities.

How the post contributes to the project’s objective

The app was the key to delivering AR experiences, demonstrating how real estate companies can differentiate themselves and engage customers with advanced technology. It was a tool and gateway to a new, immersive real estate experience. The overall objective of the project was to show how AR can be utilised in real estate, I wanted to create a platform where and how this feature can be applied instead of just generating a barcode and scanning it. I felt that by creating this app, it showed the use of the feature through a different platform.

Time Management Reflection

Initially, I allocated two weeks for the app’s design phase. However, I completed the design in under a week, leaving an additional week available for other aspects of the project. This flexibility provided a buffer in case any other part of the project required more time or attention. This extra time ensures that all aspects of the project can be completed thoroughly and with attention to detail, contributing to its overall success.

Figure 5: The gantt chart that was created at the beginning of the major project that shows a breakdown of how each nast is seperated and the time dedicated.

References

Images Used

You may like

Major Project Production Piece

19 May, 2024

Post Five: Website

8 February, 2024