Project 6: User Testing & Final Release
Assignment Instructions
These are the 6.1040 assignment instructions for this assignment. It goes into greater depth about the expectations, requirements, and deliverables for this assignment. It also includes a rubric detailing how this assignment will be graded.
Team Contacts
Team Email: 61040-project@mit.edu
Team Members
Name | GitHub | |
---|---|---|
Henry Asa | henryasa@mit.edu | @HenryAsa |
Amir Kazeminia | amirka@mit.edu | @amirika20 |
Cal Wilson | calwilsn@mit.edu | @calwilsn |
Jonatan Fontanez | jonfon01@mit.edu | @DragonStorm25 |
Team Project Mentors
Name | |
---|---|
Ashley Granquist | ashleymg@mit.edu |
Fabrizzio Orderique | porderiq@mit.edu |
Sharefolio Application Summary
Invest exactly like Warren Buffett without being Warren Buffett.
Sharefolio is a community-powered asset trading platform. Unlike other asset marketplaces, users are able to see other users' asset holdings and public leaderboards are used to rank users' trading/investment performance on the application. With this data made public, users can make more informed decisions on what they want to invest in depending on their peer's actions and holdings. Additionally, users can choose to Copy-Invest
other users' portfolios, meaning that all trades a copied portfolio makes are automatically reflected in all copiers' portfolios. This Copy-Investing
feature allows users to "invest exactly like Warren Buffett, without being Warren Buffett."
Important Note About Privacy
Similar to how Venmo conceals the value of each transaction but publicizes the comment associated with a given transaction, users will be able to choose whether a particular transaction will be public or private. Additionally, all specific values (for example, the amount of money a particular user invested in a certain asset) are always private. Percentage distributions may be made public (depending on the user's discretion), but specific quantities are confidential.
Sharefolio Links
Sharefolio Vercel Deployment
Sharefolio GitHub Repository
User Testing Guidelines
Title | Instruction | Goal | |
---|---|---|---|
1 | Create a Portfolio | Log into the application and deposit money into a newly created Portfolio . | Determine how intuitive the overall structure of the application is, especially when a user is expected to perform critical tasks to the app's functionality. |
2 | Purchase an Asset | Purchase one share of Apple (AAPL) stock. | Users should be able to easily navigate to the stocks page and purchase an asset in their portfolio. |
3 | Copy-Invest | Copy another user's Portfolio . | The user should be able to view another user's portfolio and successfully Copy-Invest that portfolio. |
4 | AI Consulting | Ask the AIAssistant to check if it is a good idea to invest in oil. | Users should be able to locate the "Help" icon in the bottom left corner of the screen and then ask the AI Assistant for its advice on a stock purchase. |
5 | Review Articles | Find articles related to the stocks that you want to invest in. | Make sure that users can find the news icon and select their favorite articles. |
User Test #1
User Experience Overview
The user was confused for about 10 seconds when first opening the app, as he did not immediately realize that he had to create an account. When creating an account, it took some time to create a password that met the criteria of the strong password checker but he mentioned that he appreciated the idea as it made the app feel more secure and "legit". The user didn’t have a picture readily available so he chose to upload a PDF file instead, which caused the profile photo in the top right corner to appear as a black box, making it difficult to find where this page could be accessed.
When viewing the home page, the user noted that he liked the format and how the number of users displayed on each row changed depending on the width of the window. However, he mentioned it may be difficult to see which profile you were hovering over, so changing the color of the link or adding some other pop-up when hovering over a profile may be beneficial.
The user struggled to find where the AI Assistant was located. This is likely caused by a failure in our choice of symbols, as the question mark icon we are using would normally be used to signify a page the user could visit for help, but in this case, we are using it to represent asking questions to the AI Assistant.
The user was quite positive about the NewsFeed page. He liked the ease with which the user is able to filter articles by company and appreciated the value of a feature that compiled articles from different sources. He also mentioned that it would be nice to view articles when he was interested in purchasing a new stock.
Opportunities for Improvement
[Moderate, Physical]
Simplify the Login Process
Question | Explanation |
---|---|
What is the flaw? | Users arrive to the homepage of the website even when they are not logged in. |
Why is the flaw currently occurring? | While we check whether a user isLoggedIn for certain app functionality, we do not currently do so to reroute them to the Login page. |
How can this flaw be fixed? | Having the user start on the Login page when they are not signed in would simplify the login process and provide situational context about what their first action should be. |
[Minor, Conceptual]
Optional Profile Photos
Question | Explanation |
---|---|
What is the flaw? | A profile photo is currently required to create an account. |
Why is the flaw currently occurring? | To help distinguish all users on the platform (since their profile photo is used throughout the user interface), we require a picture to be uploaded during the account creation process. However, some users do not have a profile picture ready on their computers, so they should still be able to create a profile without this photo readily available. |
How can this flaw be fixed? | Do not require users to upload a profile photo during the account creation process, and instead set a default profile picture for their accounts with the option to later upload a profile picture to their account. |
This has now been implemented.
[Major, Linguistic]
Better AI Positioning
Question | Explanation |
---|---|
What is the flaw? | Users do not know how to navigate to the AI Assistant page. |
Why is the flaw currently occurring? | The choice of icon for the AI Assistant (a question mark in the bottom left corner of the screen) makes it unclear where the AI Assistant can be accessed. |
How can this flaw be fixed? | The icon and position should be changed, which could be done by simply changing the icon and/or adding the AI Assistant to the navigation bar. |
User Test #2
Similar to the first user, the second user was also bit confused about where he could create an account at first, as registering a new user is done from the Login page, while the user assumed there was a separate Register page. Creating a strong password took some thought, but he did mention that this check is something he would expect from other apps. He attempted to create his account without selecting a profile photo, and no error appeared but the account also was not created successfully, which confused him for several seconds before he uploaded a profile photo and tried again.
The user then navigated to the stock page. He liked the look of the graphs and the ability to change the duration of time which data is displayed. One nitpick he had was that the price of the stocks should only be displayed to two decimal points, not four (since the last two decimal values are zeroes anyway).
Next attempted to purchase a stock. He was confused as to why there was a second dropdown menu (which is unlabeled but displays all user portfolios once they have been created). He received error messages about purchasing stocks and had to be prompted to create a portfolio and deposit money. The user mentioned that it felt strange to be able to deposit an absurdly large sum of money, and that once the account balance exceeded three digits, it should be displayed with commas to make its value more readable.
When viewing the profile pages of other users, he noted that it seemed the “total wealth” of other users was tied to the amount of money that he had deposited.
Our second user was also positive about the newsfeed and mentioned that he would use this as a standalone app. He liked the simplicity of the UI and agreed with the motivation to compile relevant articles before purchasing a stock.
Finally, he also struggled to locate the AI Assistant and was a bit confused by the message that is displayed when the assistant is queried. However, he liked the design of the UI, as he was familiar with this interface from other AI Assistants and he also appreciated the color choice.
Opportunities for Improvement
[Minor, Linguistic]
Decimal Precision
Question | Explanation |
---|---|
What is the flaw? | The prices of stocks are currently displayed to four decimal places. |
Why is the flaw currently occurring? | This is dissimilar from most places where currency is displayed to two decimal places, which is a simple area for improvement. The API we are using also only gives prices to two decimal places, so the extra precision is unnecessary. So we are not quite sure why this is occurring. |
How can this flaw be fixed? | We can simply round() the stock price to two decimal points. |
[Moderate, Linguistic]
AI Loading
Question | Explanation |
---|---|
What is the flaw? | The message displayed when the AI is being queried is too long and does not provide the common symbolism used for loading screens. |
Why is the flaw currently occurring? | Querying the AI API takes a long time, and Vercel does not continuously update the page the same way our locally run website is updated. Therefore, once the query comes through, we ask the user to refresh the page. |
How can this flaw be fixed? | This message could be replaced with a shorter message such as "Please wait while we generate your response" or something similar followed by an animated loading icon. We could also work with Vue's emits to emit a page refresh when the query finally comes through, no longer requiring the user to manually do this action on their own. |
[Minor, Conceptual]
Gamify Money
Question | Explanation |
---|---|
What is the flaw? | Users are allowed to deposit an arbitrarily large sum of money to their accounts. |
Why is the flaw currently occurring? | We currently allow users to deposit any quantity of money that they choose. This was a design choice we made, as in the future we may want to allow actual depositing of money and trading of assets. However, these transactions are not currently implemented so it may be better to give all users the same starting balance so that it is easier for users to compete to be a top investor. |
How can this flaw be fixed? | We could make all users start with the same starting balance, or require users to allocate a 'reasonable' sum of money to their accounts instead of an arbitrary quantity. |
User Test #3
This user's feedback spans across several key areas, highlighting both positive aspects and critical issues within the app. The positives include an appreciation for the visually appealing stock graphs and the straightforward, clean design of the stock pages. However, significant concerns were raised regarding usability and functionality.
Users encountered obstacles during registration due to a lack of clear guidance, encountering errors about being logged in. The newsfeed presented readability issues with dates and checkboxes, obstructed by the menu bar. Additionally, the confusion around the necessity of portfolios for stock purchases led to usability challenges. The app's design, likened to a different platform (Runescape), suggests a need for a more tailored and distinctive interface to enhance user engagement and association with the app's identity.
Moreover, technical glitches such as the inability to change time series for stocks other than Amazon, complications arising from overly lengthy portfolio names causing errors during stock purchases, and potential vulnerabilities allowing unintended actions like selling stocks in different portfolios after a page refresh, raise concerns about functionality and security. The slow article filter update and ambiguity surrounding the AI Assistant's visibility add to the usability challenges.
Stylistically, while the login page was praised, the overall website lacked styling and cohesive design elements, including overlooking background color. These insights point to the necessity for a comprehensive overhaul focusing on usability enhancements, technical stability, coherent design language, and a clear user journey to ensure a more intuitive and enjoyable user experience.
Opportunities for Improvement
[Moderate, Physical]
Depositing Money
Question | Explanation |
---|---|
What is the flaw? | There is no guidance on the app to show how to deposit money or check the balance. |
Why is the flaw currently occurring? | We did not implement a sort of 'Getting Started' guide/walkthrough to help users navigate the app when they first arrive. |
How can this flaw be fixed? | Potentially, one solution is to have a section for money on the navigation bar. We could also require users to deposit money to their accounts upon profile creation so that they initially start with money in their accounts. |
[Moderate, Linguistic]
Copy-Investing
Question | Explanation |
---|---|
What is the flaw? | The details of copy investing are currently not shown, and a user does not know how that would happen. |
Why is the flaw currently occurring? | Copy-Investing is one of the novel features of our application. While it is intuitive to us developers (since we wrote the app and have been dealing with this concept for the past few weeks), we realize that this is not the case for new users who have never heard of the app or this concept. |
How can this flaw be fixed? | Once again, we could implement a small 'Getting Started' page that introduces the user to these novel concepts and how they work. We could explain what Copy-Investing is, how it should be used, and what a user needs to do to most effectively leverage its power. |
[Moderate, Physical]
Error Handling
Question | Explanation |
---|---|
What is the flaw? | Occasional app errors are displayed to the user, which is unintuitive, confusing, and detracts from the user experience. |
Why is the flaw currently occurring? | Fixing weird error messages like "object promise" is key to making users feel more confident in the app's reliability. Also, sorting out problems that let people mess with stocks in the wrong portfolios after refreshing the page is super important to keep everything secure and trustworthy. |
How can this flaw be fixed? | These error messages and error handling could be resolved with more time. Due to the complexity of the application we chose to develop, we have not been able to perfectly debug all of the errors in our app, leaving the user with a slightly buggy experience. With more time, we would be able to squash all of these pesky bugs! |
Design Revisions
Design Revision | Changes Made |
---|---|
Scaled-down Asset Concept | Since we are using an API to gather most of our stock data, we did not end up storing as much data in the Asset concept than had previously been assumed. |
Expanded the Portfolio Concept | The portfolio concept was increased in breadth and scope to include information about whether or not it should be public, its name, as well as additional details on the information related to the purchase of Assets that had been made. |
Money Concept Expansion | The Money concept didn't change in its core functionalities, but rather expanded so that each user has a specific balance associated with their profile, and synchronizations were created to ensure that the Money value remains consistent with the user's trades. |
Scaled-down Article Concept | Since we are using an API to gather most of the data related to articles for this application, we did not end up leveraging the Article concept in our database as heavily as we thought we would. |
Special Thanks!
Thank you 6.1040 Staff for all of your hard work this semester and for designing such an incredible class! I really enjoyed this class and learned a tremendous amount. I really appreciate it. I hope our paths cross again in the future!