behance mobile strategy - iphone app

August 12, 2012

BehanceWIREFRAMES iPhone App

VERSION 3.0

THIS DOCUMENT HAS BEEN PREPARED FOR LIMITED DISTRIBUTION.

THIS DOCUMENT CONTAINS MATERIALS AND INFORMATION THAT

Behance AND Laura Cortes CONSIDERS CONFIDENTIAL, PROPRIETARY

AND SIGNIFICANT FOR PROTECTION OF ITS BUSINESS.

Table of Contents

Revision History

Version 1.0 (July 22, 2012)

- First draft based off of the Mobile strategy

Version 2.0 (July 30, 2012)

- Second draft based on Kristys inclass feedbackVersion 3.0 (August 11, 2012)

- Final draft based on Kristys moodle feedback

This documents the Information Architecture and structure of design concept.

Wireframes

Wireframes illustrate the information architecture and interaction design elements of a site. This document defines the page

structure (information), interaction, and navigation. It does not influence the nomenclature, colours, stylesheets, shapes,

aesthetics, and other visual design parts of the website concept.

Wireframes provide a rationale behind the page structure, the interaction and the navigation. This vital information helps the

development, design, and UE teams to scope out the project.

New additions and changes, including functionality and page elements, are documented and reviewed into each wireframe.

Wireframe alterations are documented in the Revision History.

3Sitemap

5Log In

6Jobs

8Job List

9Collection

10Post

11Explore

12Explore Agencies

14Explore Map

15Follow

16Agencies

17Me

18Job Status

4Common functionalities

7Job tap

13Explore Projects

0.0 BEHANCE iPhone App

0.1 LOG IN

0.1.1 Log in

2.1 Profile 2.1 Find a job 3.1 Projects

0.1.2 Register

2.2 Job Status 3.1.1 Project 1

2.2.1 Jobs

2.4.1 Jobs

3.2.1 Creative 1

4.1.1 Creative 1

4.2.1 Agency 1

3.1.2 Project 2

2.2.2 People

2.4.2 People

3.2.2 Creative 2

4.1.2 Creative 2

4.2.2 Agency 2

3.1.3 Project 3

3.2.3 Creative 3

4.1.3 Creative 3

4.2.3 Agency 3

2.2 Job List

2.4 Collection

3.2 People2.3 Saved search

2.5 Post a job

4.1 Creatives

4.2 Agencies

1.0 ME 2.0 JOBS 3.0 EXPLORE 4.0 FOLLOW

Behance

4Document: Wireframes

Last Edited: 8/12/2012 Author: Laura CortesCommon functionalities

Carrier 12:00 PM

Page Notes

Jobs Explore Follow

BackHello

Laura

Explore

1.0

Common functionalities

1.0 Back buttonThis button is available in all secondary, tertiary and so on

navigations. It allows the user to go back one level.

2.0 Behance Logo Homepage buttonThe Behance logo is present in all pages, always in the same

place and allows the user to go back to the homepage from

whenever he is.

3.0 User name profile buttonWhen the user logs in, his profile name appears on the top

right corner of the screen. This area is also a button that takes

the user to his profile page and its present in all screens once the user logs in.

4.0 Section TitleThis title informs the user about the section he is situated. Its present in all screens, except the homepage.

5.0 Jobs Quick button This button belongs to a bottom nav that contains three quick

buttons to the primary navigations of the app.

This one is takes the user to the jobs section.

(page 5)

6.0 Explore Quick button This button belongs to a bottom nav that contains three quick

buttons to the primary navigations of the app.

This one is takes the user to the explore section.

(page 10)

7.0 Follow Quick button This button belongs to a bottom nav that contains three quick

buttons to the primary navigations of the app.

This one is takes the user to the follow section.

(page 14)

2.0

4.0

3.0

5.0 6.0 7.0

Behance

5Document: Wireframes

Last Edited: 8/12/2012 Author: Laura CortesLog in

Carrier 12:00 PM Carrier 12:00 PM Carrier 12:00 PM

Screen Notes Screen Notes Screen Notes

Jobs Explore Follow Jobs Explore Follow Jobs Explore Follow

Back Back Back

Log In/Sign up

Jobs

Explore

Follow

Email X

Password X

Log In

Not a member yet?

Or Sign Up with email

Jobs

Explore

Follow

Me

1.0

2.0

3.0

4.0

