Digestible News for Traders
Curating essential updates to complement user strategies.
2023 | Nansen
Time frame: 1 week
My roles: Researcher, UX, and UI designer
Disclaimer: The visual language could not be changed completely as we had to stay as much within the company's design system as possible and maintain visual coherence with other platform jobs.
Contextualizing
Design Challange
As a product designer candidate, I received a task to incorporate a new feature into Nansen’s platform for mobile and desktop in a way that was usable and valuable to users and present my design process.
Issue
Users were not only using Nansen. They were also reading market news from other sources.
How
Design a news digest section that will complement the data the traders are looking at on the dashboard.
Nansen
Nansen is an analytics platform for blockchain, which combines on-chain data with a massive and constantly growing database containing millions of wallet labels.
Comparative Analysis
Competitor Analysis Overview
Analyzing how competing products address similar challenges is crucial. Here’s a brief overview of what I found:
Tip Ranks
-
Utilizes card-based UI for varied business and investment data.
-
Offers internal navigation on cards and side-scrolling on mobile for additional content layers.
-
Features top-fixed and scroll-triggered bottom menus for navigation ease.
-
Allows in-article quote searches and displays related news via a side menu for continuous reading without backtracking.
Yahoo Finance
-
Presents information through diverse card templates; each news card includes an image.
-
Segments news by type, time, and author, with consistent card structures on mobile.
-
Provides related articles in a right-side menu; exit options are limited to a close button or browser back function.
-
Supports in-article quote searches and returns users to the previous page upon closing an article.
Independent
-
Offers a homepage with varied news hierarchies; however, the menu is text-heavy and complex.
-
Cards differ significantly on mobile in size and content, lacking a fixed top menu which affects navigation fluidity.
-
Non-fixed top menu while scrolling within an article; suggests next reads and other news by topic or chronology in a side menu.
Be in Crypto
-
Delivers the cleanest interface with easy navigation; site dedicated to news filtered by blockchain.
-
Features large images with succinct titles on cards, keeping mobile and desktop navigation uncluttered.
-
Suggests recent and related articles in a side menu; navigation back is through the browser or by selecting another article.
Flow
For the current flow we want the user, instead of leaving the platform when he wants to consume news, to stay inside Nansen. Also, when inside a Dasboard, we want to show news related to that data.
Wireframing
Once I had concluded all the stages of the research process, I proceeded to ideate and wireframing
First I did simple sketches in order to explore ideas and unblock my creation process. I used the current platform as base and considered its features to think about ideas for navigation, positioning, behaviours, etc.
In a real project with access to users I would sketch a prototype so I could test to help me choose the best solution. For this challenge I considered most the other platforms and sites references and some assumptions.
Mockups
My next step was to start my mocks. At this stage I first design following the wireframes but I like to test ideas and usually I try different arrangements, think about interactions, etc. It’s not always linear for me.
Final screens
Featured are the final designs, the result of a comprehensive design challenge journey. Accompanying these are visual examples of interactions, representing the collaborative potential and detail that would be further fleshed out in partnership with developers in an ideal scenario.
Next Steps & Considerations
Reflecting on Next Steps
My intended next steps would have involved thorough testing to validate critical design decisions such as mobile navigation placement, save options, and news categories through methods like A/B and think-aloud tests, using interactive prototypes in Figma.
Following these tests, iterations would have been made, incorporating additional rounds of testing to refine the design. It would have been crucial to involve developers to assess the technical feasibility of my concepts.
Key Considerations
Accessibility was a priority; initial designs showed promising contrast, yet a comprehensive review of usability for individuals with disabilities was planned. I would have needed to ensure that navigation and real-time reading were accessible to all users, possibly involving conversations with users fitting this profile.
I briefly examined content responsiveness across various screen sizes, preparing to align my designs with existing standards, pending further confirmation.
The necessity and placement of a save option were to be examined through user testing, contemplating its integration within the user's profile area.
I also considered the value of allowing users to customize their news feed, such as prioritizing specific topics like a Gas tracker on the homepage, with settings adjustments provided for personalization.
Lastly, the idea of a dedicated news page accessible from the main navigation menu was proposed, to cater directly to users seeking a focused news experience, sorted by categories and dashboards.
Learnings
This project was a milestone in affirming my ability to implement a design process in new territory. It sharpened my research capabilities and underscored the need for organization when dealing with complex subjects. The opportunity at Nansen emerged as a result, validating the effectiveness of my approach and inspiring continued use of these strategies.
Limited by time and resources, certain aspects weren't as polished, yet the user feedback was overwhelmingly affirming. It highlighted that a well-executed design process can deeply resonate with users and elevate their product experience.