My expertise is UX design for web & mobile products. One of my top priorities when I design is to enhance user experiences and functionality of a product by creating intuitive, meaningful, and elegant design solutions. I analyze user needs and create aesthetically rich user interfaces for mobile applications and websites.

I also have professional experiences in front-end development. I designed and coded this responsive website using HTML5, CSS3, jQuery, and Bootstrap. The selected works in this website include projects in web & mobile design, graphic and print design, architecture, and short animation.

I enjoy learning new tools and skills. I am easy going, detail-oriented, and passionate about my works. Art and design has always been my passion. When I am not working on digital designs, I enjoy making ceramics and jewelry pieces for fun.
UX METHOD
Ethnographic research, User interview, Competitive analysis, Persona & scenario, Journey mapping, Interface prototyping, Usability testing, A/B testing, Interaction flow map
-
SOFTWARE
Sketch, Adobe XD, Photoshop, Illustrator, InDesign, Dreamweaver, After Effects, Axure, InVision/Marvel
-
PROGRAMMING
HTML5, CSS3, jQuery (basic), Bootstrap (basic), Responsive design, Adaptive design
-
3D MODELING
AutoCAD, Luxology Modo, Rhino/V-Ray, SketchUp, 3D Printing CAD/CAM
Let's connect and share our stories!
You can contact me at info@maricelachan.com
Maricela Chan Design

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).




  • New Login/Sign-up


  • 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.

  • Results: 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.