Walkthrough of fully interactive prototype

In this case study, I’m going to tell you how I designed a wallet app for Crypto coin called XUEZ. Also, I’ll be explaining how I leveraged advance features of UXPin in order to give almost realistic experience with prototype prior to development, which helped stakeholders to take fast and accurate decisions. I also got featured on UXPin’s global showcase platform for this prototype. Check out: https://showcase.uxpin.com/sign-up-form-for-crypto-app/

Project name: Mobile app for Crypto-coin with wallet and community modules

Company name: XUEZ coin ( https://xuezcoin.com/)

Live project: http://bit.ly/xuez (UXPin prototype)

The splash screen of an app

Brainstorming

I have scheduled multiple Zoom conference calls for initial brainstorming and problem understanding. To begin with, I made paper-flow and concluded the 4 major modules of the app.

Wallet

Bounty

Cards

Profile

Mocking the Signup flow

The stakeholders wanted detailed yet interesting sign-up flow for onboarding the user for the first time. So I’ve come up with unique indication in the title which would sub-consciously remind the user where exactly they are. I always believed that,

“Mico-interactions are the backbone of interface design. It’s not visible but if it’s not there user will definitely miss it.”

Shot showcasing micro-interactions of the progressive Signup flow

Interactive prototype with real-time interactions

With the help of UXPin’s advanced features like interactive state, variable, dynamic inputs and conditional interactions I crafted out the prototype with interactions just like the real app would have. They experienced the prototype in UXPin’ mirror app and provided feedback instantly.

Signup flow part 1: Email and Password

I’ve imitated email and password validation in the prototype. If you pass the test then only you can go to next! Also, I defined the input type as email and password respectively for the fields so it uses the native android keyboard(in the UXPin mirror app) to take input.

Here you can notice, by using variables feature of UXPin I mocked show/hide password interaction.

Stage by stage shots of Sign-up flow part:1

Signup flow part 2: Phone and OTP

I’ve imitated phone number validation(should be 10 digits) in the prototype. I defined the input type as a number for the phone-field so it uses the native android keyboard(in the UXPin mirror app) to take input.

Here you can notice, by using variables feature of UXPin I took phone number to another screen for a realistic experience.

Stage by stage shots of Sign-up flow part:2(Phone)

Stage by stage shots of Sign-up flow part:2(OTP)

Signup flow part 3: Profile and Fingerprint

I’ve imitated phone number validation(should be 10 digits) in the prototype. I defined the input type as a date for the birthday-field so it uses the native android keyboard(in the UXPin mirror app) to take input.

Here you can notice, by using variables feature of UXPin I took a name from the user and suggested ‘username’ in real-time.

Stage by stage shots of Sign-up flow part:3

Internal screens of the app

Wallet screen of the app

The stakeholders wanted something ‘young’ element in a design.

Bounty boards screen of the app

This is the suggested bounty from a company which would work as a “Job-board” and encourage the payment system via their cryptocurrency.

Gift cards screen of the app

This app would showcase promotional balance in the form of Gift cards.