Appspecifications by I K

Index 1.

Technical specifications index

Brand: 1.1.

1.2.

1.3. 2.

Version 2 *

Design brief (planning doc) 1.1.1. The product 1.1.2. The design concept 1.1.3. The design theme Visual identity: 1.2.1. Moodboard 1.2.2. Logo 1.2.3. Corporate identity 1.2.4. Colors 1.2.5. Typography Corporate identity

Platform: 2.1.

Technical specifications 2.1.1. Page setup overview 2.1.2. Wireframes and Specifications 2.1.2.1. Index 2.1.2.2. Version 2 *

2.2. 2.3. 2.4. 2.5. 2.6.

Where are the questions saved Taskes Pricing Server hosting Total budget

2.7.

Fase 2

2.8.

Landing Page

2.9.

User testing

1. 2. 3. 4. 5. 6. 7.

Steady features 1.1. Settings Index Login page Search Frontpage version 1 Frontpage version 2 6.1. Expanded menu suggestion Frontpage version 3 / Forum overview 7.1. Overview Connecting 7.2. Overview Recruitment 7.3. Overview Business strategy 7.4. Overview Investment 7.5. Overview Personal development 7.6. Overview Social 7.6.1. View a topic 7.6.1.1. Compose a message 7.6.1.1.1. Overvi ew over comp osed questi on 7.7. Profile 7.8. Mail Overview 7.8.1. Mail compose message 7.9. Members overview /serch 7.9.1. Filtered members 7.9.1.1. View member profile 7.10. 7.11.

Decisioncenter O4SH 7.11.1. Menu 7.11.2. Arrange action 7.11.3. Find action 7.11.4. Upload video

Brand Company Description Who are O4SH? O4SH is an international Organization, which promotes positive core human values in society and supports High Potentials! What do O4SH believe in? 1. That being Trustful, Respectful, Ambitious, Influential and Exemplary will make any individual succeed personally and professionally 2. What you give is what you get! 3. We can really change the world! What do O4SH provide? An international human circle of trust, with a highly selective recruitment method. O4SH will provide a platform with necessary services to promote talent and share experience among the network. What is the product? A unique international network of people who share the same essential human values, which are crucial to maximise social interactions and stimulate business development, and all the services that they require to accelerate their success.

Who are the customers? High Potentials who are admired in their communities for embodying our 5 core human values and who want to increase their positive social impact in the world! How ever the service is free for now.

Who are the competitors? O4SH don’t have any direct competitors. Indirect competitors: Other social networks, private clubs, family, friends, etc. What are the advantages? O4SH provides an instant trusted, international network with strong human values and a high level of experience and talent.

2.2.Company history The Company started as a vision in 2012, At this point a Linkedin group was started to use as a platform for the selected HiPos. A small team was brought together in Paris to bring the vision to life in the summer of 2013. 3 different ideas and business plans has been worked on over the fall. At the moment an app is being developed . 2.3.1 Vision O4SHs goal is to inspire youth to act respectfully and kindly in any given situation, but also to take responsibility for the most vulnerable people in our societies. O4SH decided to build a secret organization that will unite, structure, finance and develop young potential Leaders. 2.3.2 Mission O4SH selects high potentials, who are publicly recognised by their peers, and social environment, to have the following 5 core human qualities: Trust, Respect, Integrity, Influence and Exemplarity. These HiPos will be to supported by O4SH to get the network, funding opportunities, unique recruiting offers, business strategy , investing, personal development guidance needed to elevate their career and personal life. Therefore, the main focus is to acknowledge and support world wide high potentials, that are recognised by their peers, and social environment, to embody the following 5 core values: Trust, Respect, Integrity, Influence and Exemplarity. This means developing a network of these high potentials, based on a web platform and social network facilities. O4SH want to provide, a chance to learn from exceptional people who believe in those core human values and guide members through the doubts of life with powerful support. 2.3.3 VALUES

2.4. Products and services O4SH has requested a web app to be developed Connecting: introductions to people Giving access to an international network of High potentials with strong values: Trust, respect, integrity, influence and exemplarity Expanding Members network with these high potentials and possibilities to get introductions to key people all over the world. The O4SH app gives Members the possibility to connect to HiPo members and request introductions to all kinds of people. Recruiting: job offers and demands 85% of companies in North America and Asia (and 70% in Europe), do not feel they have enough qualified potential successors to fill their top jobs, despite high unemployment. According to HBR. O4SH provides a recruitment space exclusively for high potentials. Whether you are looking for a job, internship or have a company, who is looking for that key employe. Business Strategy: Feedback on strategic decisions A member sitting with a tough business decision, have the possibility to ask someone capable and without losing face. O4SH platform brings Members a circle of trust where they can ask questions about business strategy. Choose to ask the question anonymously or openly in the circle. Read other Members questions and answers. And give advice themself. Investing/ Teaming: Looking for money and/ or partners Whether you are an entrepreneur with an idea you need advice, funding or investors for, or you are an investor looking for new exciting projects. The O4SH platform gives Members a trusted space of high potentials to get feedback, develop projects, get investments, create teams and get knowledge. Personal Development: Feedback on personal decisions. Members have access to a trusted circle of high potentials in all ages to receive life knowledge, experience and advice for their personal development. Elevate their potential with the O4SH personal development program and get inspired by some of the worlds finest high potentials. Social: participation in social events, Meet like minded people from all over the world. Members going to a new city for work, holiday or more permanently and will have an instant network of Trusted, respectful and influential peers when arriving! Ask for recommendations, create events and socialize with people they can trust.

