Challenge Summary
Welcome to the "REX Responsive Website Concept Design Challenge Part 1"! The scope of this challenge is to design 2 responsive websites for helping persons who wish to sell properties to quickly and efficiently price the market. The focus of this project is mainly the REX website (the majority of the pages), with POD website being secondary.
Note: this is part 1 of 2 of this project. There will be a following challenge for the rest of the application.
Please read the challenge specifications carefully and let us know if you have any questions in the forums.
CHALLENGE OBJECTIVES
1. Landing Page (REX)
3. Sign Up (REX)
4. Account Management (REX)
5. Dashboard (REX)
6. New Property Evaluation Request (REX)
10. View Property (POD)
1. Landing Page (REX)
2. Login (REX)
3. Sign Up (REX)
4. Account Management (REX)
5. Dashboard (REX)
6. New Property Evaluation Request (REX)
7. View Property (REX)
8. Edit Property (REX)
9. Delete Property (REX)
10. View Property (POD)
11. Contact Details (POD)
12. Evaluation Results (REX)
APPLICATION OVERVIEW
The role of the REX website is to allow persons who want to sell unlisted properties to get an estimation of the property value on the market before putting it out there for sale. This is important because if a property is overpriced it would have few buyers, while if it’s underpriced, then the gain would be smaller.
With the help of the REX website, the user would come to a landing page and create an account, then from his dashboard, he would have the option to add a new property that he wishes to evaluate for the purpose of selling. The site offers different plans (Basic and Premium) that the user can choose from with different price points.
Once a property is published for evaluation, the individual pages on the POD site are created, that will be shown to potential leads. The data is collected for a couple of days and then sent back to the REX website to find out the sweet spot.
AUDIENCE
Role 1: Seller: Our target users are people who wish to sell their properties, basically home owners, but also real estate agents who wish to sell several properties from their portfolio.
Role 2: Admin: In addition to the seller role, we also have the admin, which is basically a superuser and has access to additional features than the regular user.
For this challenge we are going to focus on the seller role only.
PERSONA
GLOSSARY
Price points = they refer to a point on a scale of possible price points. Different price points can lead to different profits. You can read more about it and the demand curve here.
Leads = a lead is someone who shows interest in that particular property, which makes him a potential buyer
Unlisted = unlisted property are those properties that are not yet uploaded on any websites advertised by real estate agencies
POD, REX = both are codenames for the customer’s sites
USER WORKFLOW
The user workflow representation is described step by step in this Miro board.
Ashley is looking to sell her unlisted house to move to a new place. She would like to get an estimation of how much is worth it. While browsing online she gets to the REX website where she reads about this company and how it provides accurate price recommendations.
Ashley creates an account on the REX website and from there she is taken to her dashboard. She has the option to add a new property for evaluation and also one to manage her account. She goes to add a new property and there she fills all her details about her house such as surface, number of bedrooms, bathrooms, any payments for it and contact details. Next she can choose from the Basic Plan (3 price points - $20/year) or Premium Plan (10 price points - $60/year) and she goes with the Basic one. After this she enters her card details and the payment is processed. At the end, she will see a preview of her page before being evaluated.
Behind the scenes, the Common Intelligent Data Platform will get a base value for the property from external sources and considering the number of price points chosen by Ashley, it will generate the value of the 3 price points.
Then the Common Intelligent Data Platform will publish this page on the POD website. This site looks totally different from REX and Ashley can check how her property looks here. In addition to the data she inputted, this page will also contain a few other details about her house. The POD website will basically hold 3 different versions of the same property with the 3 price points values. The pages will be up for a few days and the system will collect data about the potential leads such as engagement, session duration, location, etc. Based on these the revenue/score is calculated to see which of the 3 price points is the best. This data is then reported back to Ashley on the REX website.
SCREENS / FEATURES REQUIRED
We have a rough wireframe for this challenge that you can see here, however DO NOT copy the wireframe. We use it just to show you the content in big lines, but the design is entirely up to your creativity.
For the logos, feel free to create simple, placeholder logos.
1.Landing Page (REX)
Reference: link.
This page should be an engaging place where the users would learn about the features of REX application and how they can use it. It should contain the following sections:
It’s very important that this page is attractive to the sellers and insurance agents.
A couple of pages the customers likes are:
The simplicity and use of color with Apple is also great:
The sites above have some features that our customer considers them very good and would like to have them on this page:
2.Login (REX)
Reference: link.
The login page should contain the usual fields as per wireframes:
3. Sign Up (REX)
Reference: link
The sign up pages should contain the usual fields as per wireframes, with the only difference being that we would like to have an option for the user to select if he is a private person or real estate agent when signing up:
4.Account Management (REX)
Reference: link
On this screen the user can edit his profile settings such as
5. Dashboard (REX)
Reference: link
This is the place that would contain all the information related to a user’s account. It can have different things such as:
Note:
Have to design for this page:
6. New Property Evaluation Request (REX)
Reference: link
When the user adds a new property for being evaluated, he has to complete a few steps:
1. Add Property Details
2. Choose Plan
3. Payment
In the first step (Add Property Details), the user will be able to :
Once all data is added the user will be able to see the estimation of the property on REX website as well on other competitor websites.
In the second step (Choose Plan), the user will have to choose one of the plans - Basic or Premium, each of them having different price points, costs and features.
For the third step, the user will add his credit card details to take care of the payment.
7. View Property (REX)
Reference: link
This page is basically showing all the information the user added at the previous point. At a high level, we will also have an option to see the evaluation status. This can be shown in different ways (with tabs) or other methods. We’re looking forward to your creative ideas for displaying this data.
8. Edit Property (REX)
Reference: link
This page will show the similar data when adding a new property just that it would have all the fields filled in with related content.
9. Delete Property (REX)
This page would show how the user can delete his property. Can include a modal box with confirmation about deleting or something similar.
10. View Property (POD)
Reference: link
Once a page is published for evaluation it’s going to be created on the POD website.
Important: The look and feel of this website should be entirely different than for the REX website. Think about a different layout, style, colors, etc.
As there are 3 different price points, the same page will be displayed with different prices (we only need one page design). Note that there won’t be a homepage for this like POD.com for the visitor to go as the focus is only on these individual pages which will be optimized for searching by the different engines.
The content of this page will be similar to the one on the REX site, just that it will have a few more sections that are pulled automatically with the help of the APIs from different websites. Think about organizing the information in such a way that the user can easily get the main points.
The following sections should be included:
11. Contact Details (POD)
Reference: link
When the user is interested in a particular property, he will look to contact the agent for more details (note: there should be no direct way to contact the owner).
The following details should be display for getting in contact:
12. Evaluation Results (REX)
Reference: link and link
When the evaluation of a property is in progress, the user will see a progress bar notifying how much of the process was completed and how much time it’s left until the evaluation is done
.
When the evaluation of a property is completed, the user will see the best price point that is recommended and she will have an option to download more details in an XLS format. In case he wishes to get a more accurate estimation, she can upgrade the plan to Premium and then the process will repeat.
BRANDING GUIDELINES
REX Website:
The sites above have some features that we consider them great and would like to have them on this site, especially on the landing page as that’s more marketing focused:
POD Website:
The colors for this site are open to you
JUDGEMENT CRITERIA
DEVICE SPECIFICATIONS
STOCK ARTWORK
MARVEL PROTOTYPE
FINAL DELIVERABLES
Note: this is part 1 of 2 of this project. There will be a following challenge for the rest of the application.
Please read the challenge specifications carefully and let us know if you have any questions in the forums.
CHALLENGE OBJECTIVES
- UI Design for a responsive desktop application.
- Create approximately 12 unique screens for 2 sites
- Provide a seamless flow for the user to get a property uploaded and evaluated
- Important: wireframes are provided for the user flow, but they should be used only for the content, so feel to build on it and improve the user experience
Round 1
Submit your initial designs for checkpoint review. Feel free to add any screens which are necessary to explain your concept.1. Landing Page (REX)
3. Sign Up (REX)
4. Account Management (REX)
5. Dashboard (REX)
6. New Property Evaluation Request (REX)
10. View Property (POD)
Round 2
Submit your final designs plus checkpoint feedback implemented. Feel free to add any screens which are necessary to explain your concept. You have to submit in round 1 in order to be eligible to submit in round 2.1. Landing Page (REX)
2. Login (REX)
3. Sign Up (REX)
4. Account Management (REX)
5. Dashboard (REX)
6. New Property Evaluation Request (REX)
7. View Property (REX)
8. Edit Property (REX)
9. Delete Property (REX)
10. View Property (POD)
11. Contact Details (POD)
12. Evaluation Results (REX)
APPLICATION OVERVIEW
The role of the REX website is to allow persons who want to sell unlisted properties to get an estimation of the property value on the market before putting it out there for sale. This is important because if a property is overpriced it would have few buyers, while if it’s underpriced, then the gain would be smaller.
With the help of the REX website, the user would come to a landing page and create an account, then from his dashboard, he would have the option to add a new property that he wishes to evaluate for the purpose of selling. The site offers different plans (Basic and Premium) that the user can choose from with different price points.
Once a property is published for evaluation, the individual pages on the POD site are created, that will be shown to potential leads. The data is collected for a couple of days and then sent back to the REX website to find out the sweet spot.
AUDIENCE
Role 1: Seller: Our target users are people who wish to sell their properties, basically home owners, but also real estate agents who wish to sell several properties from their portfolio.
Role 2: Admin: In addition to the seller role, we also have the admin, which is basically a superuser and has access to additional features than the regular user.
For this challenge we are going to focus on the seller role only.
PERSONA
- Name: Ashley
- Occupation: Engineer
- Goals:
- Sell the house she owns
- Ability to get an accurate estimation of the house value on the market
- Have the flexibility to test with a larger or smaller number of price points in a short time
- Frustrations:
- Currently is hard to estimate the house value on the market without spending a lot of time for research
- Wants:
- A single, easy to use site where she can add her property and get a good, accurate estimation in a short time
GLOSSARY
Price points = they refer to a point on a scale of possible price points. Different price points can lead to different profits. You can read more about it and the demand curve here.
Leads = a lead is someone who shows interest in that particular property, which makes him a potential buyer
Unlisted = unlisted property are those properties that are not yet uploaded on any websites advertised by real estate agencies
POD, REX = both are codenames for the customer’s sites
USER WORKFLOW
The user workflow representation is described step by step in this Miro board.
Ashley is looking to sell her unlisted house to move to a new place. She would like to get an estimation of how much is worth it. While browsing online she gets to the REX website where she reads about this company and how it provides accurate price recommendations.
Ashley creates an account on the REX website and from there she is taken to her dashboard. She has the option to add a new property for evaluation and also one to manage her account. She goes to add a new property and there she fills all her details about her house such as surface, number of bedrooms, bathrooms, any payments for it and contact details. Next she can choose from the Basic Plan (3 price points - $20/year) or Premium Plan (10 price points - $60/year) and she goes with the Basic one. After this she enters her card details and the payment is processed. At the end, she will see a preview of her page before being evaluated.
Behind the scenes, the Common Intelligent Data Platform will get a base value for the property from external sources and considering the number of price points chosen by Ashley, it will generate the value of the 3 price points.
Then the Common Intelligent Data Platform will publish this page on the POD website. This site looks totally different from REX and Ashley can check how her property looks here. In addition to the data she inputted, this page will also contain a few other details about her house. The POD website will basically hold 3 different versions of the same property with the 3 price points values. The pages will be up for a few days and the system will collect data about the potential leads such as engagement, session duration, location, etc. Based on these the revenue/score is calculated to see which of the 3 price points is the best. This data is then reported back to Ashley on the REX website.
SCREENS / FEATURES REQUIRED
We have a rough wireframe for this challenge that you can see here, however DO NOT copy the wireframe. We use it just to show you the content in big lines, but the design is entirely up to your creativity.
For the logos, feel free to create simple, placeholder logos.
1.Landing Page (REX)
Reference: link.
This page should be an engaging place where the users would learn about the features of REX application and how they can use it. It should contain the following sections:
- Attractive banner at top
- Features
- Why use REX
- Testimonials
- Call to action
- Anything else you might think it brings value
It’s very important that this page is attractive to the sellers and insurance agents.
A couple of pages the customers likes are:
- https://wisr.com.au (favorite)
- https://www.chiaraluzzana.com
- https://stonestyle.co.th
- https://www.weareimpero.com
- https://le-qb.com
The simplicity and use of color with Apple is also great:
The sites above have some features that our customer considers them very good and would like to have them on this page:
- Interactive cursors
- Prominent foreground elements
- Animation
- Side navigation
- Pop of colors to draw user’s attention
2.Login (REX)
Reference: link.
The login page should contain the usual fields as per wireframes:
- Password
- Option to remember password
- Option to recover password if it was forgotten
3. Sign Up (REX)
Reference: link
The sign up pages should contain the usual fields as per wireframes, with the only difference being that we would like to have an option for the user to select if he is a private person or real estate agent when signing up:
- First and last name
- Password
- Customer type (Canary=one person and Real Estate Agent). If a person is a real estate agent, he will have to enter his license number to be verified by the system
4.Account Management (REX)
Reference: link
On this screen the user can edit his profile settings such as
- Personal info (first name, last name,a address, phone number, user type)
- Account settings (email, password)
- Notifications settings and frequency
5. Dashboard (REX)
Reference: link
This is the place that would contain all the information related to a user’s account. It can have different things such as:
- Stats with the activity of his properties
- A list view of the properties and their status
- Graphs to show the evolution in time of his properties and the activities
- Anything else? Feel free to add anything valuable
Note:
- Would like to see how this dashboard is looking when the user just created an account and has no property added, as well as when there is plenty of data in (like for an active real estate agent.)
- The case above is addressing mostly an insurance agent role, where there are many properties - think how the dashboard will look when a person will only have 1 property to show. What content should it be here so that the page still looks nice?
Have to design for this page:
- Dashboard empty state
- Canary/One person dashboard
- Real estate agent dashboard
6. New Property Evaluation Request (REX)
Reference: link
When the user adds a new property for being evaluated, he has to complete a few steps:
1. Add Property Details
2. Choose Plan
3. Payment
In the first step (Add Property Details), the user will be able to :
- Add a name for the property
- Upload photos and floor plans
- Add house facts
- Add notes about recent improvements/ renovations
- Share contact data
- Anything else you see as valuable
Once all data is added the user will be able to see the estimation of the property on REX website as well on other competitor websites.
In the second step (Choose Plan), the user will have to choose one of the plans - Basic or Premium, each of them having different price points, costs and features.
For the third step, the user will add his credit card details to take care of the payment.
7. View Property (REX)
Reference: link
This page is basically showing all the information the user added at the previous point. At a high level, we will also have an option to see the evaluation status. This can be shown in different ways (with tabs) or other methods. We’re looking forward to your creative ideas for displaying this data.
8. Edit Property (REX)
Reference: link
This page will show the similar data when adding a new property just that it would have all the fields filled in with related content.
9. Delete Property (REX)
This page would show how the user can delete his property. Can include a modal box with confirmation about deleting or something similar.
10. View Property (POD)
Reference: link
Once a page is published for evaluation it’s going to be created on the POD website.
Important: The look and feel of this website should be entirely different than for the REX website. Think about a different layout, style, colors, etc.
As there are 3 different price points, the same page will be displayed with different prices (we only need one page design). Note that there won’t be a homepage for this like POD.com for the visitor to go as the focus is only on these individual pages which will be optimized for searching by the different engines.
The content of this page will be similar to the one on the REX site, just that it will have a few more sections that are pulled automatically with the help of the APIs from different websites. Think about organizing the information in such a way that the user can easily get the main points.
The following sections should be included:
- Property name
- Photos and floor plans
- Option to contact an agent for more details
- An overview description
- Recent improvements
- Monthly payments
- Schools
- Property price evolution
- Anything else you think might be valuable
11. Contact Details (POD)
Reference: link
When the user is interested in a particular property, he will look to contact the agent for more details (note: there should be no direct way to contact the owner).
The following details should be display for getting in contact:
- First name and last name
- Phone number
12. Evaluation Results (REX)
Reference: link and link
When the evaluation of a property is in progress, the user will see a progress bar notifying how much of the process was completed and how much time it’s left until the evaluation is done
.
When the evaluation of a property is completed, the user will see the best price point that is recommended and she will have an option to download more details in an XLS format. In case he wishes to get a more accurate estimation, she can upgrade the plan to Premium and then the process will repeat.
BRANDING GUIDELINES
REX Website:
- The primary color of the site should be yellow.
- Fonts are open to designers
- As style, would like to follow some of the modern and bold sites style like:
- https://wisr.com.au (favorite)
- https://www.chiaraluzzana.com
- https://stonestyle.co.th
- https://www.weareimpero.com
- https://le-qb.com
- https://www.apple.com (like the simplicity and color use)
The sites above have some features that we consider them great and would like to have them on this site, especially on the landing page as that’s more marketing focused:
- Interactive cursors
- Prominent foreground elements
- Animation
- Side navigation
- Pop of colors to draw user’s attention
POD Website:
The colors for this site are open to you
- Style should be bold and creative, but focus on the UX for people looking at real estate properties
JUDGEMENT CRITERIA
- Creativity: Impactful: the solution is different or unique from what is already out there and can be implemented.
- Exploration: Flexible: follow the provided screen requirements section and propose improvements or different paths that positively impact the user goals.
- Aesthetics: Hi-fidelity design: provide a top-notch finished looking visual design.
- Branding: Open: propose a fresh new branding option.
DEVICE SPECIFICATIONS
- Responsive desktop application in laptop size
- Size: 1366 x 768 (width x height). Height can be extended as needed.
STOCK ARTWORK
- Photos, Icons and Fonts should be used as allowed by Topcoder policy
MARVEL PROTOTYPE
- Upload your screens to the Marvel App.
- Please check forums for more details on how to get a prototype
- Include your Marvel app URL as a text file in your final submission. Label it “MarvelApp URL”.
FINAL DELIVERABLES
- An archive called Source.zip file to include:
- All original source files created with a wireframe tool such as: Adobe XD, Figma, Sketch or Photoshop.
- An archive called Submission.zip file to include:
- All your submission files should be in PNG / JPG format
- Your declaration files to include any notes about fonts usage, photo and icon declaration and link to your Marvel project
- Create a JPG preview file of 1024 x 1024 px
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.