Behance Mobile Strategy - iPhone App by Laura Cortes

Behance WIREFRAMES – iPhone App VERSION 3.0

August 12, 2012

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.

This documents the Information Architecture and structure of <project name> design concept. Wireframes

Table of Contents

Sitemap

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.

Common functionalities

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.

Job tap

New additions and changes, including functionality and page elements, are documented and reviewed into each wireframe. Wireframe alterations are documented in the “Revision History.”

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 feedback Version 3.0 (August 11, 2012) - Final draft based on Kristys’ moodle feedback

Explore Map Follow Agencies Me Job Status

………………………………………………3 ………………………………………………4 ………………………………………………5 ………………………………………………6 ………………………………………………7 ………………………………………………8 ………………………………………………9 ……………………………………………10 ……………………………………………11 ……………………………………………12 ……………………………………………13 ……………………………………………14 ……………………………………………15 ……………………………………………16 ……………………………………………17 ……………………………………………18

0.0 BEHANCE iPhone App 1.0 ME

2.0 JOBS

2.1 Profile

2.1 Find a job

2.2 Job Status

2.2 Job List

0.1.2 Register

4.1 Creatives 4.1.1 Creative 1

2.2.1 Jobs

3.1.2 Project 2

4.1.2 Creative 2

2.2.2 People

3.1.3 Project 3

4.1.3 Creative 3

3.2 People

4.2 Agencies

2.4 Collection

3.2.1 Creative 1

4.2.1 Agency 1

2.4.1 Jobs

3.2.2 Creative 2

4.2.2 Agency 2

2.4.2 People

3.2.3 Creative 3

4.2.3 Agency 3

2.5 Post a job

0.1.1 Log in

3.1 Projects

4.0 FOLLOW

3.1.1 Project 1

2.3 Saved search

0.1 LOG IN

3.0 EXPLORE

Behance

Common functionalities

Document: Wireframes Last Edited: 8/12/2012

Author: Laura Cortes

Page Notes Common functionalities 1.0 – Back button This button is available in all secondary, tertiary and so on navigations. It allows the user to go back one level.

Carrier

1.0

12:00 PM

2.0 – Behance Logo – Homepage button The 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.

2.0 3.0

Hello Laura

Back 4.0

Explore

3.0 – User name – profile button When 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 it’s present in all screens once the user logs in. 4.0 – Section Title This title informs the user about the section he is situated. It’s 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)

5.0

Jobs

6.0

Explore

7.0

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)

Behance

Document: Wireframes Last Edited: 8/12/2012

Carrier

12:00 PM

Carrier

Back

12:00 PM

Carrier

Back

Hello Laura

1.1

1.0

12:00 PM

Back

1.0

Author: Laura Cortes

1.0

2.0

Password

2.0

Jobs

3.0

Not a member yet?

Explore

4.0

Follow 5.0

Or Sign Up with email 6.0

Jobs

Explore

Screen Notes

1.0 – Log In/Sign Up button The user is redirected to the next screen where he can log in to his account or create a new account. 2.0 – Jobs Button The user can access the jobs section through this button (Page 2) 3.0 – Explore Button This button takes the user to the Explore Section (Page 02) 4.0 – Follow button Pressing this button the user has access to the Follow section of the app. (Page 14)

Jobs

Explore

Screen Notes

1.0 – Email – Insert text box In order to Log In the user must inset his email address. 1.1 – Delete button In order to Log In the user must inset his email address. 2.0 – Password – Insert text box Here the user must insert his password to validate the account. 3.0 – Log In Button By pressing this button the user logs into his account. 4.0 – Facebook Log sign up button If the user doesn’t own an account he can choose to sign up with his Facebook account. 5.0 – Twitter Log sign up button If the user doesn’t own an account he can choose to sign up with his Twitter account. 6.0 – Sign Up with email If the user doesn’t own an account he can choose to sign up with his Email account.

Jobs

Explore

Screen Notes

1.0 – Me button The user can access the his profile page through this button. (Page 16) 2.0 – Jobs Button The user can access the jobs section through this button. (Page 2) 3.0 – Explore Button This button takes the user to the Explore Section. (Page 10) 4.0 – Follow button Pressing this button the user has access to the Follow section of the app. (Page 14)

Behance

Jobs

Document: Wireframes Last Edited: 8/12/2012

Author: Laura Cortes

Page Notes Jobs

Carrier

12:00 PM Hello Laura

Back

12:00 PM Hello Laura

