Issuu on Google+

[Gym Pics] | UX DESIGN

Draft Layout and Navigation Hierarchies for [GYM PICS] Modified Date

27 July 2012

File Name

Gym Pics mobile app proposal

Description

Draft Sitemap and Wireframes

Version History

1.0


[GYM PICS] application map

[Gym Pics] | UX DESIGN

Proposed Application Map - Top level:

1. TOP LEVEL MAP FOR GYM PICS 0.0

1.0

SPLASH SCREEN

MY GYM PICS [LANDING] 0.1

1.1

1.2

1.3

1.4

1.5

LOGIN SCREEN

SELECTED: [PROFILE]

CAMERA

PHOTO LIBRARY / BROWSE

GRAPHS

SLIDE SHOW

redirect

1.2.1

PROFILE DISTANCE/ANGLE

LAST PHOTO SNAPSHOT

1.3.1

1.4.1

VIEW PHOTO

WEIGHT GAIN/LOSS GRAPH

1.3.1.2 DELETE PHOTO 1.3.1.3

PHOTO: OPTIONS 1.2.2 TAKE PHOTOS

1.2.2.1 INPUT WEIGHT

SHARE/EXPORT

1.4.1.1 EXPORT AS IMAGE [EMAIL], [FB]

1.6 CHANGE WEIGHT MEASUREMENT

1.5.1 PHOTO PREVIEW VIEW: 4 WEEKS [FREE] VIEW: 12 WEEKS [BUY NOW] VIEW: UNLIMITED TIME STAMP [BUY NOW]

1.3.2

VIEW: OPTIONS

DELETE PHOTO

1.5.2 DATE , SLIDESHOW TIME, GRAPH & WEIGHT TO DISPLAY SELECTION

SETTINGS 1.6.1 PROFILE 1.6.1.1 CHANGE PASSWORD SWAP PROFILE SETTINGS 1.6.2

1.2.3 SAVE PHOTOS

SINGLE VIDEO VIEW

REDIRECT

CONSOLIDATED VIEW

1.5.3 VIEW 1.5.3.1 EXPORT SHOW [GOOGLE DRIVE], [DROPBOX]

NOTIFICATIONS 1.6.2.1 ADD 1.6.2.2 NOTIFICATION VIEW


[Gym Pics] | UX DESIGN

[GYM PICS] application proposal, wireframes Splash, Login Screen, My Gym Pics, Camera Flows 1.0

1.0

1.2

1.2.1

1.2.2

1.2.2.1

1.2.3

SPLASH SCREEN

MY GYM PICS

CAMERA

PHOTOS OPTIONS

TAKE PHOTOS

INPUT WEIGHT

TAKE PHOTOS

Gym Pics Logo

My Gym Pics

Back

11 Camera

Home

Camera

Photo Library

Remember to take photos from the same distance and angle as you did last time to ensure that you can see 1 the difference!

2 Slideshow

Settings

Profiles

2

Camera

lbs

120

YES

2 3

Save as My Settings

OK

OK

1

Cancel

Login

Login

3 Register

The Splash screen is the initial screen that will welcome the user when he taps the iHappiness app icon from the iOS’s home screen. The application will gather all the required information during this process including the daily tip for the day. The application will also check for any updates and bug fixes at this point.

Back

2

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

SPLASH SCREEN

Record Current Weight?

I have a good memory, don’t ask me again.

Keep me signed in

2

Camera

Back

Welcome First Time User

1

Loading...

Camera

Back

Graphs

Username:

Password:

Camera

2

Gym Pics Logo

1

Enter Weight

3

1

Logout

120

1 2

lbs

Save

1

LOGIN SCREEN

MY GYM PICS

CAMERA

PHOTO OPTIONS

TAKE PHOTOS

INPUT WEIGHT

SAVE PHOTOS

Showing a login screen where user can input the username & password to access “GYM PICS” Application. User can also click on “Register” link, this is a [TBD] option.

User arrives at the Settings screen, this is a default screen on login. User clicks “Camera”.

Camera screen lets the user to click pictures, this screen is showing the iPhone camera being accessed by GYM PICS app.

Even before the camera is loaded the auto pop-up shown in this screen tells the user about the previous photo taken from a certain distance/angle.

