DatagoTech
OVERVIEW
DatagoTech is one of Datago Technology's app, a financial news risk management with the combination of text analytics & search technology from news, searches and social media from a wide range of industries. Users can find the most real-time financial information such as news, social media posts, announcements and research reports as well as the relationship between this information. For instance, the companies associated with a person and their respective news. Through DatagoTech's intelligence monitoring of competitors, ours clients can enhance returns, reduce risk, improve operational efficiency and most importantly to make relevant and right decisions.
TIMELINE
October 2020 - May 2021
MY ROLE
UX/UI Designer
THE TEAM
Solo designer, CEO, 2 developers, 3+ data scientists, and 1 QA Engineer
TOOLS USED
Figma, Illustrator
The Goal
THE USERS
Clients that have access to this platform are from banks and educational institutions.
IDENTIFYING PROBLEMS
These two pages below are the searched result (the team's proposed design). Once joining the team, I was given the responsibility to continue on it. I first defined some of the main problems that we would need to solve:
Information Architecture
• Unclear hierarchy
• Lack of consistency
• Unclear relationship between the news tags and the filter tags
• Unclear relationship between the side menu and the main content
Interaction
• Too much filter which can be overwhelming (can make use of advanced filtering)
• Some news may not produce a news abstract/summary (consistency issue)
• Broken user flow (users have a hard time figuring out net steps)
Interface
• Lack of excitement
• Lack of icons/graphics
• Colors & Typography
• Lack of subtle effects (like hovers & active selections)
Process
BREAKING IT DOWN INTO SMALLER PIECES
Due to the complexity of building the platform from the ground up (I only had the two pages above to work with) and requiring a robust database system, I started drafting some pages and doing low fidelity wireframes to have a better picture of the product.
DESIGN ALTERNATIVES
This project definitely improved my problem solving skills as I came up with having multiple ways to tackle a problem. There is no single solution to solve a single problem. This is also a quick solution replacement in case the selected design may be a flaw. In this example, we weren't sure if we wanted to move an item one by one or in bulk. After discussions between stakeholders and tests, we went for Option 3. (This was in Version - February 2021)
Design System
ACCESSIBILITY
I mainly used contrast checker tools like Web Aim and the browser's inspect mode to check whether the color choices and font sizes meet the passing criteria for better legibility. Also used Material Design's tool for generating the color variations from lighter to darker options. Since this is my first project to deal with a light & dark theme mode, I referred a lot to Web Aim, Apple's Human Interface Guidelines, and other design systems like Atlassian, and some articles on Medium to understand best practices for dark theme mode like the different elevations where the background color gets lighter and the shadows spread more for better overlapping visuals.
Sprints and Testing
We have weekly/biweekly (depending on the difficulty) development sprints, and when one ends, another begins. After the sprint, the product managers and CEO will test it with professors who are one of the main users of our products. They report back to me with their findings, and we then brainstorm solutions with everyone. We also have a dedicated QA team to test the product whenever a sprint ends. This is how the company has always operated even before I joined them.
The red, green, and yellow color dots that symbolize negative, positive, and neutral aren't distinct enough since, apparently, in China, red implies positive and green means negative, although in other countries, the opposite is true. We have users not only coming from the mainland but also from the local and other countries. We added a color preference switcher for the two colors.
*Ignore the solid blue and green color tags, we just disabled them for the time being as we are still optimizing the data accuracy.
The users desired more statistics and to observe how the number of positive/negative/neutral news changed over time.
We also tweaked the filter section and relocated the tabs 相关新闻 (Related News), 高管扩展 (Executive Extension), 子公司扩展 (Subsidiary Expansion). The reason is on the technical side, particularly in terms of laptop screen sizes. The popup will always stay in the center which follows the dropdown arrow, and if we try to make it responsive (scaling the width), it will look like a list, similar to the side navbar, which can get inconvenient if we continue to add more filter items.
Prototype/Staging
As you can see in these two versions, we made a lot of optimizations on the app and added more feature requests. As mentioned above in the design alternatives section, I created several options for how a feature can be used. As new requests come in, I may forget some ideas, so while the idea is still fresh, I simply build a quick wire flow.
Results and Takeaways
This project is continuously changing to optimize the functionality such as the search functionality, editor feature (adding, removing, moving, and renaming items), and charts as our data scientists keep improving on the accuracy of the data and determining what to show. I do believe that design is a constant iteration of improving the experience for the user.
• (Worrying too much about the details.) In a startup, there is only so much time and effort that you can invest. I made the mistake of worrying about the look of the UI. Taking a step back and communicating with the team helped me to reprioritize the important stuff.
• (Constant communication with the engineers.) This helps to reduce any rework and having an understanding of the technical limitations will help strategize your designs. Sometimes, there will be some inaccuracy or missing components in the implementation, which is why it is best to explain the design handoffs before the implementation day.