← Back to portfolio
Published on

FanFiction App Onboarding in Figma

Introduction

  • Overview – Fanficion.net is a fictional story archive where writers and readers unite.
  • Challenge – The challenge was to perform preliminary research and improve the app's onboarding process.
  • Approach – I performed app research on statistics to reveal general weaknesses in onboarding experiences and prototyped a wireframe of suggested changes.
  • Results – The end product is an updated design and new copy for a better flowing onboarding experience.


User Onboarding

The user onboarding experience is the first user experience a person has when they download your product and use it for the first time. In creating the app onboarding procedure, I focused my attention on incorporating FanFiction's branding and identity, a user's language, easy steps, and kept the keep actions simple.

Fanfiction.net was a great example of poor user onboarding. Since visitors on mobile devices are used to quick clicks, scrolls, and swipes, the initial "start" on the first-page didn't help indicate much information. It brings all users to the sign in page whether a user is new or not. From the sign up page, they incorporate another language besides English that isn't seen anywhere else. Once a user signs up or signs in, the dashboard is void of personalized information.

The Process and Results

I began with low-fidelity wireframes and user-research centered around facts, statistics, and app popularity. From here, I began working in Figma creating high-fidelity wireframes with interactivity.

To improve the onboarding experience, I created simple, action-oriented steps with clear language. Right from the beginning, I wanted the user to make a choice and get personalized pages tailored to them.

Next Steps

Based on the research that was conducted, these are my recommended changes:

  • Allow users to pull credentials from social logins to simplify process
  • Inspire content discovery which also allows for personalization
  • Create a clear path forward
  • Add personality and a branding identity