• €420

• 37 designs

• 2 designers

---

App Design Brief

Introduction

We need an app design called "WhoWho" for both iOS and Android. The theme of the application is Friend Tagging, and basically it adopts the endorsement mechanism similar to LinkedIn.

Summary

A typical example usage scenario starts as follows: User logs in with Facebook account and activity feed screen appears. On activity screen, friend activity such as "Friend A endorsed Friend B for personal trait X", or "Friend C voted `yes` for this endorsement" or "6 friends voted `nay` for another endorsement", etc, is displayed.

Once the user taps any of the activity feed, the user can join the survey where Friend A is voted for some personal trait. Voting screen is a dedicated screen for this task where user can vote 'yea' or 'nay' for a given endorsement survey. Small fragments of information such as percentage of 'yea' votes or 'friends who voted for this' can also be displayed on this screen.

There are two types of endorsing a person: Users can either join an existing character survey or he/she can define a new personal trait and tag the person of interest. The process of defining a new trait is called 'Revealing'.

Revealing consists of three steps all of which correspond to a particular screen. In the first step, user chooses a category for the personal trait. There are currently six categories: Relations, Social, Technical, At Home, Sports and Outdoors. Once the category is chosen, second step of `reveal` process appears. Here, user can either choose traits from the list provided or he/she can type a new trait. Finally, in the 3rd screen of 'reveal' process, user can place a positive or negative vote on the endorsement he created.

The core concept of the application is explained above. Remaining screens such as detail profile screen, settings, notifications, friends, sliding pane, are supplementary and self explanatory.

We are expecting,

Multiple design alternatives with different design approaches, different layouts and different colour palettes for:

A) A logo including "WhoWho" text.or any other freeform creative logo design.
B) 13 screens whose prototypes are provided in the attachment.
C) 29 Icons included in screen design.

For each screen we expect the following resolutions:

1024 x 600 (Standard netbook/tablet resolution)
1280 x 800 (Samsung Tablets)
1024x768 (Apple iPad Mini)
640×1136 (Apple iPhone 5, 5S & 5C)

Design Requirements for each screen is explained below in detail:

1 - Splash Screen

Requirements:
- Includes Logo.

Our Inspirations for this screen:
- http://www.mobile-patterns.com/splash-screens,
- Attachment File 15: Splash_Screen (1)

2 - Sign Up Screen

Requirements:
- Includes Facebook Login only.
- We would love to see a stylish drawing or GIF here.

Our Inspirations for this screen:
- Attachment File 16: Sign_Up (2)
- http://www.mobile-patterns.com/sign-up-flows

3 - Activity Feed

Requirements:
- A quick vote section similar to one drawn in: File 1: Activity_Feed (3)

Our Inspirations for this screen:
- http://www.mobile-patterns.com/feeds

4 - Profile Summary Screen:

Requirements:
- Summary visualisation of all endorsements in a suitable format which designer can choose.
- A quick vote section (Similar to the voting box in the middle seen in: File 6: - Profile_(Friend)_v1 (6)
-Vote Now button. Required to have plenty of emphasise.

Our Inspirations for this screen:
- http://www.mobile-patterns.com/user-profiles
- File 6: Profile_(Friend)_v1 (6)
- File 7: Profile_(Non_Friend) (4)
- File 9: Profile_(Friend)_v2 (7)
- File 18: Profile_(Friend)_v3 (7)

5 - Detail Profile

Requirements:
- List View Screen where each row should contain the following:
- Positive and Negative voting buttons if given detail profile view belongs to a friend.
- A horizontal bar indicating the percentage of yes&no votes.
- Profile screen aligned to left
- Multiple small thumbnails view.
- Hide button if profile belongs to user himself/herself.

Our Inspirations for this screen:
- File 2: Detail_Profile_(Non_Friend) (5)
- File 3: Detail_Profile_(Self) (9)
- File 4: Detail_Profile_(Friend) (8)

6 - Reveal 1/3 Screen (Select Category Screen)

Requirements:
- 6 major categories have buttons placed in a compact button set.
- A step definitions view describing 3 steps included in new trait creation process.

Our Inspirations for this screen:
- File 8: Reveal_13 (10)

7 - Reveal 2/3 Screen (Reveal It! Screen)

Requirements:
- A step definitions view describing 3 steps included in new trait creation process.
- Text field with search-as-you-type view
- Visualisation of available traits so that user can either type a trait or pick one.

Our Inspirations for this screen:
- File 10: Reveal_23_Keyboard_Hidden (11)
- File 11: Reveal_23_Keyboard_Visible (12)
- http://www.mobile-patterns.com/compose-screens

8 - Reveal 3/3 Screen (End)

Requirements:
This page should be directly encouraging users to vote.

Our Inspirations for this screen:
http://img0.mobile-patterns.com/img/full/1380652995164-2013-09-26%2021.17.38.png
File 14: Reveal_33 (13)

9 - Vote Screen

Requirements:
This page should be directly encouraging users to vote.

Our Inspirations for this screen:
File 17: Vote (14)

10 - Sliding Panel

Requirements:
There should be five rows: Home - Friends - Add Friends - About - Settings
Each menu item should have its own icon.

Our Inspirations for this screen:
http://www.mobile-patterns.com/custom-navigation
File 13: Sliding_Panel (15)

11 - Notifications Screen:

Requirements:
This is a list screen so we need a row design here.
There are two types of notifications, thus two types of rows. First type notifies for an endorsement. It should have the text: "Friend X voted for a trait: Y", Friend's Thumbnail picture and a icon on the right side, indicating the action for "hiding trait from timeline".

Second type is Friendship request notification. It has the text: "X send you a friendship request". It should have Friend's Thumbnail picture and a icon on the right side, indicating the action for "accept request".

Our Inspirations for this screen:

File 5: Notifications (16)

12 - Settings Screen:

Requirements:
This screen is supposed to be a native looking customisation screen.
It should have two main sections: PRIVACY and SUPPORT. Privacy section should contain a switch for stealth mode, which helps users to hide some content. There should be a logo for stealth mode.

Support section should have three options: "Privacy Policy", "Terms of Service" and "Report a Bug"

Our Inspirations for this screen:
File 12: Settings (17)

C) Icons

Here we list the names of icons required for each page:

Page 3:
- Header Bar Search Icon
- Header Bar Notifications Icon
- Header Bar Sliding Panel Icon
- Double Chevron Left Icon
- Double Chevron Right Icon
- Cross Icon (Small - Medium - Large)
- Check Icon (Small - Medium - Large)

Page 4:
-Photo Gallery Icon

Page 6:
- Icon for describing process step 1: "Choose a Category"
- Icon for describing process step 2: "Reveal It"
- Icon for describing process step 3: "Complete"
-Category Icon for "Relations" category
-Category Icon for "Social" category
-Category Icon for "Technical" category
-Category Icon for "At Home" category
-Category Icon for "Sports" category
-Category Icon for "Outdoors" category

Page 10:
- Home Icon
- Friends Icon
- Add Friends Icon
- About Icon
- Settings Icon

Page 11:
- Hide from Timeline Icon
- Add Friend Icon

Page 12:
- Stealth Mode Icon

Industry/Entity Type

Android

---

Colors

Designer to choose colors to be used in the design.

---

Look and feel

Each slider illustrates characteristics of the customer's brand and the style your logo design should communicate.

---

Files

Download all files - 12.2 MB