Once the user matches the co-ordinates shown on the previous screen, camera becomes ready to take photos.

For the First time user, the auto pup-up is displayed to record the current weight. The user has the option to save “Recording Options” in the “Settings” and only ipnut the weight or cancel, when a photo is clicked.

After saving the weight options the photo is saved and the visual thumbnail is shown on this screen. User can Tap on this thumbnail and blow up the image [TBD].

1 Username and Password needed for application

1 User Signed In profile identified.

1 Toolbaar showing “Home” to go back anytime.

1 Click the camera icon and takes the photo.

1 Auto pou-up to record the present weight, with an

1 Showing “Enter Weight” option after the user has

2 Quick access buttons - user clicks “Camera” and

2 Camera being loaded for the user to proceed to the

2 On yes textbox to input weight.

2 Showing the saved photo thumbnail. User can

access.

2 Clicks “Login” to move to the next screen 3 “Register” used case not defined.

moves to the next screen.

3 Click “Logout” to move back to the previous screen

next screen.

1 Pop-up reminder tell that the user should follow

same angle and distance to see the difference.

2 User can check the option show, to skip this step.

[TBD]

option to yes or no.

2 User saves the options selected to the settings.

saved the settings.

click and go to photo library only if the option to browse is enabled on the Settings. Otherwise only a numeric number will be shown, without the ability to browse photos.


[Gym Pics] | UX DESIGN

[GYM PICS] application proposal, wireframes Slideshow, New, Play, Export

1.0

1.5

MY GYM PICS

SLIDESHOW

My Gym Pics

Back

1.5.1

1.5.2

NEW SLIDESHOW

1 Slideshow

1

Back

SELECT

New...

Back

Select Time Period Photo Library

4 Weeks

Graphs

DISPLAY OPTIONS

Cancel

Date Apr 21-27

Camera

Select...

Apr 28-04

May 05-11

1.5.3

May 12-18

Free

Back

1 Display...

CONFIRMATION

Cancel

Back

1 Display...

VIEW

Cancel

Would you like to include a graph at the

Would you like to include a graph at the

end of the Slideshow ?

end of the Slideshow ?

1

YES

1

YES

2013

1

12 Week

Slideshow

Settings

Profiles

Time: 4 weeks Dates: Feb 01- Feb 28 2013 Transition: 3 Sec. Graph: No Weight: No

1

Unlimited

Export Slideshow

$1

$3

Buy Now

1

Logout

0.5 Sec

1 Sec

3 Sec

5 Sec

Slideshow images?

Slideshow images?

YES

120 lbs

1

YES

Creating a New Slideshow will delete the last created slideshow?

VIEW Slideshow is being played on the “Landscape mode”. Should we default this too? [TBD]

2

Create Slideshow

Cancel

New Slideshow

2 Sec

Would you like to display your weight on

Buy Now

Select Dates & Transition Time

Google Drive Login Dropbox

Slide Transition Period

Would you like to display your weight on

Add Display Options Delete

Create SlideshowDelete

Displays the weight of the user.

1

Cancel Create SlideshowDelete

1.5.3.1 EXPORT SLIDESHOW

Export Slideshow

MY GYM PICS

SLIDESHOW

NEW

SELECT

DISPLAY OPTIONS

CONFIRMATION

Google Drive

User arrives at the Settings screen, this is a default screen on login. User clicks “Slideshow”.

Showing a slideshow view where a user can play, export an already created slideshow. It also shows the settings attached to the slideshow. Only one slideshow can be saved.

This screen shows available slideshow options for the user to view and add images to. Free version is preselected by default and the paid require user action to buy them [NOT INCLUDED].

The screen show the date and slide transition time selection. By default the 4 week period is show starting from the present time. May be we can default all of these for quick selection.

Showing the display options to be added to the slideshow. Default these for quick selection.

Confirmation before the new slideshow replaces the old one.

Dropbox

1 On Click of Play the user is diverted to the 5th

1 If selected “Unlimited” user can upload their own

screen on the right.

2 Export buttons for exporting the slideshow. 3 “New Slideshow” diverts the user to the next

screen.

photos from the camera roll, into the slideshow.

2 User click “Select Dates & Transition Time” to pro-

