Sign up Function | Fotoup
UX Design Research / Done in: 2016 / Part of Fotoup Projects
Project Overview
The Client
Signup for Fotoup, Photography social network startup
Visit here for detailed Fotoup website UX structure & research
The Challenge
Getting as much info as possible to identify and categorize the user based on skills and industry interests
Outcome
A series of interactive wizard pages were designed based on feedback and surveys of target group and the info we needed to gather in the signup process
Roles:
Lead UX Designer (research, interaction design, visual design)
Responsible for redesign, animation, wire frames, prototyping, discovery and ideation, user research, interaction design input
Personas
Persona Creation
here we categorized our target users by tags and made it possible for them to identify themselves in about 10 clicks.
I used all of the qualitative data i gathered during the research process to create a main centric target persona. Since Fotoup is a multi-sided-sided service, meaning it is used by more than one user type donors and recipients, I wanted to capture reflection of all types of users through my main persona. I found that donors and recipients have different needs and motivations.
In this case “Photographer” lets call him John, is the target while how he gets approached and contacted and how he contacts other lower priority targets is determined by John’s behaiviors.
Design Process
A high-level list of app features was created to further define and guide the vision for the product. Prioritizing the features with supporting research created a clear order of execution.
Interaction Design
I completed a task flow and user flow to imagine the ways a user might /should navigate through the signup wizard using the feature to achieve their goals we implemented.
I created a site map of the pages and service that incorporated the features I designed.
Wireframes: Low & Mid Fidelity
I began the process of wireframing with sketches and considering some precedents in our studies to use user knowledge and make it more intuitive. During this process, I thought about how the layout and content could be structured to satisfy user and business goals in a technically feasible way. The sketches I chose served as a guide for my digital wireframes and then the prototypes.
Colors and Branding
Next, I created a UI Kit, a comprehensive collection of all components and UI patterns used on the platform. I used branding guidelines of the graphics the platform already had as the starting point and added components such as buttons and navigations bars as well as new icons I had created for the social feature.
Why The Wizard?
Maybe the most important part of user encounter with a service is the introduction. In case of the fotoup project the main part of the intro we chose to be the sign up. For may reasons that was mentioned in the main Fotoup website structure research section. In summery the sign up was chose to be designed in a way to both gather as much info while letting user know how things work in fotoup. Our goals were as follows:
- Introduction to credit system
- Intro to photo upload
- Intro to tagging and skills
- Intro to filling resume
- Gathering the skills and categories
- Gathering the personal info
- Not annoying the user
- Login function, available in all pages.
- Signup button also available in all pages in case of not being a member.
Here is how the wizard works
App Version
Minimal in effort maximal in gathering essential info
All the 5 main pages of the intro/signup wizard gathers important info while introducing basic fotoup functions and futures to the new user.
- The first Page, is both introducing the pointing and credit system while getting the signup started.
- The second Page, Introduces the tagging system, intro to credit system and gathering more but less important essential info.
- The third page, is to introduce an gather info about the skills of the new user.
- The fourth page, is to get more info on the level of the user and more and again less important info by filling out manual resume section.
- The fifth page, guides the user to invite or connect to his/her connections in fotoup or outside fotoup. and then send him/her to the upload page.
First Page
Second Page
Third Page
Fourth Page
Fifth Page
The Stats
Based on our observation we had at the first two phases using this system. The following happened.
- 10% of the users left from the second page, mostly to upload a photo.
- 38% left on the 4th page, again to upload a photo.
- 62% of the users went to the end and uploaded their first photo by the wizard link.
- 12% did go to the end and also invited friends.
We purposefully put the skip button to let all the users in rush or any body that feels annoyed, could go to their profile and get out of the wizard. But getting more than 60% of the users to the last page and get all the essential info we wanted were very successful.