Back

Jobs

Jobs Find a Job

1.0

Find a Job

1.0

2.0

Search:

Job List

Country:

Choose a country

3.0

2.0

Post a Job

3.0

Collection

City:

4.0

Choose a city

Agency:

X 4.0 5.0

Quick search:

5.0

Enter word Search

Results:

6.0

Scratchboard illustrator

6.0

Oakland, CA, USA

Jobs

Explore

1.0 – Find a Job Button Find 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 Button In 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 Button In 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 Job Pressing 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 box The 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 button This button sends the search requested by the user and displays the results underneath.

Jobs

July 18

Explore

Jobs List 1.0 – Search – insert text box Here the user introduces key words for his search. 2.0 – Country – insert text box By taping in the text box the user will be able to choose from a list of countries. 3.0 – City – insert text box By taping in the text box the user will be able to choose from a list of cities. 4.0 – Agency – insert text box Here the user can introduce the name of an agency. 5.0 – Search button By pressing this button the user will visualize the search results on the bottom of the page. 6.0 – Search results After 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.

Behance

Jobs Tap

Document: Wireframes Last Edited: 8/12/2012

Author: Laura Cortes

Page Notes Jobs list 1.0 â&#x20AC;&#x201C; Drop down menu For 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.

Carrier

12:00 PM Hello Laura

Back

Jobs Find a Job Search: Country:

X X

Choose a country

City: Agency:

Canada

USA

1.0

France 5.0

Portugal Search Spain

Results:

Scratchboard illustrator Oakland, CA, USA

Jobs

July 18

Explore

Behance

Job List

Document: Wireframes Last Edited: 8/12/2012

Carrier

12:00 PM

Carrier Hello Laura

Back

12:00 PM Hello Laura

Back

Jobs Interactive

Canada

2.0

Country: City:

3.0

Vancouver

Blast Radius

4.0

Company:

Find People 1.0

Oakland, CA, USA

John Smith

July 18

Oakland, CA, USA

2.0

3.0 4.0 Senior Interaction Designer

IA Laura Johnson

July 18

3.0

Vancouver, BC, Can

July 18

Interface Designer

Scratchboard illustrator Oakland, CA, USA

Christina Tompson

July 18

Toronto, ON, Can

July 18

7.0

Washington, DC, USA

Screen Notes

1.0 – Search – insert text box Here the user introduces key words for his search. 2.0 – Country – insert text box By taping in the text box the user will be able to choose from a list of countries. 3.0 – City – insert text box By taping in the text box the user will be able to choose from a list of cities. 4.0 – Agency – insert text box Here the user can introduce the name of an agency. 5.0 – Refresh By pressing this button the user will refresh the predefined search, and get new results. 6.0 – Jobs Tab The user can choose between Jobs results or People results. In the jobs tag the user as access to the jobs offers posts. 7.0 – People Tab By pressing this tag the user as access to people offering services.

UX Designer

Senior Interaction Designer

People

Explore

Find People

1.0

Interactive Designer

Washington, DC, USA

6.0

Jobs

Find Jobs 2.0

Scratchboard illustrator

Resfresh

Jobs

Jobs Results

Find Jobs

5.0

Results:

Hello Laura

Back

Results

1.0

12:00 PM

Jobs

Saved Search Search:

Carrier

Author: Laura Cortes

Jobs

Explore

David Campbell

July 18

Screen Notes

1.0 – Job Post title In order to Log In the user must inset his email address. 2.0 – Add to collection The user can choose to add the job post to his collection, directly from the job list. 3.0 – Job Location Informs the user about the job offer location. 4.0 – Post Date. Informs the user about the job post date.

Jobs

San Fran., CA, USA

Explore

July 18

Screen Notes

1.0 – Creative Profession Title In this section the user can see creatives who are offering their services. This text informs the user about the creative profession. 2.0 – Creative name Creative name and last name. 3.0 – Creative Location Informs the user about the creative location.

Behance

Collection

Document: Wireframes Last Edited: 8/12/2012

Carrier

12:00 PM

Carrier Hello Laura

Back

12:00 PM

Carrier Hello Laura

Back

Jobs Jobs

Hello Laura

Back

Jobs People

2.0

1.0

2.0

1.0

John smith

Scratchboard illustrator Oakland, CA, USA

Jobs

12:00 PM

Jobs

Collection

Author: Laura Cortes

Location: Tallin, Estonia

July 18 5.0

Senior Interaction Designer Washington, DC, USA

