Grokker iOS App: On-boarding and Upgrade

Problem

Grokker was planning on releasing their first version of the iPhone app. I was brought into think of a new design approach to on-boarding a new user. The previous version did not provide the user a good reason to sign up or register. This new approach gives a user a sense of Grokker before we ask them to sign up. 

In addition to changing the on-boarding experience, we were also launching our first version of in app payment using apple pay. The previous version allowed users to sign up to have full access to all the video content. Our approach to payments was we first to figured out the right pricing model on the web. We tested two ideas free trial and a freemium credit based model. We figured out that the credit base model was a better option for the business. We then needed to implement it in our iOS app experience.

Process

Onboarding

The product manager had an idea of how he imagined the flow for the sign up flow. We quickly sketched it out on a whiteboard and went straight into design.

Upgrade

When we started work on the path for users to upgrade the challenge was not just offering payments, but also informing users that the there is credits associated with viewing videos. The product manager first took a stab on what components needed to be part of the project. 

Prototype Wires

I took the wires and used InVision to test out the flow in a prototype and realized there were gaps in the user flow and how users were informed of their credits. I built placeholder screens to convey what areas were problematic. We quickly iterated  how we needed to adjust on the deliverables and figure out the right transitions to each of the screens. The blue screens were what gaps were missing in the user flow. By doing this, were also able to simplify the design and reuse the structure of the design in other areas with minor text changes. 

Final Design 

Once we agreed on the wires, I took those design into final mocks and placed those back into InVision. 

Here is the final prototype of the on-boarding and the payment process together. 

http://invis.io/Y21ZZX4GZ