Challenge Summary
Welcome to the REX Responsive Website Design Challenge Part 2! The scope of this challenge is to design a responsive website for helping persons who wish to value research their properties before selling to quickly and efficiently price the market. This challenge is part 2 of the project, we have already created the concept screens for the website in part 1 challenge. The focus of this project is only on the REX website, for the admin user.
CHALLENGE OBJECTIVES
1. Manage Users (Desktop)
2. Profile Details (Desktop)
4. View Property (Desktop)
5. Evaluation Results Admin (Desktop)
7. View Plans Settings (Desktop)
8. Edit Plans Settings (Desktop)
1. Manage Users (Desktop + Mobile)
2. Profile Details (Desktop + Mobile)
3. Profile Details - Edit and Delete (Desktop + Mobile)
4. View Property (Desktop + Mobile)
5. Evaluation Results Admin (Desktop + Mobile)
6. Edit and Delete Property (Desktop + Mobile)
7. View Plans Settings (Desktop + Mobile)
8. Edit Plans Settings (Desktop + Mobile)
....................................................................................................................................
APPLICATION OVERVIEW
The role of the REX website is to allow persons who want to value research 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: Client: Our target users are people who wish to value research their properties, basically home owners, but also real estate agents who wish to value research several properties from their portfolio.
Role 2: Admin: In addition to the client 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 admin 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 (a client) is looking to value 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 which can do that for her. After she creates an account, and adds her property, she can choose one of the payment plans she wants to go with - Basic or Premium (Premium plan will offer 10 price points, which means it gives a better price estimation than the Basic plan which has 3 price points). The property details are published on the POD website and in a couple of days the results of the estimation are coming back. To get more details about this part, you can check the specifications of the previous challenge.
Tim (the REX platform admin) has access to the same functionalities Ashley has and more. When the evaluation results for a propery are coming back, he can see a detailed view of those. In addition, he has the ability to manage users (clients), properties and plans as well.
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.
Most important, your submission should follow the existing design and flow from the first challenge:
The first part of the application focused on the REX and POD websites for a client, however this challenge is focusing only on the admin role for the REX website. For this challenge we need both the desktop and mobile design.
1. Manage Users (Desktop + Mobile)
Reference: link.
In addition to existing navigation items, the user will have another option for managing users, properties and plans.
This screen shows a list of existing users (clients) and their properties.
For a user we would like to see:
For each property we should see:
Property name
Note: the wireframe has lots of white space, think about a better representation that balances the design more. Feel free to suggest more data for the users and properties in order to accommodate your layout better. We’re open to suggestions.
2. Profile Details (Desktop + Mobile)
Reference: link wireframes and link design.
The admin is able to see a user’s details and edit them or he should be able to delete the user as well from this page (not in the wireframes). It should include the following sections as per wireframes:
3. Profile Details - Edit and Delete (Desktop + Mobile)
Reference: link wireframes edit, link wireframes delete and link design.
An admin should have the option to edit all settings for a user from this page.
Note: We have already designed the edit page for the client role, and you should think about if the admin will see the same layout of the page or different.
4. View Property (Desktop + Mobile)
Reference: link design.
Similar to a client, an admin is also able to view property details. The content should be as per wireframes and design, however note that an admin can see someone’s elses properties, so we should see the client’s info as well represented (it can be just the user’s name or more data).
The following sections should be included:
This page should also include the Payment Plan selected by the user (not included in the wireframes).
5. Evaluation Results Admin (Desktop + Mobile)
Reference: link.
When the evaluation of a property is completed, the admin will see the best price point recommandation and also a detailed view of each price point's evaluations. Things that we are interested to see for a price point are:
The wireframe is showing this representation as tables with details, however we are looking to see other ways in which such details can be shown. Keep in mind we can have as few as 3 evaluations and up to 10 evaluations, so think about how that space can be used efficiently and without too much scrolling.
Also the admin can see these details both for his own property if he uploads one, but more often will be the case when he will check the details for someone else's property.
6. Edit and Delete Property (Desktop + Mobile)
Reference: link wireframes, link design edit and link design delete.
Similar to a client, an admin is also able to edit and delete property details. The content should be as per wireframes and design, however note that an admin can edit and delete someone’s elses properties, so we should see the client’s info as well.
The admin should be able to edit the payment plans as well that the client has chosen (not shown in the wireframe now).
7. View Plans Settings (Desktop + Mobile)
Refererence: not included in the wireframes
The admin is the person who is able to set the different plans for a client. Each plan would have a specific number of price points and different costs. In addition the plans would come with other features which will be confirmed later. This screen would show the view mode for those plans with the ability to edit a plan.
Things to include:
8. Edit Plans Settings (Desktop + Mobile)
Refererence: link wireframes
In this mode, the admin will be able to edit/ customize the different settings of each plan for the user.
Things to include:
ASSETS
Your submission should follow the existing design and flow from the first challenge:
BRANDING GUIDELINES
We already have definite the style for this website in the previous challenge, so your design should follow it.
JUDGEMENT CRITERIA
DEVICE SPECIFICATIONS
STOCK ARTWORK
MARVEL PROTOTYPE
FINAL DELIVERABLES
CHALLENGE OBJECTIVES
- UI Design for a responsive desktop application.
- Desktop and mobile sizes requested
- Create approximately 8 screens
- 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
- The design should follow the existing look and feel of screens from REX Challenge Part 1, that we are providing source files below
Round 1
Submit your initial designs for checkpoint review. Feel free to add any screens which are necessary to explain your concept.1. Manage Users (Desktop)
2. Profile Details (Desktop)
4. View Property (Desktop)
5. Evaluation Results Admin (Desktop)
7. View Plans Settings (Desktop)
8. Edit Plans Settings (Desktop)
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. Manage Users (Desktop + Mobile)
2. Profile Details (Desktop + Mobile)
3. Profile Details - Edit and Delete (Desktop + Mobile)
4. View Property (Desktop + Mobile)
5. Evaluation Results Admin (Desktop + Mobile)
6. Edit and Delete Property (Desktop + Mobile)
7. View Plans Settings (Desktop + Mobile)
8. Edit Plans Settings (Desktop + Mobile)
....................................................................................................................................
APPLICATION OVERVIEW
The role of the REX website is to allow persons who want to value research 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: Client: Our target users are people who wish to value research their properties, basically home owners, but also real estate agents who wish to value research several properties from their portfolio.
Role 2: Admin: In addition to the client 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 admin role only.
PERSONA
- Name: Tim
- Occupation: Administrator
- Goals:
- Have an easy way to manage users and properties on REX website
- Get detailed information about properties evaluations
- Frustrations:
- At this point, there is no place from where all the operations above can be performed
- Wants:
- A single place to do all the backend site management for users and properties
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 (a client) is looking to value 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 which can do that for her. After she creates an account, and adds her property, she can choose one of the payment plans she wants to go with - Basic or Premium (Premium plan will offer 10 price points, which means it gives a better price estimation than the Basic plan which has 3 price points). The property details are published on the POD website and in a couple of days the results of the estimation are coming back. To get more details about this part, you can check the specifications of the previous challenge.
Tim (the REX platform admin) has access to the same functionalities Ashley has and more. When the evaluation results for a propery are coming back, he can see a detailed view of those. In addition, he has the ability to manage users (clients), properties and plans as well.
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.
Most important, your submission should follow the existing design and flow from the first challenge:
- Marvel Presentation
- Preview and source files
- Note: the source file for the design is in Sketch, but you can use any tool as long as the look and feel is the same
The first part of the application focused on the REX and POD websites for a client, however this challenge is focusing only on the admin role for the REX website. For this challenge we need both the desktop and mobile design.
1. Manage Users (Desktop + Mobile)
Reference: link.
In addition to existing navigation items, the user will have another option for managing users, properties and plans.
This screen shows a list of existing users (clients) and their properties.
For a user we would like to see:
- ID
- Name
- Number of Properties
- Actions to view, edit, delete
For each property we should see:
Property name
- Location
- Leads number
- Evaluation Status
- Best Price point (if we know it)
- Options to View, Edit, Delete
Note: the wireframe has lots of white space, think about a better representation that balances the design more. Feel free to suggest more data for the users and properties in order to accommodate your layout better. We’re open to suggestions.
2. Profile Details (Desktop + Mobile)
Reference: link wireframes and link design.
The admin is able to see a user’s details and edit them or he should be able to delete the user as well from this page (not in the wireframes). It should include the following sections as per wireframes:
- Personal Info
- Account Settings
- Notification Settings
3. Profile Details - Edit and Delete (Desktop + Mobile)
Reference: link wireframes edit, link wireframes delete and link design.
An admin should have the option to edit all settings for a user from this page.
- Personal Info
- Account Settings
- Notification Settings
- Ability to edit and delete the properties a user has (not included in the wireframes)
Note: We have already designed the edit page for the client role, and you should think about if the admin will see the same layout of the page or different.
4. View Property (Desktop + Mobile)
Reference: link design.
Similar to a client, an admin is also able to view property details. The content should be as per wireframes and design, however note that an admin can see someone’s elses properties, so we should see the client’s info as well represented (it can be just the user’s name or more data).
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
This page should also include the Payment Plan selected by the user (not included in the wireframes).
5. Evaluation Results Admin (Desktop + Mobile)
Reference: link.
When the evaluation of a property is completed, the admin will see the best price point recommandation and also a detailed view of each price point's evaluations. Things that we are interested to see for a price point are:
- Lead
- Visits Number
- Engagement
- Location
- Session Duration
- Repeat Visit
- Requested Info
- Anything else you think might be useful, open to ideas
The wireframe is showing this representation as tables with details, however we are looking to see other ways in which such details can be shown. Keep in mind we can have as few as 3 evaluations and up to 10 evaluations, so think about how that space can be used efficiently and without too much scrolling.
Also the admin can see these details both for his own property if he uploads one, but more often will be the case when he will check the details for someone else's property.
6. Edit and Delete Property (Desktop + Mobile)
Reference: link wireframes, link design edit and link design delete.
Similar to a client, an admin is also able to edit and delete property details. The content should be as per wireframes and design, however note that an admin can edit and delete someone’s elses properties, so we should see the client’s info as well.
The admin should be able to edit the payment plans as well that the client has chosen (not shown in the wireframe now).
7. View Plans Settings (Desktop + Mobile)
Refererence: not included in the wireframes
The admin is the person who is able to set the different plans for a client. Each plan would have a specific number of price points and different costs. In addition the plans would come with other features which will be confirmed later. This screen would show the view mode for those plans with the ability to edit a plan.
Things to include:
- Cost
- Number of price points
- Feature 1
- Feature 2
- Feature 3
- Feature 4
- Feature 5
8. Edit Plans Settings (Desktop + Mobile)
Refererence: link wireframes
In this mode, the admin will be able to edit/ customize the different settings of each plan for the user.
Things to include:
- Cost
- Number of price points
- Feature 1
- Feature 2
- Feature 3
- Feature 4
- Feature 5
ASSETS
Your submission should follow the existing design and flow from the first challenge:
- Miro Board
- Wireframes
- Marvel Presentation Previous Design
- Preview and source file Previous Design
- Note: the source file for the design is in Sketch, but you can use any design tool as long as the look and feel is the same (here’s a useful tutorial on to convert from Sketch to Figma or XD)
BRANDING GUIDELINES
We already have definite the style for this website in the previous challenge, so your design should follow it.
- Font: Montserrat family
- Colors: as per existing design
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: Flexible; follow the provided guidelines and suggest improvements where seem appropriate and inline with the goals.
DEVICE SPECIFICATIONS
- Responsive desktop application in laptop size as well as mobile
- Desktop Size: 1366 x 768 px (width x height). Height can be extended as needed.
- Mobile Size - Iphone X size: 1125 x 2436px. 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.