3.0

Fields: Art Direction, Graphic Design, Typography

4.0

July 18 July 15

2.0

Scratchboard illustrator

People

7.0

Oakland, CA, USA

6.0

July 18

8.0

Sarah Chow Location: Vancouver, Canada

Senior Interaction Designer

Fields: User Experience, Information Architecture

Washington, DC, USA

Senior Interaction Designer Washington, DC, USA

Jobs

Explore

Screen Notes

1.0 – Jobs button The user is redirected to the next screen where he can see a list of the jobs he added to hos collection. 2.0 – People Button The user is redirected to the section where he can see a list of the people (creatives and agencies) he added to hos collection.

Jobs

Explore

July 18 July 18

Screen Notes

1.0 – Jobs posts List of jobs posts added to the user collection. Every item is a button that takes the user to the job post page. 2.0 – Add to my collection button This button allows the user to add or remove jobs posts to his collection. When it’s coloured the job is added to the collection. To remove the job from the collection, the user just has to press the button again, and it instantly becomes uncoulored.

Jobs

Explore

Screen Notes

1.0 – Creative/Agency Photo Thumbnail image of the creative/agency. 2.0 – Creative/Agency Name In this area the user is informed about the creative/agency name. 3.0 – Creative/Agency Location In this area the user is informed about the creative/agency location. 4.0 – Creative/Agency Field In this area the user is informed about the creative/agency fields of expertise. 5.0 – Creative/Agency Rate The user can choose to rate the creatives/agencies entries, and by doing this the user changes the order of importance of the entries. 6.0 – Post date In this area the user is informed about the post date. 7.0 – Creative/Agency Appreciations number In this area the user is informed about the creative/agency number of appreciations. 8.0 – Creative/Agency Views number In this area the user is informed about the creative/agency number of views.

Behance

Post

Document: Wireframes Last Edited: 8/12/2012

Author: Laura Cortes

Page Notes Post a Job 1.0 – Job area – insert text box In this area the user can inset the area of the job he is offering. 2.0 – Company In this area the user can insert the company who is offering the job. Carrier

Carrier

12:00 PM Hello Laura

Back

Jobs

Post a Job

2.0

Company: 3.0

Start date:

5.0 – City – insert text box By taping in the text box the user will be able to choose from a list of cities.

X X

4.0

August 12

Country:

City:

6.0

X 5

10 11 12

6.0 – Description – insert text box In this area the user can add a short description about the job offer.

7.0

Post

7.0 – Post button The button posts the job into the job list.

13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

Jobs

3.0 – Job starting date The user can choose to introduce the date of start for the job. By taping the box, a calendar shows up, and the user can choose the month and day. 4.0 – Country – insert text box By taping in the text box the user will be able to choose from a list of countries.

1.0

Area:

Description:

Hello Laura

Back

Jobs

5.0

12:00 PM

Explore

Jobs

Explore

Behance

Explore

Document: Wireframes Last Edited: 8/12/2012

Carrier

12:00 PM

Carrier Hello Laura

Back

12:00 PM

Carrier Hello Laura

Back

Explore 1.0

2.0

John Smith

Agencies

Location: Tallin, Estonia Fields: Art Direction, Graphic Design, Typography

People John Smith Location: Tallin, Estonia

2.0

Projects

Fields: Art Direction, Graphic Design, Typography

3.0 3.0

About

Map

Location: Vancouver, Canada Fields: User Experience,

Explore

Screen Notes

1.0 – People button The user is redirected to the next screen where he can explore between Creatives or agencies. 2.0 – Projects button The user is redirected to a screen where he can explore projects from either creatives or agencies. (Page 12) 3.0 – Map Button The user is redirected to a screen where he can explore visualize a map showing the jobs, creatives or agencies closer to his location. (Page 13)

Jobs

Explore

Screen Notes

1.0 – Creatives tab The user can choose between Creatives results or Agencies results. In the creatives tag the user as access to creatives personal portfolio. 2.0 – Agencies tab By pressing this tag the user as access to the agencies list, and therefore to their portfolio. (Page 11) 3.0 – Follow Button The user can choose to follow creatives and agencies. By pressing the button the user is adding creatives/agencies to his following list.

1.0

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Sarah Chow

Jobs

Hello Laura

Back

Explore

1.0

Creatives

12:00 PM

Explore People

Author: Laura Cortes

Jobs

Explore

Screen Notes