ceed to the next screen.

1 User can click on the week buttons to add them to

selection, only 4 can be selected.

Facebook 1 User clicks “Create Slideshow” and is taken to the

1

Resume Slideshow

3rd screen on your left.

2 The previous next buttons to scroll between the

120 lbs

weeks.

Exit Slideshow

3 User taps to choose the transition time. 4 Add Display Options button takes user to the next

screen.

EXPORT SLIDESHOW

Exit Slideshow

Screen showing Export Slideshow pop-up which is initiated as the user taps on the running slideshow screen. 1

User Action buttons.


[Gym Pics] | UX DESIGN

[GYM PICS] application proposal, wireframes Slideshow, New, Play, Export

1.0

1.5

MY GYM PICS

SLIDESHOW

My Gym Pics

Back

1.5.1 NEW SLIDESHOW

1 Slideshow

1

Back

SELECT

New...

Back

Select Time Period Camera

Photo Library

Graphs

1 Settings

Profiles

Select...

Cancel

Apr 28-04

Select Start Date

Free

Time: 4 weeks Dates: Feb 01- Feb 28 2013 Transition: 3 Sec. Graph: No Weight: No

1

$1

Buy Now

May 05-11

1

May 12-18

$3

1

1 Sec

2 Sec

Buy Now 3 Sec

Export Slideshow

Select Dates & Transition Time

Google Drive Login Dropbox Logout

Slide Transition Period 0.5 Sec

Unlimited

Back

CONFIRMATION

Display... Date... 1 Start

Cancel

1

2013

Select End Date2013 12 Week

Slideshow

SEKECT DATE

Date Apr 21-27

4 Weeks

1.5.2

Back

1 Display...

ADD PHOTOS

Cancel

Would you like to include a graph at the

Sun

Mon

Tue

Wed

Thu

Fri

Sat

31

1

2

3

4

5

6

7

8

9

10 11 12 13

13 14 15 16 17 18 19 20 21 22 23 24 25 26

5 Sec

2

1

2

3

Cancel

Add Display Options Delete

3

Mar

Apr

May

2

Would you like to display your weight on

YES

YES

Create SlideshowDelete

NEW

SELECT

SELECT DATE

CONFIRMATION

User arrives at the Settings screen, this is a default screen on login. User clicks “Slideshow”.

Showing a slideshow view where a user can play, export an already created slideshow. It also shows the settings attached to the slideshow. Only one slideshow can be saved.

This screen shows available slideshow options for the user to view and add images to. The assumption on this page is that the user has baught the unlimited version. [Interaction not shown]

The screen show the date and slide transition time selection, this flexible date option is available for “Unlimited” option. 1

Showing the Calendar view for both the start and end date selection.

Confirmation before the new slideshow replaces the old one and a user can add photos from the camera roll. [Only visible for “Ulimited” option] else this will be the confirmation screen like 2nd from the right.

1 On Click of Play the user is diverted to the 5th

1 User selects “Unlimited” option, which diverts the

1 Change “Year” on the fly.

1 On Click of “Yes” the user if automatically diverted

2 Export buttons for exporting the slideshow. 3 “New Slideshow” diverts the user to the next

screen.

4

3

4

3

5

6

5

6

1

user to enter the payment details. [tbd]

2 User click “Select Dates & Transition Time” to proceed to the next screen.

3

User taps to choose the transition time. Add Display Options button takes user to the next screen.

2 Change “Month” on the fly.

Cancel

7

1 the Creating a New Slideshow will delete last created slideshow?

8

1

SLIDESHOW

User can click on Select Start and End Date to add

Display... Photos... 1 Add

2

Would You like to Select and add photos to

MY GYM PICS

2 the dates.

Back

1

Create Slideshow

2

New Slideshow

screen on the right.

Cancel

1

YES

the Slideshow from your camera roll?

27 28 29 30

Display... Photos... 1 Add

end of the Slideshow ?

Slideshow images?

2

Back

CONFIRMATION

to the next screen on the right. But if the selection is “No” then user can tap on the “Create Slideshow” button below.

Add and Create Slideshow Delete

2

ADD AND CREATE SLIDESHOW The user can toggle taps to select and unselect the photo(s). “Cancel” button on the top will undo all the actions and take the user back to previous screen, showing add photo option to default “No”. 1 Showing the selected photos. This displays the

