Overview
RealPage is a company that provides software for the multifamily, commercial, single-family, and vacation rental housing industries.
The Challenge
RealPage is a company that provides software for the multifamily, commercial, single-family, and vacation rental housing industries.
The Challenge
PropertyPhotos emerged as a novel initiative for RealPage, aiming to establish a comprehensive platform for property management companies. The objective was to create a site that not only facilitated the purchase of stock and custom media but also enabled the creation and management of media on a per-property basis through a Digital Asset Manager (DAM). The existing process involved a manual workflow through customer service and creative teams for media purchases, which they sought to streamline with a customer-facing site. Additionally, the incorporation of Digital HealthCheck™ was a priority, offering tools to analyze, protect, and take proactive measures against risks associated with assets.
MY ROLE
UX/UI Designer II
What I did:
My challenge was to create this site from the ground up, working with the product owners, researchers, and developers. As the lead designer, I collaborated with the product team to evaluate design needs, gather requirements, and create wires while working out user flows. I worked on every user flow for this project, creating, presenting, and delivering high-fidelity clickable prototypes. I conducted card sorting and whiteboarding sessions, participated in testing the beta version of the site, and collaborated with developers. Additionally, I trained and managed two other designers to assist with the design work and created/maintained an asset library.
UX/UI Designer II
What I did:
My challenge was to create this site from the ground up, working with the product owners, researchers, and developers. As the lead designer, I collaborated with the product team to evaluate design needs, gather requirements, and create wires while working out user flows. I worked on every user flow for this project, creating, presenting, and delivering high-fidelity clickable prototypes. I conducted card sorting and whiteboarding sessions, participated in testing the beta version of the site, and collaborated with developers. Additionally, I trained and managed two other designers to assist with the design work and created/maintained an asset library.
TOOLS USED
Sketch, InVision, Zeplin, Adobe CC, Jira, Confluence
DURATION
Oct 2017-Aug 2019
1 year, 10 months
Oct 2017-Aug 2019
1 year, 10 months
THE TEAM
1 UX Designer, 1 Product Owner, 1 Business Analyst, 3 Front End Engineers, 1 Back End Engineer, Marketing Team/Creatives
1 UX Designer, 1 Product Owner, 1 Business Analyst, 3 Front End Engineers, 1 Back End Engineer, Marketing Team/Creatives
Business Constraints
Business Requirements for MVP
01 Registration and Authentication
02 E-Commerce/payments
02 E-Commerce/payments
03 manage media
04 marketplace (search, find, and purchase)
05 digital asset healthcheck (curation
05 digital asset healthcheck (curation
06 projects (create content)
Project Lifecycle
01 gather requirements
02 Synthesize existing research
03 design and development phase
04 beta launch
02 Synthesize existing research
03 design and development phase
04 beta launch
05 test
06 iterate
07 launch
06 iterate
07 launch
Research
Understanding the market and its current users
Collaborating with the research team, I contributed to assembling a competitive analysis and assisted in developing personas. Engaging with marketing and property professionals, we conducted discussions to understand the applications and websites they utilized, along with their approaches to acquiring custom media for their properties.
Understanding the market and its current users
Collaborating with the research team, I contributed to assembling a competitive analysis and assisted in developing personas. Engaging with marketing and property professionals, we conducted discussions to understand the applications and websites they utilized, along with their approaches to acquiring custom media for their properties.
Research Goals
Our objective was to explore how property professionals handle the management and procurement of their digital media assets, identifying the key challenges and pain points associated with the tools and web applications they use.
Our objective was to explore how property professionals handle the management and procurement of their digital media assets, identifying the key challenges and pain points associated with the tools and web applications they use.
Competitive Analysis
I conducted a competitive analysis to comprehend the strengths, weaknesses, similarities, and distinctions among competitor digital asset management sites, as well as stock photography and stock footage platforms. Additionally, I examined how these platforms addressed specific user flows.
I conducted a competitive analysis to comprehend the strengths, weaknesses, similarities, and distinctions among competitor digital asset management sites, as well as stock photography and stock footage platforms. Additionally, I examined how these platforms addressed specific user flows.
Competitive Analysis
Interviews
From moderated user interviews we were able to learn about property professional’s goals, frustrations, motivations, and attitudes.
Key insights from the interviews included:
Key insights from the interviews included:
• Property professionals relied on Shutterstock and Adobe Stock for general and community images but faced challenges in finding assets for specific purposes.
• Some professionals resorted to utilizing in-house resources to create the assets they required.
• A common frustration emerged from the necessity to navigate multiple avenues for acquiring media, leading to a desire to streamline and spend less time on the process.
• A common frustration emerged from the necessity to navigate multiple avenues for acquiring media, leading to a desire to streamline and spend less time on the process.
• The consensus among professionals was the need for a centralized platform to manage all their assets efficiently and facilitate easy sharing of media.
From the interviews, I compiled and constructed personas. This process involved distilling the collected information and insights from the interviews into fictional but representative characters that embody the key traits, behaviors, and needs identified during the interview process. These personas served as archetypal representations of the target audience, providing a valuable reference for design decisions and ensuring a user-centered approach in the development of PropertyPhotos.
The Solution - Manage, Protect, Create, and Explore
The resolution involved developing a customer-facing Digital Asset Management (DAM) platform, enabling property professionals to purchase, create, and oversee media on a property-by-property basis. The platform also included a health check feature to assess the quality and licensing of their images.
The resolution involved developing a customer-facing Digital Asset Management (DAM) platform, enabling property professionals to purchase, create, and oversee media on a property-by-property basis. The platform also included a health check feature to assess the quality and licensing of their images.
Brainstorming Solutions
Exploring different design concepts
Exploring different design concepts
Upon understanding the users' priorities, we recognized that the primary offerings, in order of significance, were manage, protect, create, and explore. We adopted this terminology to ensure users comprehended the site's core functionalities.
Site Maps
Below are the initial site maps provided by the product team. These underwent substantial changes during the site's development.
Below are the initial site maps provided by the product team. These underwent substantial changes during the site's development.
Unauthenticated
Authenticated with profile included
Navigation
The navigation went through several iterations below are the third iteration and final versions.
Sketches and Whiteboarding
Early Homepage Wireframes
Below are early homepage wires. The image on the right is what the site looked like before the redesign.
Below are early homepage wires. The image on the right is what the site looked like before the redesign.
manage Wireframes
These are the wireframes and sketches for the management section of the site, allowing users to access their assets, create collections, modify subscriptions by property, upload custom content, and establish artboards—collections of media that users can create, share, and add to the cart.
On the left is an initial sketch featuring a left-side navigation, which was later discarded to provide more space for images. The chosen design includes top-level filtering and tabbing, aligning with the format of other media sites.
On the right is the final wireframe, featuring tabs for property view, a media view displaying all media, and an art boards tab. The design adopts a dashboard approach, offering an overview of all properties, with the option to click and access detailed pages for each property. This detailed view includes images specific to that property, along with a glance at the media count for each property and the quantity of each media type.
protect (Healthcheck) Wireframes
This is the safeguard section of the site, where users can access health checks either by property or for all their media. On the left is the beta version, which underwent significant changes and refinements.
This is the safeguard section of the site, where users can access health checks either by property or for all their media. On the left is the beta version, which underwent significant changes and refinements.
The initial design featured tabs for viewing reports by property or media, ensuring users could assess a specific property or get an overview of all their media. I maintained a consistent layout with the manage media section to ensure coherence across pages.
On the right is the final wireframe. Changes involved cleaning up the top portion of the page, refining icons for better clarity, and transitioning their color to grey. A central graph section was introduced to display the percentage of flagged digital assets. Additionally, a revamped breakdown section in a card format was positioned at the top right.
early create Wireframes
This section of the site focuses on the creation of custom media orders. On the left is an initial wireframe that initially featured top tabs for categories. However, I later opted for a cleaner layout, removing the tabs and adopting an accordion-style setup for categories. This change became necessary as we introduced additional content types, making the original tab structure less scalable. The final version reflects this evolution, showcasing a more streamlined design.
On the right is an early concept depicting the flow. In this iteration, tabs were still positioned at the top, with the categories on the left arranged in an accordion setup. Clicking the call-to-action would reveal order options. Once users added their selections to the cart, they could initiate the checkout process. These early concepts provide a glimpse into the developmental stages of this particular section of the site.
explore Wireframes
This represents the explore section of the site, enabling users to search for and purchase existing media not yet in their possession but available through RealPage. The layout maintains consistency with other flows.
On the left is the wireframe for the Property view, allowing users to peruse media by property, view properties on a map, and click on a property for a detailed view.
On the right is the wireframe for the Search by Media tab, facilitating users in searching all available media through filtering and keywords.
This layout remained consistent from the beta phase to the site's launch.
High Fidelity Design
Homepage
Initially, the site was primarily oriented towards content search and purchase, resembling a Shutterstock for property management companies. However, we later pivoted towards emphasizing the management aspect, transforming it into more of a digital asset manager. The site retained the option to buy existing media or create custom media. I went through several iterations, beginning with a homepage featuring a top search bar, which was later removed in subsequent versions.
Initially, the site was primarily oriented towards content search and purchase, resembling a Shutterstock for property management companies. However, we later pivoted towards emphasizing the management aspect, transforming it into more of a digital asset manager. The site retained the option to buy existing media or create custom media. I went through several iterations, beginning with a homepage featuring a top search bar, which was later removed in subsequent versions.
Homepage iterations: Left image, search and purchase focus. Right image, asset manager focus
Final homepage design
Manage
The manage dashboard with the "My Properties" tab selected
The manage dashboard with the "My Artboards" tab selected
Protect
Create
HealthCheck
Create new content
Explore
Search by media
Search by property
Mobile
Launch and Testing
Following the beta launch, we initiated testing with property marketing managers and content creators participating both onsite and online. Our objective was to gain insights into user interactions with prototypes featuring diverse filter options across various content layouts. Leveraging unmoderated online testing via UserZoom, we aimed to comprehend user preferences concerning filters in different workflows.
The received feedback proved invaluable, particularly in refining the manage media, search, and checkout flows. Notably, the manage media feature emerged as the most popular, prompting a strategic shift from emphasizing media sales to focusing on the management aspect. Consequently, we removed the search bar from the masthead. Additionally, in response to feedback from content creators handling large uploads, I began developing a more robust upload process to enhance user experience.
Users expressed their admiration for the site, frequently highlighting its easy navigation and clean design. Post-beta testing, we honed in on enhancing the create content feature, incorporating additional elements such as profiles and dashboards. After numerous iterations, we successfully launched the site.
The Future of PropertyPhotos and Project Outcome
Many features, including the implementation of content creation through a step-by-step ordering process, had not been released or fully conceptualized and designed. PropertyPhotos was in a constant state of evolution during my involvement in the project.
Before my departure, PropertyPhotos experienced a successful launch and garnered hundreds of property management companies as clients.
Learn how Campus Advantage relies on PropertyPhotos to elevate its brand in the video below or use the links below for more info on PropertyPhotos.
https://www.realpage.com/digital-content-services/
https://propertyphotos.com/
https://www.realpage.com/digital-content-services/
https://propertyphotos.com/