Creative 1.0 – About In this page the user can see the creative page and get detailed information about his/her work and field of expertise. By scrolling down the user can visualize examples of the creative work.

Behance

Explore Agencies

Document: Wireframes Last Edited: 8/12/2012

Author: Laura Cortes

Page Notes Agencies 1.0 â&#x20AC;&#x201C; Agencies List In this area the user can explore different agecnies and have access to their personal page and work.

Carrier

12:00 PM Hello Laura

Back

12:00 PM Hello Laura

Back

Explore

People

2.0 â&#x20AC;&#x201C; Agency page In this page the user can visualize a specific agency and see its work and information.

2.0

Creatives

Agencies

HandMadeFont Location: Tallin, Estonia Fields: Art Direction, Graphic Design, Typography

1.1

HandMadeFont Location: Tallin, Estonia Fields: Art Direction, Graphic Design, Typography

About

HandMadeFont Location: Tallin, Estonia Fields: Art Direction, Graphic Design, Typography

Jobs

Explore

Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Jobs

Explore

Behance

Explore Projects

Carrier

Document: Wireframes Last Edited: 8/12/2012

12:00 PM

Carrier Hello Laura

Back

12:00 PM

Carrier Hello Laura

Back

Explore

Projects

Author: Laura Cortes

12:00 PM Hello Laura

Back

Explore

1.0

Handmade font.

1.0

Art Direction, Graphic Design, Typography

Handmade font. By: HandMadeFont

2.0

Art Direction, Graphic Design, Typography

3.0

Author: HandMadeFont Agency Lorem ipsum dolor sit amet, consectetur adipiscing elit.

4.0

5.0

6.0

7.0

4.0

London By: Talos Buccellati Photography 8.0

Jobs

Explore

Screen Notes

1.0 – Explore projects In this page the user has access to a list of different projects from creatives or agencies. The user can access the different projects pages by tapping on the list items.

Jobs

Explore

Screen Notes

1.0 – Project page Page showcasing a project 2.0 – Project author Project author name, 3.0 – Project short description One sentence describing the project nature and field. 4.0 – Image Project image. To view full screen the user just needs to rotate the phone to landscape position.

Jobs

Explore

Screen Notes

4.0 – Twitter share button This button shares the project on twitter. 5.0 – Facebook share button This button shares the project on favebook. 6.0 – Linked In share button This button shares the project on Linked In. 7.0 – Google Plus share button This button shares the project on Google Plus. 8.0 – Appreciate this button This button gives an appreciation to the project.

Behance

Explore Map

Document: Wireframes Last Edited: 8/12/2012

Author: Laura Cortes

Page Notes Explore Map In this page the user can explore job offers, creatives or agencies who are situated near the user location. 1.0 – Jobs Filter This button activates the jobs filter displaying only the job offers available near the user location.

Carrier

2.0 – Creatives Filter This button activates the creatives filter displaying only the creatives who live and work near the user location.

12:00 PM Hello Laura

Back 1.0

Jobs

3.0

2.0

Creatives

Agencies

4.0 – Selected filter item title Title of the item.

4.0 5.0

Filter Title

5.0 – Arrow button to access item page This button takes the user to the item page (job offer, creative, agency).

Filter description 6.0

3.0 – Agencies Filter This button activates the agencies filter displaying only the agencies that are situated near the user location.

7.0

8.0

6.0 – Selected filter item short description Field of the item (job offer, creative, agency). 7.0 – User location Mark informing about the user location on the map. 8.0 – Projects Filter Items locations on the map.

Jobs

Explore

Behance

Document: Wireframes Last Edited: 8/12/2012

Carrier

12:00 PM

Carrier Hello Laura

Back

12:00 PM

Carrier Hello Laura

Back

Author: Laura Cortes

12:00 PM Hello Laura

Back

Creatives

Creatives 1.0

1.0

2.0

Following

Creatives John Smith

Laura Cortes

Location: Tallin, Estonia

Location: Lisbon, Portugal

Fields: Art Direction, Graphic Design, Typography

2.0

Agencies

Fields: Creative Direction, Interactive Design, Ux, IA 1.0

Jobs

Explore

Screen Notes

1.0 – Creatives Up button The user is redirected to the next screen where he can visualize a list of the creatives he is following and also a list of creatives that might interest him. 2.0 – Agencies Button The user is redirected to a new page where he can visualize a list of the agencies he is following and also a list of agencies that might interest him. (page 15)

Jobs

Unfollow

Sarah Chow

