Sign up Experience

LOHP + Sign up flow + LIHP

Background:
Currently, users have to overcome many blocks to become Shutterstock contributors. Once they successfully become the contributors, there is no guidance on how to be successful or improve one’s work. Since the business model depends on having many successful contributors submitting quality content, the contributor team at Shutterstock wanted to redesign part of the Shutterstock site to improve contributors sign up rate as well as help new contributors successfully upload their works and make money.

Role:
As the UX researcher and designer, I lead the project from the beginning to the end. My responsibilities included research planning, research facilitation, problem identification, timeline planning, creating the user flow, working on wireframe, presenting to stakeholders, overseeing UI designers and communicating with developers.

What did we do and how:
The project started out with the goal of redesigning the contributor logged-in homepage dashboard. However, through initial research and meetings with stakeholders, I identified the key focus needed to be on new contributors. The seasoned users will continue to be successful without any help, but the new contributors had nothing to help them.

Facilitating pre-mortem
The project started with a meeting with the stakeholders, engineers and designers to think about what could go wrong if we introduced the new logged in homepage design.

Ctrb_LIHP_premotem

Facilitating design studio
The core members (designers, engineers, stakeholders) got together to brainstorm and sketch the future of the logged-in homepage. After the design studio, I gathered all the sketches and created a summary document to compile and group different ideas.

09.30.2015 Ctrb LIHP Design Studio Summary (1)

09.30.2015 Ctrb LIHP Design Studio Summary (2)

Flow diagram and information architecture
The contributor team worked on the logged-in homepage design, but realized that there are many users that have very different needs. The team decided to prioritize on the new contributors. I helped to create multiple user flows to demonstrate the pain points in the process and how we are looking to change the flow. The flow also revealed to the team that this project is made of multiple parts: logged-out homepage, sign-up screens, logged-in homepage and content uploader. Through this exercise, we decided to introduce logged-in homepage earlier in the process and using it to provide more information to the contributors.

20151217_LIHP+CE Research Report

 

Before and after: first time experience for contributors

Before and after: first time experience for contributors

First time contributor logged in homepage information architecture

LIHP: information architecture for the first time contributor

 

Ctrb_LIHP_lowfid_wireframe_v1

Information focused wireframe to hand off to UI/UX designer

contributor_LIHP_rd1c

Logged-in homepage design for user testing

User testing round 01
For the first round user testing session we focused on understanding what information the first time contributors want to see at each step. During the research we covered logged-out homepage design, sign-up flow, content uploader and logged-in homepage. We worked with people who had never tried to become Shutterstock contributors before and used cut out paper prototype to mimic the real sign up situation and asked questions along the way.

20151217_LIHP+CE Research Report (2)

20151217_LIHP+CE Research Report (3)

After the research I presented to the stakeholders and engineers our findings and re-worked the new information architecture for the logged-in homepage.

20151218_Ctrl LIHP Information Flow - LIHP info flow v1 (Update)

Updated information architecture based on user testing round 1

User testing round 02
During the second round of testing, the team focused on how to incorporate the education in the logged-in homepage and also testing the new sign-up screens that match the new process flow.

Screens we tested for the round 02 of user testing

Screens used for user testing round 2

After the user test, the users felt overwhelmed by the information we provided on the logged-in homepage, so the designers got together to brainstorm different ways to group the information.

Using paper prototype to group information together

Using paper prototype to group information together

User testing round 03
From the user tests before, we understood that many users wanted the information before signing up. From that feedback, we introduced logged-out homepage design for this testing. We also tested new design of the logged-in homepage.

Final logged in homepage design

Final logged-in homepage design

After all the user testing we incorporated the feedback into our design. The other UX designers on my team worked on delivering final logged-in homepage design to the engineers and I worked on delivering final sign-up screens to the engineers. During this process, there are many meetings with business team, engineering team and designers to finalize the design that will be implemented.