photos taken by the App too. On selecting the photos it will put a number to the photos (1, 2, & 3 etc.) and hence this will be the order of display.

2 User Clicks “Add and Create Slideshow”.

Add andCancel Create Slideshow Delete

2

CONFRIMATION Confirmation before the new slideshow replaces the old one and takes the user to 1.5.3 on the previous page and the flow continues from there.


[Gym Pics] | UX DESIGN

[GYM PICS] application proposal, wireframes Slideshow, New, Play, Export

1.0

1.3

MY GYM PICS

PHOTO LIBRARY

My Gym Pics

PHOTO LIBRARY

1 Photo Library

Back

Back

1 Camera

Photo Library

Graphs

Slideshow

Settings

Profiles

DD-MM-YYY

DD-MM-YYY

DD-MM-YYY

DD-MM-YYY

DD-MM-YYY

DD-MM-YYY

1 Photo Library

Back Back

1.3.1

1.3.1.1

1.3.1.2

VIEW PHOTO

DELETE

SHARE

11of of27... 27...

27

DD-MM-YYY

Are you sure you permanently want to delete this photo?

DD-MM-YYY

Play

1

Delete

Back

Share

1 of 27...

Share...

Via Facebook

Don’t ask me again.

DD-MM-YYY

Login Logout

1 of 27...

via Email

Photos Taken DD-MM-YYY

1

Back

Play

Yes

Via Email

No

Cancel

DD-MM-YYY

Delete

Share

2

MY GYM PICS

PHOTO LIBRARY

PHOTO LIBRARY

VIEW

DELETE

SHARE

User arrives at the Settings screen, this is a default screen on login. User clicks “Photo Library”.

Showing the photo library screen, contains photo thumbnails and dates. The most recent being the first one. The user can either tap on the photo to go to 3rd screen on the right or else choose to “Play” as slides.

Showing no thumbnail view. This display shows the number of photos in the library.

Showing the view screen when a user taps on the full screen photo view. The top and bottom toolsbars pop up on tapping the screen.

Delete confirmation screen.

Showing the Share screen.

1 On Click of Play the user is diverted to the 4th

screen on the right, without the buttons below.

2 Delete button deletes the photo(s) from here.

[INTERACTION NOT SHOWN]

3 “Share” takes the user to the 5th screen on the

right.


[Gym Pics] | UX DESIGN

[GYM PICS] application proposal, wireframes Graphs

1.0

1.4

MY GYM PICS

GRAPH

My Gym Pics

1

Back

1.4.1 SHARE

Graphs

1

Back

Showing: Last 4 Weeks

Graphs

1.4.2

FSHARE...

EMAIL

fshare...

Back

Photos: Last 4 Weeks

1.3.1

Cancel

CC/BCC:

Photo Library

Graphs

170+

170+

150

150

130

130

1

110

Slideshow

Send

To:

Type here...

1 Camera

fshare...

Settings

Profiles

90

98

110

104

98

90

70

98

90

104

98

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vel sapien fringilla leo vestibulum vehicula. Nam eu nunc dui, at accumsan libero. Nullam lorem lorem, dignissim eget molestie vel, tempus a orci. Suspendisse molestie nunc ut justo bibendum tincidunt.

GRAPH

90

70

Share...

50

50

30

30

10

10 Apr 21-27

Logout

Subject:

2

Apr 28-04

May 05-11

Login

May 12-18

Share

1

Cancel

Via Facebook GRAPH

2

Apr 21-27

May 05-11 Via Email Login

Apr 28-04

May 12-18

Cancel Share

Share

MY GYM PICS

GRAPHS

SHARE

FSHARE

EMAIL

User arrives at the Settings screen, this is a default screen on login. User clicks “Graphs”.

Showing graph screen which is a visual representation of their weight gain/loss. The user can even choose the weeks to view. [Assumption: the user is using a free version] [TBD].

Showing share options.

Showing a screen to enter the message along the graph image before the user shares it to facebook.

Showing an email preview screen

1 Default to showing photos of last 4 weeks

1 User clicks “Via Facebook” and goes to next screen.

2 Share button to share the graph.

