Challenge Summary
In this challenge, we are looking for your help to redesign/rebrand an existing website and provide a Style Guide that will be used going forward.
This application is a global land lifecycle management system built from the ground up for an open, transparent, and trusted world. Currently, countries around the world are pursuing next-generation land registry systems to fix current pain points like inefficient paper process, complex transaction calculations, and lack of visibility into existing land registries.
Really excited to see your designs for this challenge.
Round 1
Submit your initial design for a Checkpoint Feedback!
01 Login (Desktop)
02 Projects (Desktop)
02.1 Create Project (Desktop)
02.2 Project Details (Desktop)
03 Documents (Desktop)
04 Manage Users (Desktop)
05 Blockchain Explorer (Desktop)
06 Notifications (Desktop)
07 My Profile (Desktop)
08 Styleguide
As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs
- Please include the MarvelApp URL in the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
Submit your Final Designs with all checkpoint feedback implemented!
01 Login (Desktop + Mobile)
02 Projects (Desktop + Mobile)
02.1 Create Project (Desktop + Mobile)
02.2 Project Details (Desktop + Mobile)
03 Documents (Desktop + Mobile)
04 Manage Users (Desktop + Mobile)
05 Blockchain Explorer (Desktop + Mobile)
06 Notifications (Desktop + Mobile)
07 My Profile (Desktop + Mobile)
08 Styleguide
As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs
- Please include the MarvelApp URL in the comments while uploading your submission
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
This challenge is all about redesigning/rebranding the existing designs (please find them in forums) that were supplied and based on that we need to create a style guide that will need to include all the components from bootstrap. We are looking to create responsive design solutions - so keep this in mind while designing your screens!
Design Guidelines
- Your designs should be included as PDFs and Marvelapp
- All components should have a cohesive look and feel.
- All components need to be responsive from the desktop, tablet, and mobile size using the normal bootstrap screen sizes. The majority of focus should be on desktop experience, however.
- Please include the provided logo in your designs!
Design Sizes:
- Desktop: 1200 px (width) and height as required
- Mobile: 750 x 1334 px
Styling
- Please use 'Roboto' for all fonts
- Primary color should be a shade of blue but include color samples for all the following: primary, secondary, success, warning, info, danger.
- For any icons, please use font-awesome.
References:
These are links to screenshots from applications that we really like. Please use the best design practices from these examples in your components:
- https://dribbble.com/shots/4289272-Financial-Dashboard
- https://dribbble.com/shots/4306177-AISC-DB
- https://dribbble.com/shots/4264239-Crypto-dashboard-UI
- https://dribbble.com/shots/4008135-Account-Portfolio
- https://dribbble.com/shots/4005070-Spaceship-Mobile-Concept-II
Required Pages:
We need below pages to be designed
01 Login:
- A welcome message about the site.
- A user enters username and password.
- Provide option to retrieve password (forgot password option).
02 Projects:
- This is the landing page once a user is logged in.
- In this page, we show a list of projects - these are real estate projects (commercial and residential projects).
- Each project needs to show a project name, location, few lines of description, # of documents, pending signatures.
- Provide a way to add a new project.
02.1 Create Project:
- Allow the user to create a new project
- We need below details to be included in the project:
- - - Project Information (project name, description, and cover image)
- - - Project Administrators (administrator, manager, consultant, contractor)
- - - Stage Managers (Design and tendering, Construction, Commissioning and handover, Sales).
02.2 Project Details:
- This shows the project details.
- Include all the details mentioned in the create project.
- NOTE: In addition to details mentioned in the create projects, also show the documents that were added.
- Provide a way to search/filter through the documents.
03 Documents:
- This shows the list of all the documents that were added by the user under a project
- This needs to be included below information “Document image, document name, project name, date published by username, # pending, # signed, # comments, status (for ex: document has been approved, waiting for signatures, etc) and an option to view the document”
- Please follow the storyboard for information.
04 Manage Users:
- This shows the list of all users that added.
- Information should include “image, name, email, organization, date added”
- Provide a way to include a new user.
05 Blockchain Explorer:
- This page shows the list of transactions (actions)
- It will have following details: transaction hash (alphanumeric value), transaction type, user type, date and time
- Provide a way to filter through the list.
06 Notifications:
- This will show the list of recent transactions
- It will include the date and time, user, project, action, blockchain id
07 My Profile:
- This shows the details in my profile
- It will include username, organization, department, email, delegate and history!
08 Styleguide:
Core Colors
Include a core color for all the following states and include lighter and darker versions for hover, active:
- primary (blue)
- secondary (grey)
- success (green)
- warning (yellow)
- info (teal)
- danger (red)
- default (grey)
- Please include the primary colors in the style guide.
Components
- Most of the components come from Bootstrap 4: https://getbootstrap.com/docs/4.0/components
All typography
- - Header 1, Header 2, Header 3, Header 4, Header 5, Header 6
- - Paragraph
- - Quoted paragraph
- - Emphasis paragraph
- - Small text
- Alerts (all types and colors)
- Badge
- Buttons
- Button group
- Card
- - - Only text
- - - Image + text + action button
- - - Image with overlay + text
- Dropdowns
- Feed (Include comments and document uploads in the Feed)
- Forms
- Input group
- - - All different inputs (text, select, etc)
- List group
- Media Object
- Modal
- Navs
- Navbar
- Progress
- Tables
- - - All text table
- - - Small image column then text
- Timeline
MarvelApp Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvel app request to csystic@gmail.com or in Challenge Forum
- You MUST include your Marvel app URL (in your marvel app prototype, click on share and then copy the link & share it within your notes while you upload).
Target Audience:
- Governments and NGOs employees
- General consumers as well
- Early 20's to 50's, professionals, educated, medium-high net worth
- - - Comfortable using Gmail, Etrade, Mint, Quickbooks, popular web apps, Instagram, Robinhood, popular mobile apps
- Global audience. Could be any region around the world
Judging Criteria
Your submission will be judged on the following criteria:
- Overall idea and execution of concepts
- How well does your design align with the objectives of the challenge
- Execution and thoughtfulness in designing this application
- The overall design and user experience
- Cleanliness of screen design and user flow.
Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File:
- Submit JPG/PNG for your submission files.
- Submit Marvelapp as part of your submission.
Source Files:
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a layered PSD file, or Adobe Illustrator as a layered AI file or Sketch!
Final Fixes:
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.