More Related Content
Similar to CSF - UX iOS (20)
More from Sandeep Supal (20)
CSF - UX iOS
- 1. Private & Confidential © RJIL-mHood 1
mHood
JioSettings- iOS
UX - Version 1.0
UX Designer - Sandeep Supal
Date - 20 November 2014
PS * marked are additional recommendations
- 2. JioSettings Main Screen
Private & Confidential © RJIL-mHood 2
AT&T 11:56 AM
JioSettings
Jio Apps
Help
UX Recommendation:
1) My Account - Will open logged in ac-
count, profile screen. If the user is logged
out of all the accounts, then My Account
should redirect the user to the Manage Jio
Account Screen.
2) JioSettings is a menu option available
across Jio apps which can be designed as
hamburger menu, list menu or bottom bar
menu. Its recommended to follow a consis-
tent design style accross Jio apps with
Hamburger menu is most widely used UI
element for access menus.
* Jio Apps will open List view UI with rat-
ings, descriptions or reviews.
This screen is currently not targetted for
Dec release.
Check for Updates
Invite a Friend
Feedback
FAQs
About
Hello Jim Smith
Home
My Account
mZone Settings
JioSettings
Release 1.4.10© 2014
Shake to send Feedback
Show me as annonymous
Location
JioWorld Hamburger Menu
- 3. AT&T 11:56 AM
My Account
Jio Account Screen
Private & Confidential © RJIL-mHood 3
Jim Smith
jimsmith123
Log Out
Edit Profile
Change Password
UX Recommendation:
1) Log out goes at top right and has a consi-
tent position throughout the application.
* Need to be done as same for Login
2) Use of native app functionality to edit
photo, ie. by taking the picture or accessing
the gallery.
3) Edit Profile and Change Password are but-
tons that will open up a new secondary level
screen.
4) No Edit icon on the image. User can tap
the image to edit.
*Hamburger Menu or
to exist at the top left, depending on from
where the user comes to the app screen.
* For certain scenarios one can use the
following guidelines to tigger CSF screen:
Slide Up the screen from the bottom of the UI
no matter from whichever UI element the user
has used to trigger this screen. This screen
needs to have a Close button on the Top bar
tapping on which the screen should slide down.
Back
- 4. AT&T 11:56 AM
Report an Issue
Feedback UI
Private & Confidential © RJIL-mHood 4
Is this issue reproducible?
Your Feedback will help us to serve you better.
Tell us all about it
General Feedback
Share an Idea
Your Feedback will help us to serve you better.
Tell us all about it
Your Feedback will help us to serve you better.
Tell us all about it
Always Sometimes
Subject
Subject
jimsmith123
jimsmith123
jimsmith123
Subject
Now you can shake your Phone to send
us your feedback!
Feedback
General Feedback
Report an Issue
Share an Idea
JioWorld Hamburger Menu
General Feedback
Share an idea
Report an issue
Feedback
Scenario 1 - Feedback in Hamburger Menu
Scenario 2 - Feedback as independent screen on Jio apps
Back
Note:
Your Feedback, System information and Jio Account
details will be sent to Reliance Jio team. See Reliance Jio’s
Privacy Policy and Terms of Service.
Jio ID is pre-populated field which should be a
non-editable entity.
A display only information. System info, Privacy
policy and ToS will be displayed in Pop-up.
- 5. App Center
Private & Confidential © RJIL-mHood 5
AT&T 11:56 AM
JioWorld
12
Jio Social Jio Drive Jio Beats
Jio Magazine Jio Friends Jio Experience
Reliance Jio offers the best in class apps for everyone.
* UX Recommendation:
1) Independent screen with some market-
ing message for the app center.
* App center can be represented as List
View within Jio Apps under Jio Settings as
shown below
Used for showing more information
mZone Apps
Jio Social
Reliance Jio Get
Jio Beats
Relaince Jio Get
Jio Drive
Reliance Jio Update
Jio Friends
Relaince Jio Open
3rd Party App
Publisher Name Get
Jio social is a social networking app that lets you connect with
your Jio Friends and groups.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco
Show Less
- 6. Account Change UI
Private & Confidential © RJIL-mHood 6
AT&T 11:56 AM
Select Jio Accounts
Save
Sunita Srivastava
sunita@jioworld123
Add Jio Account
Ajit Vishwakarma
ajit@jioworld123
Remove
Jim Smith
jimsmith@123
UX Recommendation:
1) After the user logs out of an account
(s)he will land up on the Manage Jio Ac-
counts screen.
2) Last logged in account will be displayed
at the top. We can show it with a subtle
different shade to depict recency.
3) Deleting an account, happens through
swiping action. Confirmation message -
Sunita Srivastava
sunita@jioworld123
Add Jio Account
Ajit Vishwakarma
ajit@jioworld123
Jim Smith
jimsmith123
OK
You already have reached the limit of adding
5 Jio Accounts. To add a new account
you need to remove one of the existing account.
Oops!
Message when user wants to create the 6th Jio account.
Cancel
You account will be removed from
this list and you will be logged out
from other Jio Apps with this account.
Confirm
Remove
- 7. Edit Profile
Task Flow Diagram
Private & Confidential © RJIL-mHood 1
My Account Change Password
Enter CodeEdit Profile Verify Enter CodeEdit Profile Verify
My Account Save
Enter your old password
Enter your new password
Confirm password
Change the password for jimsmith123:
JioWorld
Jim Smith
jimsmith123
Edit Profile
Change Password
Jim Smith
jimsmith123
-
Email+
My Account My Account
UX Recommendation:
1) Native Contact apps behavior for adding/editing
mobile and email. There is not functionality to edit the
label names.
2) On clicking Verify Row, activation code should be
sent by the system. Verification process via mobile or
email, needs to take place through independent confir-
mation screens shown below.
3) Jio ID is a non-editable field.
Mobile
-
Verify
+91 9966882277
Mobile +91 9966882277
add mobile+
Verify
jim.smith@gmail.com
add email+
Save
Enter old password
Enter new password
Confirm password
Change the password for jimsmith123:
Cancel
Use Touch ID
Detecting your finger touch...
Cancel
Enter Device Passcode
8857
Register for Jio ID
jimsmith123
Password
Log In
Having trouble logging in?
Don’t have Jio account yet?
Close
Note: Your Mobile Number will be verified before it is
displayed to your Profile
Enter the 6 digit code here Enter the 6 digit code here
Note: Your Email Address will be verified before it is
displayed to your Profile
Resend Activation Code
Activation Code is sent on your Mobile Activation Code is sent on your Email
Verifying activation code..
Please wait
OK
The entered activation code
does not match!
Oops!
OK
Your mobile number 9966882277 has been
successfully verified.
Congrats!
UX Recommendation:
1) Validation and Error states need to have comprehen-
sive information about the verification process with user
details to aid communication.
2) For resending the code, display the 1st screen with -
‘Resending activation code...’ which concludes with
message -
‘New activation code has been re-sent to your mobile
number - 9XXX XXX XXX. You have to re-enter the new
code to verify further.’
My Account Save
Enter your old password
Enter your new password
Confirm password
Change the password for jimsmith123:
Cancel
You just shook your device!
Now you can send us a Feedback by shaking
your device. Your Feedback and suggestion
help us improve Jio Experience.
To disable this gesture go to Setting.
Send Feedback
General Feedback
Your Feedback will help us to serve you better.
Enter your Jio ID or Email
Subject
Now you can shake your Phone to send
us your feedback!
UX Recommendation:
1) User can shake the phone from any screen of the Jio
Application except for the Feedback screens to access
the PopUp.
2) On clicking Send Feedback, user will be redirected to
the General Feedback Screen with Cancel buttoon on
top left.
Close
UX Recommendation:
1) * we can place the log in at the top right to maintain
the consistency in placement of log in and log out.
Log Out
Resend Activation Code
Note:
Your Feedback, System information and Jio Account
details will be sent to Reliance Jio team. See Reliance Jio’s
Privacy Policy and Terms of Service.
Select User Select User
Login using different user leads to a
confirmation screen as shown above.
On continuing the user will be taken to
the Log In screen.
Jim Smith
jimsmith123
Log in as a different user
Jim Smith
jimsmith123
Log in as a different user
Cancel
If you log in as a different user,
the new user credentials will be used
across all Jio Applications. This may change
your Jio Application Experience !
Warning!
Continue
When user is on Single Sign On mode,
the application will ask the user to
select login preference.
Select User
Jim Smith
jimsmith123
Log in as a different user
Cancel
Please authenticate yourself to login into
Jim Smith’s Jio Account
Use Touch ID
Enter Device Passcode
Use Jio ID
If user continues to log in with existing
Jio Account, then (s)he needs to au-
thenticate via methods shown above.
Tell us all about it
Cancel
Use Touch ID
Press in your finger for detecting Touch ID
Cancel
Enter Device Passcode
Save Save