Room Snap — An App For Real Estate Photo Editing

Room Snap is an application to provide real estate with a fast, clean & secure way to enhance property photos and create a listing for potential buyers and sellers. The flow of the product is simple yet functional — try it yourself!

introduction

Product Concept

The main advantage of this project is the simplicity of its concept. The user simply takes a photo in the application, selects the photos that he wants to edit, and enters his email to receive his completed order. After that, he pays for the service and the app automatically uploads the photos to Google Drive. The application may offer additional editing services for an additional cost. After that, the client will receive the photos back by email.

The target audience of this application is realtors who would like to take better photos and save time and money.

process

Goals & Objectives

Our team had to create a solution that would meet both business and user needs in the market, where user problem used to solve in different way for many years

Photo Creation

The app’s camera should have 2 modes: standard and wide-angle. After the photo is taken, the user save it or retake it., so that the project’s gallery is not overwhelmed with unnecessary photos

Service Purchase

After selecting the photos, the app should offer the user editing options. 2 free options — to add green grass and blue sky, and 3 paid options — add virtual dusk, add virtual staging and remove objects.

Photos Upload

The camera take 3 photos — with original exposure, lower exposure and higher exposure, which will be uploaded to the G Suite and will be used in futher editing. The user should see only original version of the photo.

Receiving an Order

After payment, the user will be able to monitor the status of the order through the application. After completing the order, he will see a notification and the edited photos will be sent to the customer by mail

user experience

User Epics & User Stories

During the design stage our team have also created user epics and user stories

  • U1 — As a User, I want to authenticate in the application.
  • U2 — As a User, I want to manage projects.
  • U3 — As a User, I want to take photos.
  • U4 — As a User, I want to pay for photo editing.
  • U5 — As a User, I want to get customer support.
  • U6 — As a User, I want to get push notifications.
  • A1 — As an Admin, I want to analyze the application data.
  • A2 — As an Admin, I want to receive notifications about new orders.
  • A3 — As an Admin, I want to manage users in the application.
  • A4 — As an Admin, I want to view table of orders.
  • A5 — As an Admin, I want to manage promo codes.
  • A6 — As an Admin, I want to manage prices in the app.
  • U1.01 — As a User, I want to view onboarding screens when I enter the app the first time.
  • U1.02 — As a User, I want to sign up to the application via Google.
  • U1.03 — As a User, I want to sign in to the application via Google.
  • U1.04 — As a User, I want to sign up to the application via email.
  • U1.05 — As a User, I want to sign in to the application via email.
  • U1.06 — As a User, I want to verify my email with a one-time-password.
  • U1.07 — As a User, I want to get a one-time-password via email.
  • U1.08 — As a User, I want to restore my password.
  • U1.09 — As a User, I want to enter my first & last name and location.
  • U2.01 — As a User, I want to create new project.
  • U2.02 — As a User, I want to enter a name of new project.
  • U2.03 — As a User, I want to rename project folders.
  • U2.04 — As a User, I want to delete project folders.
  • U2.05 — As a User, I want to view the content of project folders.
  • U2.06 — As a User, I want to add photos to project’s folder.
  • U2.07 — As a User, I want to delete photos inside the project.
user interface

Style Guide

primary colors

Color Palette

# 2C3351

Slate Blue

# EE8F84

Dark Salmon

# A6A6A6

Dark Gray

# FAFAFA

Snow

primary typeface

ITC Galliard Black

Serif typeface designed by Matthew Carter and issued in 1978 by the Mergenthaler Linotype Company

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( ) _ +

Pair typeface

Poppins Regular

Sans Serif typeface designed by Indian Type Foundry

a b c d e f g h i j k l m n o p q r s t u v w x y z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 ! @ # $ % ^ & * ( ) _ +

Style guide

Iconography

Style guide

UI-kit

We developed UI kit to simplify and integrate sophisticated approach. UI kit is our main design document, to everyone who work over the project refer to at each stage.

Inputs

Default

Email

Text

roomsnap@gmail.com

Password Hidden

Password Shown

roomsnap2020

Active

roomsnap@g

Error

roomsnap@gmail.com
Please enter valid email adress

Buttons

Normal

Log In

Tap

Log In

Disabled

Log In

Normal

Delete

Disabled

Delete

Additional

Components

Project’s Previews

Brendan’s Cottag…

May 29, 2020

Lisa’s Cottage

156 photos

List of Photos

Selected list of Photos

Order Details

29

May, 2020
Finished
35$
interaction Design

Project Creation

To create a new project the user should press the “Plus” button and enter the proproject name. After this, the user can click on the “Camera” button and the camera will automatically open in the horizontal mode

From the main screen user can access all the neccessary functions. By pressing the “Menu” button user can open a side menu with “Orders”, “Settings”, “Support”, “F.A.Q.”, “Tutorial” and “Log Out” options.

interaction Design

Purchase Editing

On the project page, user can view photos and by using a double tap on one photo preview it on the full screen. If users tap a photo once, the photo will be selected. The user can select multiple photos, or a “Select All” option that will pop up at the bottom. In that case user can either “Delete” all the selected photos or “Purchase” their editing.

interaction Design

Camera View

visual design

Mobile App Design

Our team aimed to create a product’s aesthetic appeal and usability with suitable images, typography, space, layout and color in order to create interface that optimize user experience and drive conversion.

Application Development

Development Process

Development technlonogies
Swift PHP
Start of the app development

We kicked off the product development with a Ballpark Estimate & Software Specification creation. Software Specification consisted of low-fidelity product mockups, technical & functional overview, and business requirements. We kicked off the design development upon the completion of the specification followed by the actual development process start — team consisted of a project manager who was managing the development process through Jira, a business analyst who was working on the specification, UI/UX designer & front-end Swift iOS software engineer along with backend PHP developer.

User Experience Importance

The main thing for this product was the user experience of the service — our goal was to create an app to make it as easy as possible for customers to order services through it. We think we achieved the goal was achieved — the app has a seamless flow and it’s very natural to order the photo enhancements through the product.


User Experience in the application was taken care of by our UX designer & business analyst — they were iteratively working on the low-fidelity mockups of the application, thinking through the flow, fields & button positions — approving the flow with the client. After the completion of low-fidelity mockups, we’ve started the work on the exact UI design implementation.

Application Development

Challenges

1. Easy to buy & use flow

We were working hard through the specification, planning & design stages of the product to make sure it’s as easy as possible for the customer to order services through the app.

2. Attractive UI design & native user experiences implementation

The app is focused on the implementation of native iOS Swift SDKs & libraries — the goal was not to use 3rd party services to ensure pixel-perfect design implementation and native user experiences.

3. Working through the buyer-provider-admin flow

The flow of buyer-provider-admin is the main one on the product — our goal was to ensure it’s stable & secure, especially with the volume of the product — the ability to add multiple service providers & admins was crucial for us when planning & developing the product.

APPLICATON DEVELOPMENT

Photos Archivation

Photos Archivation was a challenge on the product — we need to form the archive locally on the device in order to send it to the backend fast & in the background not to spoil the user experience of the product. That’s why we were using streaming libraries for background upload of media to the backend & archiving photos to make sure they would be of the highest quality once they appear in the editor’s hands.

visual design

Admin Panel Design

Ways to Engage with us

Fill the form below or email us at info@interexy.com or give us a call at (239) 719 2347 (8:00 am to 5:00 pm pacific time)

Pick a date and time for a meeting