Who we are

About Elements Property

Elements is the quickest place for property and real estate professionals to outsource their marketing. We edit photos, convert sketches into floorplans and create video slideshows – all from client files uploaded via our easy-to-use portal. The Elements mission is to empower people with the tools, expertise and help needed to sell and let property better, faster and with more wow factor. As of 2022, we processed 125,000+ orders for 900+ clients across the globe.

About the team

We’re a small but mighty bunch! The Web_dev consists of 2 members. You’ll be a vital part of the team helping to improve the UX & UI of our web and mobile app.

About our web app

Our web app is a custom PHP website that is a client portal for our B2B clients for sharing files and saving their preferences and settings etc, it also integrates with Stripe, GoCardless and Xero via their APIs.

We began building the web app in 2015 with Alex (our founder) designing the mockups in Adobe Illustrator and Dmitry (our developer) bringing it to life with code.

In 2021 we attempted to recreate the web app in Figma (but it wasn’t done well i.e. best practices were attempted but not followed well with Components, Auto-layout and Varients – some parts are built correctly but on the whole, most things are not.

Front end (web app)

We require the recreation in Figma and welcome your ideas for improvement. The front-end of our web app consists 7 distinct sections, each section could be made up of different pages or screens, sometimes with very similar layouts, just different text.

• Login
  • Welcome back!
  • Forgot password
  • Set your new password
  • Check your email

• Register
  • Create account
  • What services are you interested in?
  • What are your details?
  • And finally

• Upload
  • Image Enhancement
  • Floorplan Conversion
  • Video Slideshow

• Amendment
  • Amendment request

• My orders
  • In progress
  • Completed
  • History
  • Quotes

• My account
  • My details
  • Service settings
  • Notifications
  • Logo & other files
  • Payment method
  • Invoices
  • My clients
  • Subclient settings

• Other
  • Please set up a payment method
  • Please set up a Direct Debit
  • Overdue invoice
  • Session timed out
  • Checkout
  • Success! (for when an order is placed)
  • Leave feedback

Back end (web app)

The back-end consists of approx 12 separate ‘modules’, each containing different tables, databases and other components. For the back end, the recreation in Figma is the main thing, we are not looking for ideas for improvement quite so much, it’s been stated where we are.

• Dashboard
  • This is a work in progress – open to ideas

• Orders
  • New
  • Amendments
  • Unpaid
  • Completed
  • Quotes

• Users
  • Clients
  • Subclients
  • Lapsed
  • Lost
  • Quotes

• User view
  • Overview
  • AM
  • Orders
  • Settings
  • Billing – Settings
  • Billing – Invoices

• Subclient (similar to User view but more basic)
  • Overview
  • Settings
  • Files

• AM (Account Management)
  • Onboarding
  • Set up
  • 25th order
  • Feedback
  • Reviews

• Networks
  • Overview
  • Assign

• Billing
  • INV-CSV
  • Xero check
  • Statements
  • Payment method
  • Supplier check
  • Exchange rates

• Tools
  • Order
  • User
  • Billing
  • Adv. search
  • Multi-currency

• Reporting (open to ideas on improving these)
  • Orders
  • Revenue
  • Users
  • Team
  • EOM
  • Yearly
  • HLO
  • Filtered
  • HLO
  • Filtered

• Archive
  • Expired orders
  • Archived users
  • Banned/blocked users
  • Blacklisted users

• System
  • Logs
  • System
  • Broadcast
  • Rules
  • Emails
  • Styles
  • Errors
  • Cron
  • Update

• Super Admin
  • User roles
  • Permissions
  • Pricing
  • Colours

About our mobile app

Our iOS mobile app is brand new and only available as a prototype (mainly because Alex is not happy with the UI/UX for public use). We have not yet created the mobile designs in Figma. This will form Phase 3 of this project (see below).

Our mobile app replicates the existing web app in a responsive way so the web app and mobile app designs are linked. We would prefer to keep it this way rather than develop a separate stand-alone mobile app but can discuss this as the project progresses.

The front-end mobile app consists of the following pages/screens:

• Login
  • Welcome back!
  • Forgot password
  • Set your new password
  • Check your email

• Register
  • Create account
  • What services are you interested in?
  • What are your details?
  • And finally

• Upload
  • Image Enhancement
  • Floorplan Conversion
  • Video Slideshow

• My orders
  • In progress
  • Completed
  • History
  • Quotes

We have a separate mobile app for the back-end of our system (for now we’ll exclude this from the project but could look at this in the future).

 

What’s required

Before we dive in, know that we have an existing design system for you to work from with typefaces, fonts, colours, icons etc which you should use. On the whole, these will not change (but once everything is built correctly in Figma, the option to quickly and easily change these things is there should we need it).

Also, know that we can set you up as a user of our client portal (web app) so you can have a play around, and see all the pages and current UI/UX. There are some parts of the live web app that are more recent than the Figma designs so bare in mind that some areas of Figma will need updating to match what is live – an estimate would be that 90-95% of the Figma designs match what is live in the web app.

Phase 1

Copy the existing Figma file of our web app and recreate everything from scratch but this time in the correct way with perfect use of Components, Auto-layout, Varients and other Figma best practices – this will be crucial when it comes to adding new features to our system in the future. We also want proper use of Prototyping. This includes front-end and back-end pages. You will work within our Figma workspace (we will get a seat for you).

Phase 2

Once phase 1 is complete, make another copy of the Figma file but this time use your UI & UX skills to improve the designs of the web app in any way you see fit, we want you to put your stamp on the designs. Here, we can make changes to components and because they’ll now be made correctly, will update correctly everywhere in Figma.

Phase 3

By now, the Components and Varients etc will be finalised and can be used for the design of the mobile app. In this phase, you will design a mobile version of our app in Figma from scratch. You can reference our existing iOS app prototype but you should seek to improve the UX/UI. As with the web app, we require perfect use of Components, Auto-layout, Varients, Prototyping and other Figma best practices.

Phase 4

If required, advise our existing web developer to help us get the improved designs live on our web app and iOS mobile app.

 

About you

• Deep understanding of Figma including; Components, Auto-layout, Varients and Prototyping etc
• Experienced designing for web, iOS and Android
• Exceptional attention to detail
• Highly organised and comfortable working on your own initiative
• A positive, proactive mindset with a ‘can do’ attitude