InvestaWatcher Website Design
Background
Investagrams is the fastest-growing social-financial platform that provides educational tools to empower Filipinos in their stock market journey. InvestaWatcher is one of the most used features in Investagrams. Users will be able to create alerts based on their entry, exit, and stop loss levels. Investa will then send the alerts via in-app notification, sms, e-mail and FB messenger.
Goal
I was assigned to redesign the overall look and feel of InvestaWatcher and add an alerts feed where all the Watcher notifications will be seen in one place and provide a facility to view their price, indicator, and news alert. There would be different views for premium and free users.
Role
UI/UX designer responsible for improving the layout and interface of the platform. I frequently collaborated with the Product Owner, Software engineers and QA tester.
Tool
Adobe XD
Duration
1 month
InvestaWatcher Old Version
Below are screenshots of the previous version of the Watcher.
Things to consider:
1. The design looks heavy because of all the buttons placed.
2. The data on the table uses red and green highlights and texts to indicate gains and losses. Also using these colors as buttons without any association with positive and negative profit might confuse users.
Table and thumbnail view of the old InvestaWatcher platform
InvestaWatcher New Version
Improvements:
1. Designed a cleaner platform for users to have a better and more pleasing-to-the-eyes experience monitoring their stocks and planning strategies. Also considered the new Investa branding colors.
2. When the Alert Feed was added, the data on the table needed to be compressed. I replaced the buttons under Actions with icons and then merged the reset buttons. The "Actions" label on the header was also removed.
3. One of the essential functions on this page is the table where users can see the stocks they added. The icons will only show a neutral gray color unless hovered to avoid distractions.
4. Users can add a maximum of 30 stocks per group. I added a sorting function to arrange them alphabetically to make things easier for our users to find the stock name.
Premium users can add multiple Watcher groups. On the previous design, Edit and Delete Group were shown as icons. I placed these options inside the meatball menu to make it less confusing with the icons on the stock rows (since they have the same function).
Originally, the idea of having Alert Feed on the Watcher page was for our premium users only. Afterwards, we considered having it for our free users since it can be a way to convert them to premium when they can see the value of the feed.
We had two options:
a. Instead of the Alerts Feed, it'll be a marketing graphic or text placed to introduce and advertise the feed.
b. Show them the function of the feed but will only be limited to the 4 latest notifications instead of an endless scroll.
We decided to go with the second option and added the button at the end where they will be directed to the Premium landing page and be introduced with all our premium features.
Check it live here.
What's next?
We wanted to deploy the MVP of the Alert Feed first and test it on our users. For our next phase, we will be adding filters by name and category for easy monitoring and addressing any feedback if necessary.
