Behance Mobile Strategy - iPhone App

download Behance Mobile Strategy - iPhone App

of 18

  • date post

    22-Mar-2016
  • Category

    Documents

  • view

    222
  • download

    0

Embed Size (px)

description

Behance Mobile Strategy - iPhone App

Transcript of 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