Design brief Back ground: O4SH is an international organization that selects high potentials, who are publicly recognised by their peers, and social environment, to have the following 5 core human qualities: Trust, Respect, Integrity, Influence and Exemplarity. The product: O4SH goal is to build an app that provides: ● Introductions to people, ● Job offers and demands, ● Feedback on strategic decisions, ● Investors and/ or partners, ● Feedback on personnel decisions, ● Participation in social events. Together with ● Message system 6

● ●

●

Profiles Forums where you can ○ Ask questions ○ Answer questions Search funktion

The design concept: Relatively flat and elegant design with a Dark Marine base to project an exclusive, elegant, and trustworthy feel. A hint of electric turquoise to represent dynamic futuristic and technical element and white as text and blocks to play up against the full colors. The design theme: 1.

Display the main values of O4SH; TRUST, RESPECT, AMBITION, INFLUENCE & EXEMPLARITY

Represent visually the concept O4SH is build on: Circle of trust.

Use specific color palette inspired by Dark night, TRON, trustworthy, core values, business , etc. The main colors that I used to build the visual identity was dark marine, turquoise, white, grey and black.

The design should combine: Discrete / Secret, Strong / Powerful, Efficient / Qualitative, Exclusive / Selective, Modern / Futuristic, Challenging / Revolutionary, Connected, and Sustainable.

5.2. Visual identity 5.2.1. Moodboard

5.2.2. LOGO O4SH Logo has many little features aligned with the company philosophy. The circle represent the circle of trust, with 5 core values representing each side of the pentagon. the connecting points light up when connecting, the idea is that the members will shine bright when connected with inspiring peers and knowledge. The other important element is trust, secret, business oriented. With a hint of new technology.

Corporate identity Placement of elements in various medias Formats of letters, envelopes etc.

Mediaelement: / 5 element. Different Marine toned (by night) cities to symbolise the international/worldwide aspect of the network. fx: Paris, London, Tokyo, New York, Chicago, Stockholm.

5.2.4. Colours Precise determination of the colours (HEX, RGB, CMYK) Color Use specifications:

Back ground

Glow Links

Text

Color psychology: Argument for color choice:

Dark Blue // Light blue Emotions: Calm, Trust, Confidence, Seriousness, Competence Intelligence, communication, efficiency. Blue is a color most associated with business because it evokes a sense of balance as well as calm intelligence. Like the water blue can adapt to anything and look as if it had no problem doing so. It’s for this reason that blue tends to be the color of many businesses with niches like pediatrics, physical therapy, and other serious problem solving services. A lighter blue evokes more trustworthiness where a darker blue evokes presence of intelligence. Both are good to have but it’s important to decide which one is more likely to get the customer through the door. Think light blue=safe, dark blue=professional (water park vs police uniforms). Blue is calming and can stir up images of authority, success and security. Most people can say they like at least one shade of blue. It is probably the most popular color in logo design and can be seen extensively in government, medical and fortune 500 company logos.

5.2.5. Typography Fonts: 11

Style

Name

Weight

Regular

Oxygen

10px

Italic

Oxygen

10px

Blod

Oxygen

10px

Headline

Oxygen

12px

Text hyperlinks

Oxygen

10px

Headlines on cover

GeoSans Light +glow

60px

The Oxygen typeface family is optimised for the FreeType font rendering system and works well in all graphical user interfaces, desktops and devices.

Geo sans light by Manfred Klein

Corporate identity

Platform: Page setup Overview

Wireframes and Specifications Index

1. 2. 3. 4. 5. 6. 7.

Steady features 1.1. Settings Index Login page Search Frontpage version 1 Frontpage version 2 6.1. Expanded menu suggestion Frontpage version 3 / Forum overview 7.1. Overview Connecting 7.2. Overview Recruitment 7.3. Overview Business strategy 7.4. Overview Investment 7.5. Overview Personal development 7.6. Overview Social 7.6.1. View a topic 7.6.1.1. Compose a message 7.6.1.1.1. Overview over composed question 7.7. Profile 7.8. Mail Overview 7.8.1. Mail compose message 7.9. Members overview /serch 7.9.1. Filtered members 7.9.1.1. View member profile 7.10. Decisioncenter 7.11. O4SH 7.11.1. Menu 7.11.2. Arrange action 7.11.3. Find action 7.11.4. Upload video 14

1. Strady features Wireframe Mockup

