UX + UI DESIGN | SparkFin
As the lead UX/UI designer, I analyzed existing design problems, proposed design solutions, & developed new features on the SparkFin mobile app & responsive website.
My design process included conducting user research & interviews, proposing new design solutions, developing user flow maps & wireframes, creating interactive prototypes for user testing, & preparing final UIs for developers.
SparkFin was a stock market platform to watch stocks, follow market experts' recommendations, and discover new stock ideas curated by experts. A new feature would allow users to buy partial shares of stocks. SparkFin was available on iOS and website.
SparkFin was acquired in February 2017.The photo below was taken when SparkFin app was featured on the Nasaq Tower in 2017.
User Journey Mapping
Design Challenge- Buy Partial Shares of Stocks (New Feature)
Keep check-out process quick, easy, and clear so that users are engaged throughout the process.
Presentation of legal terms and collection of tax-related information are required to invest in the U.S. stock market. These form-filling items can deter users and cause high drop-off rate.
User Flow of Buying and Selling Model
Initial Sketches of Check-out Process
Wireframes of Check-out Process
Mocks of Check-out Process
Design Challenge- Existing Login/Sign-up
Existing sign-up flow is one-directional and does not allow users to explore the app before signing up.
Increase sign-ups by reducing friction (only ask information we absolutely need).
Added 'Guest mode' for new users to explore the app without signing up.
Created onboarding guides so new users can see the values of the app and what they can accomplish with it.
Implemented social network login options for quick sign-up.
: Week one user retention rate increased by over 25%.
Design Challenge- Stock Details
[Before] Stock details page open as a pop-up with no visual guide to navigate within the page. Major functions are controlled by 4 directional gestures, requiring high memory load from users. Also, the data presented is not listed according to the importance of the data.
[After] Major functions are visually displayed for easy navigation. Stock data is listed in order of importance. Stock details view expands from the list view to keep navigation predictable & simple.
Mocks of Stock Details Webpage
Design Challenge- Discover Tab
Discover is where users find stocks to invest.
[Before] From user interviews, we found that users assumed each list represents a news article. When they opened the grid, they were confused to see a list of stocks without context.
Also, each grid focuses on images rather than titles, but the images look generic & out of context. Users automatically flagged these content as stock photos for ads.
[After] Stock discovery becomes data-driven showing stock list performance data and top stocks, not image-centric. Top stocks in list are displayd to peak users' interest.
Design Challenge- Existing Social Network Sharing
Currently, when users share a stock or a list, SparkFin automatically generates a snapshot of the stock/list at the time. However, these images are cropped and difficult to read when shared in social media platforms.
Users tap shared links to be directed to the SparkFin web app stock/list pages. But those pages have inconsistent layout than the shared images and they have overwhemling amount of information.
New Design on Social Network Sharing Images/Links
New stock/list images take into account of the automatic image cropping when shared on social media platform to ensure the images are legible.
List images include list performance and top stocks in list to peak users' interests.
The shared links direct to new web app pages that provide more context to the stock/list.