Challenge Summary
Welcome to “Frontier Token Research- Responsive Web Application Wireframe Challenge”. In this challenge we are looking for your help to come up with wireframes and user flows for a decentralized research platform and web application.. You will be focused on creating how this application should look and represent the all the data.
We need to see an intuitive and easy to use "wireframe concepts" that will let us design and build the final user interfaces on the next stage of this project. Think on what are the best UI/UX practices when creating this wireframe.
This Studio competition will be run as a two-round tournament with a total prize purse of $2,500
0. Common screens
0.0 Splash Page
0.1 Start
0.2 About
1.0 Logged in View - Fund Manager
1.0 Feed
1.1 Pricing Data
1.2 Analyst Search
1.3 My Dashboard
1.4 My Account
Feel free to add any screens which are necessary to explain your concept.
0. Common screens
0.0 Splash Page
0.1 Start
0.2 About
0.3 FAQ
0.4 404
1.0 Logged in View - Fund Manager
1.0 Feed
1.1 Pricing Data
1.2 Analyst Search
1.3 My Dashboard
1.4 My Account
1.5 Chat
1.6 Fund Manager Search
Feel free to add any screens which are necessary to explain your concept.
Background Information
The application to be designed will have different functionalities depending on the user who is logging in. You can think about that as a CMS where we will mainly differentiate between 2 different logged in roles:
Fund Manager: An investor that needs research about cryptocurrencies and tokens. He will vote on the content providers (analysts, explained below) depending on the quality of the content. These votes are an essential functionality of the platform. The Fund Manager is a content consumer.
Analyst: An expert that creates content, thus, he / she will be the content provider. In contrast with a traditional CMS, most of the content they produce will not be public for all Fund managers, so permissions over the data the analyst provides will be very important. Analyst will be able to choose if he / she wants to share a specific report with one user (fund manager), with a list of fund managers, or make it public.
About Frontier Token Research:
Frontier is a decentralized token research platform connecting top performing analysts with buy-side fund managers. Frontier aims at delivering premium quality fundamental analysis covering the token market, employing a governance token as a radical new way to rank and incentivize analysts.
How does Frontier Work:
Fund managers would stake a number of tokens at the beginning of a defined period in a bounty pool. This will give the fund managers access to the all analysts on the platform. The fund managers would be able to communicate with analysts and consume their research reports. At the end of the defined period, fund managers would vote on analysts’ performance. Votes are weighted by the volume of tokens staked. Votes are aggregated to develop a ranked list of analysts. Analysts are then compensated for their services from the bounty pool based on their ranks.
Very excited to see your wireframes for this challenge!
Key Items to Focus on
Focus on general navigation between all required screens and functionalities
Easy and intuitive use for tech and non tech users.
The target device for this application is Web. So you work using 1280px width as your main resolution. Height can be increased if needed.
Document structure
Below, you can find the different screens that are required. They will be divided by a hierarchical structure x.y.z, where x represents a higher level, y the second level and z the third level. Thus, if a web view is inside a bigger functionality x , it will be represented as x.y.
In the higher level (x) below you will find 2 different blocks:
0: Common screens: Those screens don’t require to login, hence they don’t depend on the role.
1: Logged in view - Fund Manager
Required Screens
0. Common screens
We find 4 major pages, which may have different UX flows inside:
0.0 Splash Page
0.1 Start
0.2 About
0.3 FAQ
0.4 404
They are covered in detail in the following sections.
0.0 Splash Page (landing page - not logged in)
The Splash page shows a quick overview all of the functionalities of the platform, and let you log in by clicking on get started button:
- Frontier Description
- Analyst benefits with a summary image
- Investor benefits with a summary image
- User quotes (3) from both analyst and investors: This is kind of testimonials (user experience in using this web app)
- Button to get started (similar to login, but login is granted with metamask)
0.1 Start (Sign in / Sign up)
DApps don’t follow the common process to login as users can identify without providing any password by just using metamask. In order to clarify the process, screen captures from the login process of a common application (cryptokitties) are provided. Highly recommended to download metamask and give this application a try to understand the process.
0.1.0 Metamask not found
- Text explaining that you need metamask
- Button to download Metamask
- Getting started faqs dropdown text
0.1.1 Metamask is locked
- Text explaining that the user should open metamask and follow the instructions to unlock it
- Getting started faqs dropdown text
0.1.2 Metamask ok, new user is not registered
- Show the users public key
- Form to ask for email and nickname
0.1.2.1 Initial Registration Survey
- Are you an analyst or a fund manager?
- If you are an analyst, what type of analyst are you: a) technology analyst b) financial analyst c) venture analyst etc.
- If you are a fund manager, what type of fund are you: a) crypto fund b) venture capital fund c) hedge fund d) family office e) high net worth investor etc.
- What kind of tokens are you interested in? a) Utility / Consumer Tokens b) Security Tokens c) Commodity Tokens d) Network Tokens etc.
- What Industries are you interested in? a) fintech b) supply chain c) healthcare d) infrastructure tech etc.
- You can add other questions you might think are relevant here
0.1.2.2 Application submitted
- A message explaining that the application has been submitted, and we will contact the applicant as soon as possible.
0.1.3 Metamask ok, new user is registered
- Redirect to My Dashboard
0.2 About:
- This page will have the about us information
0.3 FAQ:
- Show us how the FAQ page will look like
0.4 404:
- We would like you to include an error page / this page is shown in-case the requested page doesn’t exist (think of something fun but stick to the concept)
1. Logged in View - Fund Manager
- A fund manager (content consumer) logs in to get insightful research about tokens. In return he / she will vote for those analysts which give him good service. Thus, he / she will need to have quick access to the following major functionalities:
Feed: Where he / she can get insightful reports about his / her favorite topics / tokens from analysts
Pricing data: Where the fund manager can see and browse live token prices
Analyst search: Where fund manager can check and search for analysts
My dashboard: Where fund manager can get stats about what he / she is interested in
My account: Where fund manager can check his / her settings
Those functionalities must have different pages. Those pages are covered below.
1.0 Feed
- Shows the latest posts updated for the user. The content is very analyst centric, so the profile of the writer (analyst) should be very visible. Also, keep in mind the content is a research report / analysis. In the way content is structured ,a source of inspiration could be Medium, where a user can get all the information personalized to him. In the context of the content that analysts are creating, Yahoo Finance could be an inspirational source.
Functionalities included:
Browse: A browse bar for every interface here is required
Discover: Latest posts (reports) that could be interesting to the fund manager, personalized.
1.0.1 Report view
When the user clicks on a post (report) of the list, he gets into the content of the post if the the report is public. If the report is private, the fund manager should request access and the analyst would decide whether to grant him access or not. When access is granted, the fund manager will be able to read the content, and can vote for the analyst who wrote the report. Functionalities included
- Content: Shows the content provided by the analyst in the post.
- Analyst profile link:
- Chat with Analyst
- Star/Save post
- Report Analyst
- CTA Button: Vote. On Click, it shows the number of votes available from the fund manager’s account, and an input to add the number of votes that the fund manager wants to use.
- If correct, the interface informs the user that the transaction was broadcasted to the network, and shows a link to the transaction on etherscan
- If not correct, the interface informs the user about the error
Again, a source of inspiration in the way content is structured could be Medium in the style and Yahoo Finance for the type of information (in this case related to tokens). Check here an example of an analysis not related to tokens.
1.1 Pricing data
The fund manager is a person who invests in tokens, so he / she would want to check the prices of those tokens that he / she is interested / invested in. A source of inspiration to show relevant information on tokens can be shown at http://coincap.io/, or http://coinmarketcap.com. The difference with this generic information is that the user will need to receive personalized and more detailed information about the tokens he is interested in, such as: team, date of token launch, etc.
1.1.1 Token data
When the user clicks on a token, he will be able to check the data of the token. Examples again at coinmarketcap or coincap. We would want more detailed financial data here such as annual max, annual min, etc. Other data could also be added depending on the token such as team, date of token launch, etc.
1.2 Analyst search
The fund manager wants to know who is the analyst that gives him / her better information, so he / she will need to have the possibility to easily categorize, search and finally vote for analysts. Below is a list of functionalities that this search feature must have:
- Analyst full list: A table showing the total number of analysts sorted by votes they received from other fund managers. The fund manager should be able to know here how many votes (in percentage of his total amount) he allocated to each one of those analysts.
- Favorite analysts lists: Fund Managers can see their own lists of analysts
- Analyst filtered: Allow the fund manager to filter through the full listing of analysts based on different criteria (e.g topics, type of token, etc.)
- Chat with analysts: The fund manager should be able to chat with specific analysts and even create group chats.
- List generation: The fund manager can create different lists of analysts by industry, analysis method, token covered, etc.
- Report analyst: the fund manager should be able to report the analyst for bad behavior / compliance
1.2.1 Analyst profiles
When the fund manager clicks on an analyst profile (in the analyst search) he / she can check what the analyst has published in his profile (e.g: latest posts). This profile is covered under 2.0 analyst profile section.
1.3 My Dashboard:
This section should display to the fund manager a quick view of everything he is interested in, with stats e.g:
- Starred posts
- My votes
- Favourite lists of analysts
- View and search reports
- Token news
- Token prices
- Be creative here!
1.4 My Account:
In this page, the fund manager can check his most basic information:
- View/edit Account (Ethereum address e.g 0xB24F8f0F7462751BFE83416cfD1A3F373C0c94E2)
- View token balance: the amount of tokens he has (Name FTR)
- View/edit nickname
- Quarter allocated balance: Amount of votes that the user has decided to buy/stake with frontier tokens. They are only valid for one quarter. The user has the possibility to buy more, with a button that says “increase stake”.
- Send tokens: An input where the user can set the amount of tokens he want to send, and the public address of the user that he is sending the tokens to.
- View voting history (Include transaction status: Sent/Processed/Confirmed): Shows the votes that the fund manager has made, including as information the amount, and the recipient analyst.
1.5 Chat
- Fund manager can chat with analysts where they can exchange text, charts and ideas. This feature doesn’t need to be a standalone page (could be, up to the designer) but is set apart because of its importance. The chat also includes the possibility to vote directly (an embedded button). It also shows the votes given to the analyst embedded in the chat.
1.6 Fund Manager Search
- The fund manager wants to know who are the other fund managers on the platform. He / she will need to have the possibility to easily categorize and search other fund managers.
Below is a list of functionalities that this search feature must have:
- Fund manager full list: A table showing the total number of fund managers sorted by total votes given to analysts.
- Fund managers filtered: Allow the fund manager to filter through the full listing of fund managers based on different things (e.g total of votes given, type of fund, etc.)
- Chat with other fund managers: The fund manager should be able to chat with other fund managers and even create group chats
1.6.1 Fund Manager profiles
- When the fund manager clicks on a fund manager profile (in the fund manager search) he / she should get a detailed profile specific to each fund manager.
User Flows
Finally, let’s review how those pages would work for the different users
Outside User
- Lands on the splash page
- Clicks on start
- Is asked to register / submit the survey
- Goes to the fund manager / analyst initial page
Fund Manager Side
- Lands on the splash page
- Clicks on start and logs in
- Lands on Feed page (Directly, login via metamask)
- Can navigate other pages from here
Tools Sketch / HTML:
- We are asking to work with Axure: http://www.axure.com/support
- You can also work with static images but you must include a fully navigable prototype in HTML.
NOTE: If you are designing in sketch it is mandatory that you create the flow using marvelapp / invision as we are expecting to see a clickable wireframes in this challenge.
- You are also allowed to submit pure HTML wireframes
Judging Criteria
- User Experience of the application/portal
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent 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
Wireframes should be built in HTML or Axure
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
We need to see an intuitive and easy to use "wireframe concepts" that will let us design and build the final user interfaces on the next stage of this project. Think on what are the best UI/UX practices when creating this wireframe.
This Studio competition will be run as a two-round tournament with a total prize purse of $2,500
Round 1
Submit your initial wireframes for checkpoint review.0. Common screens
0.0 Splash Page
0.1 Start
0.2 About
1.0 Logged in View - Fund Manager
1.0 Feed
1.1 Pricing Data
1.2 Analyst Search
1.3 My Dashboard
1.4 My Account
Feel free to add any screens which are necessary to explain your concept.
Round 2
Submit your final wireframes for checkpoint review.0. Common screens
0.0 Splash Page
0.1 Start
0.2 About
0.3 FAQ
0.4 404
1.0 Logged in View - Fund Manager
1.0 Feed
1.1 Pricing Data
1.2 Analyst Search
1.3 My Dashboard
1.4 My Account
1.5 Chat
1.6 Fund Manager Search
Feel free to add any screens which are necessary to explain your concept.
Background Information
The application to be designed will have different functionalities depending on the user who is logging in. You can think about that as a CMS where we will mainly differentiate between 2 different logged in roles:
Fund Manager: An investor that needs research about cryptocurrencies and tokens. He will vote on the content providers (analysts, explained below) depending on the quality of the content. These votes are an essential functionality of the platform. The Fund Manager is a content consumer.
Analyst: An expert that creates content, thus, he / she will be the content provider. In contrast with a traditional CMS, most of the content they produce will not be public for all Fund managers, so permissions over the data the analyst provides will be very important. Analyst will be able to choose if he / she wants to share a specific report with one user (fund manager), with a list of fund managers, or make it public.
About Frontier Token Research:
Frontier is a decentralized token research platform connecting top performing analysts with buy-side fund managers. Frontier aims at delivering premium quality fundamental analysis covering the token market, employing a governance token as a radical new way to rank and incentivize analysts.
How does Frontier Work:
Fund managers would stake a number of tokens at the beginning of a defined period in a bounty pool. This will give the fund managers access to the all analysts on the platform. The fund managers would be able to communicate with analysts and consume their research reports. At the end of the defined period, fund managers would vote on analysts’ performance. Votes are weighted by the volume of tokens staked. Votes are aggregated to develop a ranked list of analysts. Analysts are then compensated for their services from the bounty pool based on their ranks.
Very excited to see your wireframes for this challenge!
Key Items to Focus on
Focus on general navigation between all required screens and functionalities
Easy and intuitive use for tech and non tech users.
The target device for this application is Web. So you work using 1280px width as your main resolution. Height can be increased if needed.
Document structure
Below, you can find the different screens that are required. They will be divided by a hierarchical structure x.y.z, where x represents a higher level, y the second level and z the third level. Thus, if a web view is inside a bigger functionality x , it will be represented as x.y.
In the higher level (x) below you will find 2 different blocks:
0: Common screens: Those screens don’t require to login, hence they don’t depend on the role.
1: Logged in view - Fund Manager
Required Screens
0. Common screens
We find 4 major pages, which may have different UX flows inside:
0.0 Splash Page
0.1 Start
0.2 About
0.3 FAQ
0.4 404
They are covered in detail in the following sections.
0.0 Splash Page (landing page - not logged in)
The Splash page shows a quick overview all of the functionalities of the platform, and let you log in by clicking on get started button:
- Frontier Description
- Analyst benefits with a summary image
- Investor benefits with a summary image
- User quotes (3) from both analyst and investors: This is kind of testimonials (user experience in using this web app)
- Button to get started (similar to login, but login is granted with metamask)
0.1 Start (Sign in / Sign up)
DApps don’t follow the common process to login as users can identify without providing any password by just using metamask. In order to clarify the process, screen captures from the login process of a common application (cryptokitties) are provided. Highly recommended to download metamask and give this application a try to understand the process.
0.1.0 Metamask not found
- Text explaining that you need metamask
- Button to download Metamask
- Getting started faqs dropdown text
0.1.1 Metamask is locked
- Text explaining that the user should open metamask and follow the instructions to unlock it
- Getting started faqs dropdown text
0.1.2 Metamask ok, new user is not registered
- Show the users public key
- Form to ask for email and nickname
0.1.2.1 Initial Registration Survey
- Are you an analyst or a fund manager?
- If you are an analyst, what type of analyst are you: a) technology analyst b) financial analyst c) venture analyst etc.
- If you are a fund manager, what type of fund are you: a) crypto fund b) venture capital fund c) hedge fund d) family office e) high net worth investor etc.
- What kind of tokens are you interested in? a) Utility / Consumer Tokens b) Security Tokens c) Commodity Tokens d) Network Tokens etc.
- What Industries are you interested in? a) fintech b) supply chain c) healthcare d) infrastructure tech etc.
- You can add other questions you might think are relevant here
0.1.2.2 Application submitted
- A message explaining that the application has been submitted, and we will contact the applicant as soon as possible.
0.1.3 Metamask ok, new user is registered
- Redirect to My Dashboard
0.2 About:
- This page will have the about us information
0.3 FAQ:
- Show us how the FAQ page will look like
0.4 404:
- We would like you to include an error page / this page is shown in-case the requested page doesn’t exist (think of something fun but stick to the concept)
1. Logged in View - Fund Manager
- A fund manager (content consumer) logs in to get insightful research about tokens. In return he / she will vote for those analysts which give him good service. Thus, he / she will need to have quick access to the following major functionalities:
Feed: Where he / she can get insightful reports about his / her favorite topics / tokens from analysts
Pricing data: Where the fund manager can see and browse live token prices
Analyst search: Where fund manager can check and search for analysts
My dashboard: Where fund manager can get stats about what he / she is interested in
My account: Where fund manager can check his / her settings
Those functionalities must have different pages. Those pages are covered below.
1.0 Feed
- Shows the latest posts updated for the user. The content is very analyst centric, so the profile of the writer (analyst) should be very visible. Also, keep in mind the content is a research report / analysis. In the way content is structured ,a source of inspiration could be Medium, where a user can get all the information personalized to him. In the context of the content that analysts are creating, Yahoo Finance could be an inspirational source.
Functionalities included:
Browse: A browse bar for every interface here is required
Discover: Latest posts (reports) that could be interesting to the fund manager, personalized.
1.0.1 Report view
When the user clicks on a post (report) of the list, he gets into the content of the post if the the report is public. If the report is private, the fund manager should request access and the analyst would decide whether to grant him access or not. When access is granted, the fund manager will be able to read the content, and can vote for the analyst who wrote the report. Functionalities included
- Content: Shows the content provided by the analyst in the post.
- Analyst profile link:
- Chat with Analyst
- Star/Save post
- Report Analyst
- CTA Button: Vote. On Click, it shows the number of votes available from the fund manager’s account, and an input to add the number of votes that the fund manager wants to use.
- If correct, the interface informs the user that the transaction was broadcasted to the network, and shows a link to the transaction on etherscan
- If not correct, the interface informs the user about the error
Again, a source of inspiration in the way content is structured could be Medium in the style and Yahoo Finance for the type of information (in this case related to tokens). Check here an example of an analysis not related to tokens.
1.1 Pricing data
The fund manager is a person who invests in tokens, so he / she would want to check the prices of those tokens that he / she is interested / invested in. A source of inspiration to show relevant information on tokens can be shown at http://coincap.io/, or http://coinmarketcap.com. The difference with this generic information is that the user will need to receive personalized and more detailed information about the tokens he is interested in, such as: team, date of token launch, etc.
1.1.1 Token data
When the user clicks on a token, he will be able to check the data of the token. Examples again at coinmarketcap or coincap. We would want more detailed financial data here such as annual max, annual min, etc. Other data could also be added depending on the token such as team, date of token launch, etc.
1.2 Analyst search
The fund manager wants to know who is the analyst that gives him / her better information, so he / she will need to have the possibility to easily categorize, search and finally vote for analysts. Below is a list of functionalities that this search feature must have:
- Analyst full list: A table showing the total number of analysts sorted by votes they received from other fund managers. The fund manager should be able to know here how many votes (in percentage of his total amount) he allocated to each one of those analysts.
- Favorite analysts lists: Fund Managers can see their own lists of analysts
- Analyst filtered: Allow the fund manager to filter through the full listing of analysts based on different criteria (e.g topics, type of token, etc.)
- Chat with analysts: The fund manager should be able to chat with specific analysts and even create group chats.
- List generation: The fund manager can create different lists of analysts by industry, analysis method, token covered, etc.
- Report analyst: the fund manager should be able to report the analyst for bad behavior / compliance
1.2.1 Analyst profiles
When the fund manager clicks on an analyst profile (in the analyst search) he / she can check what the analyst has published in his profile (e.g: latest posts). This profile is covered under 2.0 analyst profile section.
1.3 My Dashboard:
This section should display to the fund manager a quick view of everything he is interested in, with stats e.g:
- Starred posts
- My votes
- Favourite lists of analysts
- View and search reports
- Token news
- Token prices
- Be creative here!
1.4 My Account:
In this page, the fund manager can check his most basic information:
- View/edit Account (Ethereum address e.g 0xB24F8f0F7462751BFE83416cfD1A3F373C0c94E2)
- View token balance: the amount of tokens he has (Name FTR)
- View/edit nickname
- Quarter allocated balance: Amount of votes that the user has decided to buy/stake with frontier tokens. They are only valid for one quarter. The user has the possibility to buy more, with a button that says “increase stake”.
- Send tokens: An input where the user can set the amount of tokens he want to send, and the public address of the user that he is sending the tokens to.
- View voting history (Include transaction status: Sent/Processed/Confirmed): Shows the votes that the fund manager has made, including as information the amount, and the recipient analyst.
1.5 Chat
- Fund manager can chat with analysts where they can exchange text, charts and ideas. This feature doesn’t need to be a standalone page (could be, up to the designer) but is set apart because of its importance. The chat also includes the possibility to vote directly (an embedded button). It also shows the votes given to the analyst embedded in the chat.
1.6 Fund Manager Search
- The fund manager wants to know who are the other fund managers on the platform. He / she will need to have the possibility to easily categorize and search other fund managers.
Below is a list of functionalities that this search feature must have:
- Fund manager full list: A table showing the total number of fund managers sorted by total votes given to analysts.
- Fund managers filtered: Allow the fund manager to filter through the full listing of fund managers based on different things (e.g total of votes given, type of fund, etc.)
- Chat with other fund managers: The fund manager should be able to chat with other fund managers and even create group chats
1.6.1 Fund Manager profiles
- When the fund manager clicks on a fund manager profile (in the fund manager search) he / she should get a detailed profile specific to each fund manager.
User Flows
Finally, let’s review how those pages would work for the different users
Outside User
- Lands on the splash page
- Clicks on start
- Is asked to register / submit the survey
- Goes to the fund manager / analyst initial page
Fund Manager Side
- Lands on the splash page
- Clicks on start and logs in
- Lands on Feed page (Directly, login via metamask)
- Can navigate other pages from here
Tools Sketch / HTML:
- We are asking to work with Axure: http://www.axure.com/support
- You can also work with static images but you must include a fully navigable prototype in HTML.
NOTE: If you are designing in sketch it is mandatory that you create the flow using marvelapp / invision as we are expecting to see a clickable wireframes in this challenge.
- You are also allowed to submit pure HTML wireframes
Judging Criteria
- User Experience of the application/portal
- Completeness and accuracy of your wireframes
- How well your wireframes provide a consistent 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
Wireframes should be built in HTML or Axure
Source Files
All original source files of the submitted ideas. If you would like to submit notes please include notes.txt file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths.
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.