Description Description Features shown on ALL pages in the web app: (unless marked with (*) ● ● ● ●

Icons Top bar Bottom bar Logout

Features

Elements

Icons Top ● Search ● Settings Bottom ● Home ● Message ● Members ● Write a post ● See postes ● Profile

File in DB o4sh_icon_NAME.png Style ● Color HEX #ffffff ● Size ● Bottom 70px X 70 px ● Top 50 X 50 (search / settings)

Top bar Search bar ○ Access the search page ○ Description: When pressing the search icon ■ The search bar automatically appears ■ Cursor is placed in the search bar automaticly ■ Search page appears

File in DB Search icon o4sh_app_icon_searc h.png Search bar o4sh_app_icon_searc hbar.png

Bottom bar: Notifications ● When receiving a message ● When add to a group ● When mentor posts ● When someone follows you ● When specific Tags are posted ○ Member defines which posts/ issues he wants to be informed about (based on already existing profile and subjects of his interest: investment, divorce, hiring,...) ○ Inform Member when certain keywords are used in a post

File in DB Bottom bar o4sh_icon_members.png o4sh_icon_mail.png o4sh_icon_profile.png o4sh_icon_list.png o4sh_icon_writepost.png o4sh_icon_home.png Style Position = Bottom of screen even distribution Size 70px X 70px Active: o4sh_icon_membersA.png o4sh_icon_mailA.png o4sh_icon_profileA.png o4sh_icon_listA.png o4sh_icon_writepostA.png o4sh_icon_homeA.png or Styling ● Outer glow: ● #70d4fe, ● opc 55, ● spread 8, ● Size 62, ● Range72

Log out ● ● ●

Shake phone Press phone home button Access settings press log out

1.1. Settings Wireframe Mockup

Description Description

Step 1 Step 2

Features

Elements

Settings

File in DB o4sh_app_icon_settings.png

Access ● Logout ○ enable shake out ● Reset password ● Update info ■ Name (marriage / or other official reason) ■ Email ■ Change profile picture ■ Mail ■ Phone nr ● Privacy settings ○ What information is visible to members (email phone no etc) ●

Style Position = top right Size 50px X 50px

Notification settings ○ notification when receiving a message on/off ○ notification when getting a subscriber on/off ○ notification when mentor posts a video on/off ○ notification when someone writes in a group one follows on/off

2. Index page 1 Page Wireframe Mockup

Description Description Secret login: To Access login formula the Member must press top right corner button followed by pressing bottom left. Pressure points in top left corner and bottom right to access net page.

Features

Elements

Index page Non visible Buttons: ○ 1: Top right corner 20 x 20 px (fill;non) ○ 2: Bottom left corner 20 x 20 px (fill;non) ○ Access to page 2

File in DB Logo_o4sh.png 500px X 500 px Style Placed = centered above keyboard (next page)

3. Login page (*) Wireframe // Mockup

Description Description Individual access code to access platform. ( Will be send by email to the member)

Features

Elements

Index page Login feature ● Placed in the center of logo. ● Individual code accessing individual profile. ● When cursor is placed in code field the number keyboard slides up Hit return for access to page 5 (main page)

●

Code field Code field1 ○ Temporary text = email ○ right align Code field 2 ○ Temporary text = code ○ left align Centered in the logo

Keyboard ● Color = Dark ● UIKeyboardTypeDefault ● UIKeyboardTypeNumberPad

File in DB Logo Logo_o4sh.png 500 px X 500 px Style logo size 500 px X 500 px Centered above keyboard Text Size: 10 Font: Oxygen Color #FFFFFFF Align NO = right align CODE = left align

4.Search Wireframe Mockup

Description Description When pressing the magnifying icon on fig.a, fig b will appear and instantly Expand, Place cursor in search field Bring up keyboard

Fig.2 Fig. 2

Features

Elements

Search ●

When pressing the magnifying icon on fig.a, fig b will appear and instantly ○ Expand, ○ Place cursor in search field ○ Bring up keyboard

●

Accessing retrieving information from : ○ Groups, ○ Profiles, ○ Topics, ○ Video, ○ Pages, ○ Articles and ○ Tags… all content and by category (pdf, video,...)

●

Listing will be organised in categories ○ file type or ○ o4sh category

File in DB Exit: icon o4sh_app_icon_exit.png Search: o4sh_app_icon_search.png Search bar: o4sh_app_icon_searchbar. png Style Icon (50 px X 50px ) Press X to exit Search bar Position top left Description: When pressing the search icon The search bar automatically appears Cursor is placed in the search bar automaticly 20

5.Frontpage version 1 Wireframe Mockup

Description Front page / Home page, consists of a feed that captures the latest relevant postings. Relevant is decided by the tags the the member has signed up for, searched for. In the top of the page there is an relevant sticky post o4sh chooses.

Features

Elements

5. News/wall

File in DB

Style

Elements ●

Feeds ○ Source: ■ Posts from groups one follow ■ Persons (followed) ■ Latest videos, ■ Articles, ■ O4SH products, ■ Events, ■ Elearning, ■ Targeted recruitment ■ Offers.

●