Samantha Kang

Location: Vancouver, Canada

Fields: User Experience,

Explore

Screen Notes

1.0 – Follow Tab The user can choose between Follow results or Following results. In the follow tag the user as access to a list of creatives to follow.. 2.0 – Following Tab By pressing this tag the user as access to the creatives he is already following.

Jobs

Explore

Screen Notes

1.0 – Unfollow button The user can choose to unfollow a creative he is already following just by tapping on the button unfollow.

Behance

Agencies

Document: Wireframes Last Edited: 8/12/2012

Author: Laura Cortes

Page Notes Follow Agencies 1.0 â&#x20AC;&#x201C; Follow agencies tab In this area the user can explore different agencies and have access to their personal page and work.

Carrier

12:00 PM Hello Laura

Back

2.0 â&#x20AC;&#x201C; Following agencies tab In this page the user can visualize a the list of agencies he is already following and he can choose to unfollow it.

12:00 PM Hello Laura

Back

Follow Agencies

Agencies Follow

Following

Following 2.0

1.1

HandMadeFont

Location: Tallin, Estonia

Fields: Art Direction, Graphic Design, Typography

Fields: Art Direction, Graphic Design, Typography Unfollow

Jobs

Location: Vienna, Austria

Fields: Illustration, Photography, Graphic Design

Explore

Jobs

Explore

Behance

Document: Wireframes Last Edited: 8/12/2012

Carrier

12:00 PM

Carrier Hello Laura

Back

12:00 PM

Carrier Hello Laura

Back

Hello Laura

Back

Profile

Location

Profile Image1.0

Profile

Current Image

2.0

6.0 5.0

Canada

British Columbia 7.0

Vancouver

UPLOAD IMAGE

Creative Fields 2.0

Personal Information

Job Status

X 9.0

X 4.0

Digital Creative

Explore

8.0

Creative Direction

3.0

Laura Cortes

Jobs

12:00 PM

Me 1.0

Author: Laura Cortes

Screen Notes

1.0 – Profile button The user is redirected to the next screen where he can edit his profile info and upload a profile picture. 2.0 – Job Status Button The user can access the job status section through this button (page 17)

Jobs

Explore

10.0

Interaction Design

Screen Notes

1.0 – Profile Image Thumbnail image of the user profile. 2.0 – Upload a new profile image button Here the user can upload a new image to his profile. 3.0 – Personal information - name The user can insert his personal name in this area. 4.0 – Personal information - profession The user can insert his profession in this area.

Creative Direction

Jobs

Explore

Screen Notes

5.0 – Location - country By taping in the text box the user will be able to choose from a list of countries. 6.0 – Location - state By taping in the text box the user will be able to choose from a list of states. 7.0 – Location - city By taping in the text box the user will be able to choose from a list of cities. 8.0 – Creative field 1 The user can insert the first field of expertise. 9.0 – Creative field 2 The user can insert the second field of expertise. 10.0 – Creative field 3 The user can insert the third field of expertise.

Behance

Job status

Document: Wireframes Last Edited: 8/12/2012

Author: Laura Cortes

Page Notes Job status Available for: In this area the user can choose what kind of work he is available for. 1.0 – Freelance Check box. Carrier

Carrier

12:00 PM Hello Laura

Back

2.0 – Internship Check box.

12:00 PM Hello Laura

Back

3.0 – Part-time Check box.

Me Job Status

4.0 – Full-time Check box.

8.0

Start date:

9.0

1.0

Available for:

Country:

2.0

Freelance

Internship

3.0

10.0

City:

X X

4.0

Full-time

Part-time

6.0 – Area 2 By taping in the text box the user will be able to choose from a list of areas.

Description: 11.0

Areas:

5.0

7.0 – Area 3 By taping in the text box the user will be able to choose from a list of areas.

Interactive 6.0

Area 2 Area 3

Jobs

7.0

12.0

Save

Explore

Areas: 5.0 – Area 1 By taping in the text box the user will be able to choose from a list of areas.

Jobs

Explore

8.0 – Start date The user can choose to introduce the date he is available to start working. By taping the box, a calendar shows up, and the user can choose the month and day. 9.0 – Country By taping in the text box the user will be able to choose from a list of countries. 10.0 – City By taping in the text box the user will be able to choose from a list of cities. 11.0 – Description Here the user can add a short description of the type of work he is looking for and also any other information he might want to give about himself. 12.0 – Save button This button saves the job status of the user and updates his profile page.