1.0 Log In/Sign Up buttonThe user is redirected to the next screen where he can log in to his

account or create a new account.

2.0 Jobs ButtonThe user can access the jobs section through this button

(Page 2)

3.0 Explore ButtonThis button takes the user to the Explore Section

(Page 02)

4.0 Follow buttonPressing this button the user has access to the Follow section of the app.

(Page 14)

1.0 Email Insert text boxIn order to Log In the user must inset his email address.

1.1 Delete buttonIn order to Log In the user must inset his email address.

2.0 Password Insert text boxHere the user must insert his password to validate the account.

3.0 Log In ButtonBy pressing this button the user logs into his account.

4.0 Facebook Log sign up buttonIf the user doesnt own an account he can choose to sign up with his Facebook account.

5.0 Twitter Log sign up buttonIf the user doesnt own an account he can choose to sign up with his Twitter account.6.0 Sign Up with emailIf the user doesnt own an account he can choose to sign up with his Email account.

1.0

2.0

3.0

4.0

5.0

6.0

Hello

Laura

1.0

2.0

3.0

4.0

1.0 Me buttonThe user can access the his profile page through this button.

(Page 16)

2.0 Jobs ButtonThe user can access the jobs section through this button.

(Page 2)

3.0 Explore ButtonThis button takes the user to the Explore Section.

(Page 10)

4.0 Follow buttonPressing this button the user has access to the Follow section of the app.

(Page 14)

1.1

Behance

6Document: Wireframes

Last Edited: 8/12/2012 Author: Laura CortesJobs

Carrier 12:00 PM Carrier 12:00 PM

Page Notes

Jobs Explore Follow Jobs Explore Follow

BackBack

Jobs

Find

a

Job

Job

List

Collection

Post

a

Job

Quick search:

Enter word X

Find a Job

Search: X

Choose a countryCountry: X

Choose a cityCity: X

Agency: X

Results:

Scratchboard illustratorOakland, CA, USA July 18

Jobs

Search

Search

Hello

LauraHello

Laura

1.0 2.0

3.0 4.0

5.0

6.0

Jobs

1.0 Find a Job ButtonFind a job section. In this section the user can search for a job

using search filters. The Search results are displayed in the

same screen.

2.0 Job List ButtonIn this section the user can visualize the latest job posts

entries related to his previous saved search, or if the user

prefers he can erase his saved search and have access to all

the jobs posts entries.

(Page 7)

3.0 Collection ButtonIn the collection section the user has access to his collection of

jobs posts or people he might be interested in contacting,

working for or hiring. The user is able to manage his content

by adding more content to his collection or instead deleting

content.

(Page 8)

4.0 Post a JobPressing this button the user has access to the Post Job

section of the app, where the user can post a job offer.

(Page 9)

5.0 Quick Search insert text boxThe quick search tool allows the user to search by simply

inserting a key word. The results displayed include all the

sections: jobs, creatives and agencies.

6.0 Quick Search buttonThis button sends the search requested by the user and

displays the results underneath.

Jobs List

1.0 Search insert text boxHere the user introduces key words for his search.

2.0 Country insert text boxBy taping in the text box the user will be able to choose from a

list of countries.

3.0 City insert text boxBy taping in the text box the user will be able to choose from a

list of cities.

4.0 Agency insert text boxHere the user can introduce the name of an agency.

5.0 Search buttonBy pressing this button the user will visualize the search

results on the bottom of the page.

6.0 Search resultsAfter pressing the search button the results will be displayed in

this area.

The results are displayed as a list of buttons, which can be

taped to access the job entries.

1.0

2.03.0

6.0

5.04.0

Behance

7Document: Wireframes

Last Edited: 8/12/2012 Author: Laura CortesJobs Tap

Carrier 12:00 PM

Page Notes

Jobs Explore Follow

Back

Jobs

Find a Job

Search: X

Choose a countryCountry: X

City: X

Agency: X

Results:

Scratchboard illustratorOakland, CA, USA July 18

Search

Hello

Laura

5.0

Canada

USA

France

Portugal

Spain

1.0

Jobs list

1.0 Drop down menuFor the areas country and city the user can choose from a list

that will be displayed on a dropdown menu.

The dropdpwn menu shows up when the user taps the

respective box.

Behance

8Document: Wireframes

Last Edited: 8/12/2012 Author: Laura CortesJob List

Carrier 12:00 P