BRAND AND MOBILE APPLICATION Property Management Tool
1
TABLE OF CONTENTS
00 01 INTRODUCTION ......................... 05 Overview
... . . . . . . . . . . .. . . .. . . . . . . . . . . . . . . . . . 07
02 THE BRAND ............................. 09 Brand Development . . . . . . . . .. . . . .. . . . . . . . . Logo ....... . . . . . . . . . . . . . . . . . .. . . .. . . . . . . . . . . . . Logo Iterations . . . . . . . . . . . . . . . . . . . .. . . . .. . . . . Logo Construction . . . . . . . . . . . . . . . . . . . . . . . . . Social Icon . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Logo Misuse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
11 13 15 17 19 21
03 TYPOGRAPHY .......................... 23 Typefaces
. . . . . . . . . . . .. . . .. . . . .. .. . . . . . .. . . . . . 24
04 COLOR . . . ................................ 27 Colors & Meaning
05 MOTION GRAPHIC
. . . . . . . . . . . . . . . . .. . . . . . .. . 29
..................... 31
Storyboard . . . . . . . . . . . . . . . . . . . . .. . . .. . . . . . .. . 33 Final Videos . . . . . . . . . . . . . . . . .. . . .. . .. . . . . . .. . 35
06 MOBILE APP ............................ 37 Research . . . . . . . . . . . .. . .. . . ... . . .. . . . . .. . . . . . Wire Framing . . . . .. . . . . .. . . . . . ... . . .. . . . . .. Low Fidelity . . . . .. . . . . .. . . . . . .. . . .. . . .. . .. . . High Fidelity . . . . . .. . . . . .. . . . . . .. . . . . . .. .. . .. Prototyping . . . . . . . . .. . . .. .. . . . . . .. . . . . .. . . . Final Product . . . . .. . . . . .. . . . . . .. . . . . . . .. .. . .
39 41 43 45 47 49
03 3
INTRODUCTION
01
This project overview shows the conception, development, and visual direction for Rental.
05 5
OVERVIEW According to the 2017 American Community Survey, 34% of US residents live in a rented space with numbers increasing each year. Although this is great news for property owners, there are still tremendous issues with communication amongst tenants and landlords. This has proven to be strenuous in relationships that can lead to legal battles. Our goal for this project was to create a comprehensive property management application that focuses on strengthening the communication between landlords and tenants.
INTRODUCTION Overview
7
THE BRAND
02
In order to maintain a cohesive project, we first developed the brand for Rental.
09 9
BRAND DEVELOPMENT One of the most difficult proccesses of the project was developing the brand for Rental. Through multiple sketches and mind-maps we wanted to combine the main mission of Rental; better communication and property management. This included building a brand to support our idea, clear idea of what our concept trulty encompasses, and the deliverables we wanted to create.
THE BRAND
Brand Development
11
LOGO Logo is not just a business symbol to identify a company and its products or services rather helps in making a strong brand identity. Not only is it a visual representation of what your business stands for, but it can also inspire your target audience to take action and ultimately build loyalty between your brand and your customers. With this in mind, we wanted to incorporate key aspects of our app into our logo, and create a unique, strong, and trustworthy brand.
THE BRAND Logo
RENTAL PROPERTIES
The shape of the roof references the properties that connect the landlord and tenant.
COMMUNICATION
The negative space represents communication, one of the most important tools in property management.
RENTAL
The letter R represents the Rental brand that is clear and concise.
13
LOGO ITERATIONS By providing different logo iteration it ensures that the brand is adaptable yet cohesive. Therefore, we provided 3 different logo formats with a variety of color options that follow the brand. The use of color in logo design is a vast and highly important topic that covers a diverse array of disciplines ranging from color theory to human psychology.
THE BRAND
Logo Iterations
15
LOGO CONSTRUCTION The Rental logo is the most valuable asset to our brand and must be used effectively. Here are some rules to follow when using our logo.
THE BRAND
Logo Construction
• Don’t alter, rotate, or modify the logo • Don’t animate the logo • Don’t accessorize the logo with extra elements • Don’t overemphasize the logo • Follow the clear space guidance in this document • Follow the minimum size guidance in this document
1/4 Logo
1/4 Logo
LOGO CONSTRUCTION
CLEAR SPACE
The primary use of the “R” Logo is to promote our brand and mobile app. To ensure accurate and consistent use the proportions and shape of the “R” Logo should never be altered for any reason.
When using the logo with other graphic elements, make sure to give it some room to breathe. The empty space around the logo should be at least 1/4 the length/width of the logo.
MINIMUM SIZE To ensure the logo maintains its visual impact, do not go any smaller than 16 pixels wide/tall.
17
SOCIAL ICON When using the logo alongside other social icons to represent your presence on Rental, you can use the logo 4 different ways, displayed at equal size and height to the other social media icons. However, it must be legible and maintain the integrity of its form. When using the logo in white, the background color may be set in any color. It is preferred the our logo is represented free of a container but if a container is needed, feel free to use wither a circle, square, or rounded square.
THE BRAND Social Icon
Logo Social Icon
Square Social Icon
Rounded Square Social Icon
Circular Social Icon
Logo Social Icon
Square Social Icon
Rounded Square Social Icon
Circular Social Icon
Logo Social Icon
Square Social Icon
Rounded Square Social Icon
Circular Social Icon
19
LOGO MISUSES The Rental logo is a powerful symbol for what’s happening in property management. Here are some rules to follow when using our logo.
THE BRAND Logo Misuse
1. Don’t alter, rotate, or modify the logo 2. Don’t use a stroke for the logo 3. Don’t rotate the logo 4. Don’t alter or modify the logo 5. Don’t use different colored gradients 6. Don’t fill in the negative space of logo 7. Don’t use modify position of text with logo 8. Don’t use any different colors 9. Don’t use logo icon with text 10. Don’t overlap logo
1
2
3
4
5
6
7
8
9
10
21
TYPOGRAPHY
03
Typography helps to communicate our brand identity while creating consistency and memorability.
23
TYPEFACES Typography is a key feature of the Rental identity and when used correctly allows the brand to communicate in a simple yet effective way. While choosing our typefaces we wanted to ensure that they were designed for webbased use since the Rental brand will primarily be viewed on screens. The brand typefaces can be used in conjunction with one another to highlight or emphasize as well as adding impact where necessary.
TYPOGRAPHY Typefaces
PRIMARY TYPEFACE Baloo is a distinctive heavy spurless design with a subtle tinge of playfulness and all the bare necessities of type. Carefree yet confident, warm yet entertaining, sprightly yet intelligible, Baloo infuses life everywhere it goes.
ABCDEFGHIJKL MNOPQRSTUV W X YZ 0 1 2 3 4 5 6 7 8 0 ? ! # $ % & * () + =
SECONDARY TYPEFACE Proxima Nova (2005) bridges the gap between typefaces like Futura and Akzidenz Grotesk. The result is a hybrid that combines modern proportions with a geometric appearance.
ABCDE FG HIJKLM N OP Q R ST UV W X YZ 0 1 2 3 4 5 6 7 8 0 ? ! # $ % & * () + =
25
COLOR
04
Color is an instantly recognizable element of a successful brand that can help communicate a visual identity.
27
COLORS & MEANING When a consumer interacts with a brand, an opportunity exists for that company to influence their audiences’ perceptions. With this in mind, we researched how the psychology of color affects users in order to accurately portray the mission of Rental.
COLOR
Colors & Meaning
PRIMARY
PRIMARY
HEX: #5BABE2 PANTONE: RGB: 91 171 226 CMYK: 60 19 0 0
HEX: #7AEBCB PANTONE: RGB: 122 235 203 CMYK: 44 0 31 0
BLUE
TURQUOISE
COLOR PSYCHOLOGY
COLOR PSYCHOLOGY Trust Loyalty Dependability Logic Security
Communication Clarity Calmness Inspiration Self-expression
GRADIENT SECONDARY
SECONDARY
HEX: #13263D PANTONE: RGB: 19 38 61 CMYK: 94 80 48 53
HEX: #FFFFFF PANTONE: RGB: 255 255 255 255 CMYK: 0 0 0 0
DARK BLUE
COLOR PSYCHOLOGY
Understanding Patience Sencerity Protection Peace
WHITE
COLOR PSYCHOLOGY Cleanliness Clarity Simplicity Sophistication Freshness
SECONDARY
GRAY
HEX: #565965 PANTONE: RGB: 86 89 101 CMYK: 67 59 45 23 COLOR PSYCHOLOGY
Timelessness Neutrality Reliability Balance 29 Intelligence
MOTION GRAPHIC
05
In order to inform potential users of Rental, we decided to create a promotional video that consisted of motion graphics.
31
STORYBOARD Before diving into designing graphics for our promotional video, it was necessary to create a storyline that best depicted why our target audience needs Rental as their property management tool. Through a variety of scripts and ideations we developed a storyboard that focused on relatable context amongst our target audience.
MOTION GRAPHICS Storyboard
33
FINAL VIDEO For the final video we centered around simple flat illustrations with smooth and dynamic animations throughout the story. We also utilized our brand and app colors in the graphics so that Rental would easily be correllated in the promotion. We created the video to help potential users understand why we created Rental and why they should use it.
MOTION GRAPHIC Final Videos
35
MOBILE APP
06
9:41
... entire inspiration for Rental, to create a Our property management mobile application that satisfies the needs of landlords and tenants.
37
RESEARCH In order to successfully build an app that assists in property management, we needed to understand the needs of current landlords and tenants. We decided the best approach was to conduct a survey asking questions regarding past rental experiences and allowing input for suggestions of our app. Although the survey was meant to be conducted for landlords and tenants, we received little responses from landlords. However, we had a good amount of tenant responses with a total of 45 individuals on Google Forms.
MOBILE APPLICATION Research
SURVEY RESULTS: TENANTS
60 80% of participants expressed interest in our app proposal.
Percent
Percent
51
55
60% of participants are NOT aware of tenant rights.
51% of participants have communication issues with their landlord
55% of participants have issues with delays in requested repairs
Percent
MAIN SURVEY RESULTS
REQUESTED APPLICATION CAPABILITIES
The 20% of people that were not interested in our application stated that their apartment complex has a property management portal in use.
Virtual Maintenance Request Forms
This has resulted into pivoting our target market to independent landlords with tenants and eliminating complexes.
Reminders for Self and Landlord
Maintenance Processing Updates In-app Rental Payment
Easy Communication
Survey results collected on Google Forms with 45 tenant responses.
39
WIRE FRAMING Wireframe is a simplified and schematic visual representation of a layout for website pages or screens of an application interface. We used wireframes to outline visual and typographic hierarchy on user interfaces, set the interactive zones and elements, plan transitions and interactions, and organize the general interface clearly for the target audience. This help with the technical aspect of creating an app. This provided a logical and visual representation of the users interactions with the basic fuctions of the app before moving onto the low-fidelity stage of the process. The flowchart listed the possible decisions and tasks that landlords and tenants would need to perform while using Rental.
MOBILE APPLICATION Wire Framing
41
LOW FIDELITY Low-fidelity (lo-fi) prototyping is a quick and easy way to translate high-level design concepts into tangible and testable artifacts. The first and most important role of lo-fi prototypes is to check and test functionality rather than the visual appearance of the product. This really helped with figuring out how we wanted to set up the app, and how we wanted users to interactive with it. Using low-fidelity towards the begining of the mobile application creation process helped us visualize the app and iterate different options fast.
MOBILE APPLICATION Low Fidelity
9:41
9:41
9:41
9:41
9:41
9:41
43
HIGH FIDELITY High-fidelity prototypes are highly functional and interactive. They are very close to the final product, with most of the necessary design assets and components developed and integrated. Hi-fi prototypes are often used in the later stages to test usability and identify issues in the work flow. Pictured to the right are a few of our high-fideliry features of the app. After several iterations and UX research, we ended on a very clean, intriguing, and user-friendly design.
MOBILE APPLICATION High Fidelity
45
PROTOTYPING After finalizing the designs, we began the process of prototyping Rental in Adobe XD. Through Adobe XD we were able to connect assets of our designs across multiple art-boards to simulate a mobile application experience. With over 150 individual art-boards in total for our project, this was a lengthy process that had to be managed carefully.
MOBILE APPLICATION Prototyping
47
FINAL APP As our final product for our project, we developed a full prototype of Rental for landlord and tenant users. Our main unique features of Rental include: 1. In-app bill upload and payment 2. Messaging 3. Calendar 4. In-app maintenance requests 5. Dashboard summaries 6. Response timers 7. Landlord and tenant reviews
MOBILE APPLICATION Final App
49
51