Ticker is a stocks portfolio manager across mobile and desktop platforms. With Ticker, users can easily manage multiple portfolios with beautiful charts, graphs and detailed P&L. Users can also monitor their favourite stocks, and get stock price notifications.
App Flow & Wireframe
As mentioned in above introduction, we have 3 key (and other minor) first-level functions. For watch lists and alerts, the flow is relatively simple and clear: they are just lists, items and item controls, that's it.
However, for portfolio, the most essential function in Ticker, structure is a little complex than others. There're 3 levels in this function: portfolio, stocks, and transactions. In a portfolio, it contains various stocks; and in a stock, it contains corresponding transactions. During the wireframe stage, we were trying to re-arrange the relationships between screens, to make this part easier for users to understand.
User Interface Design
Based on the wireframe above, we started the UI design. As mentioned in previous section, our goal is to carefully arrange the information in the screens. All we wanna achieve is clean, simple and clear interfaces that express professional feelings. Therefore, we 1) increase the gap between elements a little bit for more "breath area"; 2) use highlight colors to emphasise key numbers, and use proper grey-scale colors and font sizes to show clear hierarchy; 3) use appropriate graphs and charts.
We also provide 2 sets of color theme: light and dark. And it's up to users' choice.
Although we start UI design for iOS, for Android users, definitely we aren't just simply copy all the styles and layouts from iOS. Because we know that, system natures, design languages, user habits and interactions do vary a lot between iOS and Android. In this case, we had several adjustments on the layout and structure. Besides aligning to Material Design language (like navigation bars, tab bars, etc), we also added a floating action button in some views, trying to provide a more Android-native experience.
Onboarding & Tutorial Screens
Actually Ticker did have an onboarding screen before this redesign. The problem is that, Ticker just used captured real screens as introductions. Nearly everyone nowadays just have a glance and then quickly swipe away the introduction screens, so if users cannot get your message at once, you fail. This time, we carefully re-organized the messages we wanna deliver, and just use simple shapes to illustrate our messages.
What's more, for portfolio, the most essential function in the app, we also added 3 tutorial screens when user enter this function for the first time. There's only one goal: make sure users know that Ticker is calculating the portfolios by transactions – and they are editable. There are various ways that stock portfolio apps can manage a portfolio, so we should make sure users know Ticker's.
Style Guidelines
Visual style guides define the fundamental theme and structure of the interface. These include typography, visual hierarchy, color palette, iconography and animations.
Specifications
Providing a specification document for app developers is always an important procedure. Clear and completed specs that communicates interface layouts and interaction behaviors do help a lot to the efficiency and accuracy of development.
User Feedbacks
User Interface: Clear, Simple, Friendly
Most comments and feedbacks on AppStore and Google Play show that: users appreciate the clarity and simplicity of the UI design, which allow them to quickly get useful information they need.
Usage Rate & Registration Rate: A Huge Boost
We launched the version with onboarding and tutorial screens in mid-December 2016, and then we kept tracking on several indication numbers from user data. As shown below – after more than 4 months' tracking (January to April 2017), we compared several statistics to 4 months (August to November 2016) before launching. From the result we could absolutely draw a conclusion: launching the onboarding tutorial screens do significantly boost the usage rate and registration rate.
Phase 2: More Design Items across Platforms
TickerAsia Website
For TickerAsia (Hong Kong) users, they can also manage their portfolios and access other full functions on web platform. I'm responsible for the entire website structure and UI design, and participated in parts of front-end HTML/CSS implementations.
Facebook Page: Daily "Market Movers" Posts
TickerAsia (Hong Kong) is also running a Facebook page that frequently posts market news, and daily statistic summaries. However, manually outputting daily summary images for various report types is a huge effort and costs time. Therefore, a daily post generator that handles all possible contents is set up. And I'm responsible for the layout design and CSS styling.
Ticker Project Team –
Project Coordinator: Victor Lam
iOS & Android App Development: Victor Lam
Website Front-end Development: Charles Ma
Back-end Server Development: Jove Tsui
UI & UX Design: Theodore Tsai
Technical Support: Kim Lam
Project Coordinator: Victor Lam
iOS & Android App Development: Victor Lam
Website Front-end Development: Charles Ma
Back-end Server Development: Jove Tsui
UI & UX Design: Theodore Tsai
Technical Support: Kim Lam