2 User clicks “Via Email” and goes to last screen on

your right.


[Gym Pics] | UX DESIGN

[GYM PICS] application proposal, wireframes Settings, Profiles, Notifications, Notification View

1.0

1.6

1.6.1

1.6.2

MY GYM PICS

SETTINGS

PROFILES

NOTIFICATIONS

My Gym Pics

Back

1

Settings

Weight

Selected Profile Yes

Record Weight? Camera

Photo Library

Graphs

Measurements

1 Slideshow

Settings

Profiles

Notifications

Profiles

Back

1

Save

Back

1

7:30

Edit

Profiles

3

OFF

4 Login

Everyday

1 Repeat

2

17:00

Back

1

Repeat

OK

Every Monday

Back

1

Add

Repeat

NOTOFICATION VIEW

Save

Weekdays

Profile Name

Delete

Add

Settings

1 Notifications

7:30

Everyday [Picure Label]

Every Tuesday

Alert Sound

Sound Name

Every Thursday

Label

Alarm Title

4

58

5

59

AM

6

00

PM

7 8

Notification View

13:20

Wed, Fri, Sat [Picure Label]

17:00

2

1

Weekends

Every Friday

[Picure Label]

Add

1

Weekends

Profile Name

Delete

Cancel

Label

Profile Name

Logout

Add

ADDED TO SAVE

Every Wednesday

2

[Picure Label]

1.6.2.2

REPEAT

Alert Sound

Wed, Fri, Sat

New Password

Profile Name

Photo Preview

1

1 Notifications

13:20

All Profiles

2

ADD

[Picure Label]

Old Password

lbs

1.6.2.1

[PicureNone Label]

Every Saturday

4

58

Every Sunday

5

59

AM

6

00

PM

01

7

01

02

8

02

Banner

Alerts

Cancel

Delete

Add

3

MY GYM PICS

SETTINGS

PROFILES

NOTIFICATIONS

ADD

REPEAT

ADDED TO SAVE

NOTIFICATION VIEW

User arrives at the Settings screen, this is a default screen on login. User clicks “Settings”.

User arrives at the Settings screen, this would be set to default options.

The screen show the selected profile and other profiles created by the user. One profile must be available to the user {TBD]

Showing some notifications already created and added by the user. User canedit the created notifications by tapping on them.

User adds the notification, The time is displayed i.e. default iOS feature. Repeat when, Alert Sound and Alert Label can be added on this screen.

Showing the Week view, an iOS default feature where a user can choose the alert repeat options on tapping (toggle).

Showing the added options, once the repeat options are selected and added the “Save” button pops up.

On click of Settings the notification view pop up is displayed, where a user can tap on the desired notification alert (Visual Options). [TBD]

1 On click of settings icon the user is diverted to the

1 On Click of Repeat the user is diverted to the next

1 User Clicks the “Save” button to go back to the 3

1 Options to recieve and see notifications.

1 User can Click to record weight and change weight

measurement.

2 On click of Notification the user is diverted to the

4th screen.

3 User clicks “Photo Preview” to change the preview

options.

4 On click o fProfiles the user is diverted to the next

screen.

1 User can change the password of the selected

profile.

2 All the profiles of the user are displayed below. On

select the profile is swapped/changed.

last screen on the page.

2 On “Add” the user is diverted to the next screen. 3 Delete [INTERACTION NOT INCLUDED]

screen.

1 Showing the chosendays in a week.

screen on your left.


[GYM PICS] application proposal, wireframes Profiles

1.0

1.6.1

MY GYM PICS

PROFILES

My Gym Pics

Profiles

Back

Save

Selected Profile

1

Old Password Camera

Photo Library

Graphs

Edit

1 Slideshow

Settings

Profiles

New Password

All Profiles

2

Profile Name Profile Name Profile Name Profile Name

Logout

MY GYM PICS User arrives at the Settings screen, this is a default screen on login. User clicks “Profile”.

Delete

Login Add

PROFILES The screen show the selected profile and other profiles created by the user. One profile must be available to the user {TBD] 1 User can change the password of the selected

profile.

2 All the profiles of the user are displayed below. On

select the profile is swapped/changed.

[Gym Pics] | UX DESIGN


Gym Pics