Final Version Of Designs with Explanation
User should complete the sign up process with the following details:
- Name : Min 3 char, max 200 chars
- User Name : user choice : min 6 max 20
- Email / Mobile : should be verified via OTP
- Password : Min 8 and max 16 chars, should contain at least one spl symbol, one char, one number
Before creating account, user should verify contact details with 6 digit otp which is being sent to his/her mobile number or email address.
Onboarding process should be repeated until user skips or completes the following steps. If user completes any one step from 2, 3 and 4 , we should mark the user as completed the onboarding.
-
Step 1:
Profile Pic (180 x 180 pixels or 360 x 360 pixels) and About Text (max 800 chars) -
Step 2 :
Set your college if listed / request college if not listed -
Step 3 :
Skills I have (choose minimum three) -
Step 4 :
Follow users (Top authors from selected college , Top authors from all colleges) -
Step 5 (Can skill) : Follow collegesRemoved this step and also there is no design
Bio page after filling education, certification and other details. The same can be used as a resume for the student/user
Menu bar consists 4 options
- Home(Default)
- My College
- Search Bar
- Notifications
- Control Centre (User menu)
Each stuMagz page consists of three panes
- Left Pane (Menu of the page)
- Middle Pane (Feed of the page)
- Right Pane (Additional content of the page)
Each stuMagz page consists of two panes
- Left Pane (Menu of the page)
- Main content (Feed, settings and other elements of the page)
These pages will contain single pane with full page view. Might depend on the design and requirement.
These static pages are useful for:
- Terms & Conditions
- About Us
- Privacy & Policy
- Dedicated marketing page
- Contact us page
- FB / Instagram / GoogleAds target pages
- other
After successful login / registration, user should goto home page of stuMagz rather than his college page.
Home page contains Left pane and Middle pane. Right pane exists based on the option chosen by user from the left pane menu.
Menu items of the left pane:
Home (Non clickable)
- My Feed -> Layout 3
- My Bio -> Layout 2
- My Board -> Layout 3
- My Friends -> Layout 3
Discover (Non clickable)
- Stories -> Layout 3
- Events -> Layout 3
- Opportunities -> Layout 3
- Projects -> Layout 3
- Quiz -> Layout 3
On Top create post bar How it is populated ? Based on step of onboarding process. ie., 2 (My College), 3 ( Skills ) and 4 (Following Users). User can change his / her feed by changing interested skills, following users and following colleges. (Can be done by visiting settings page). In this feed only blog posts are listed (First priority goes to unread blog posts sort by latest blog posts)
Right pane consists following options:
- Published Ad / sponsored if any (One at a time based on view of the user) on loop based
- Upcoming Friends Birthdays
- Upcoming events in next month (1. Purchased events, 2. Upcoming Events from Feed, 3. Upcoming Events from user location) : Max 3 events
- Opportunities based on skills interested
- Story of the day blogpost
- Quiz details if any
On Top, search bar How it is populated ? List of posts added by user
Right pane consists following options:
- Published Ad / sponsored if any (One at a time based on view of the user) on loop based
- Recent activity by logged in user: opportunity applied, liked a post, commented on a post, purchased event, added skill, published a post
- My Skills
View the profile of the user and allow the user to make some little changes like about, education & experiences etc.
Show the dashboard of the user
Right pane does not exists
On Top, search bar
List of connected users as friends.
- Published Ad / sponsored if any (One at a time based on view of the user) on loop based
- Suggested users to follow / connect
On Top, create story bar, search bar and filters (category)
Featured stories.
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
On Top, create event bar, search bar and filters (category, city, date, fee or paid)
All Events.
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
- Purchased 3 events by friends or next 3 upcoming events from entire db
On Top, profile strength bar, create opportunity bar, search bar and filters (category, fee or paid, skill, location, job type)
All Opportunities.
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
- List of companies available with open opportunities
- List of Skills with available opportunities
On Top, create project bar, search bar and filters (category, technology used)
All Projects.
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
- Featured projects max 10
On Top, three menus will be displayed.
- Brand Quizzes
- Skill Quizzes
- Participated Quizzes
Upon selection of any menu, corresponding quizzes will be displayed.
By Default, daily quizzes will be displayed. No direct menu item to get the list.
Selected Quiz as Quiz of the day
User can visit college page from a url / from my college option from nav bar.
College page contains Left pane, Middle pane and Right pane.
Menu items of the left pane:
My College (Non clickable)
- Campus Feed -> Layout 3
- Magazines -> Layout 3
- Announcements -> Layout 3
- Discussions -> Layout 3
- Stories -> Layout 3
- Events -> Layout 3
- Projects (Innovations) -> Layout 3
- Opportunities -> Layout 3
- Competitions -> Layout 3
- Network -> Layout 3
- About -> Layout 3
Magazines is the default college pabe for non approved members / non logged in users
On Top create post bar
List all approved posts from college
Right pane consists following options:
- Latest editions/issues of college
- Announcements, birthdays, upcoming events of the college
On Top create post bar
List all issues / editions from college
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
On Top create post bar
List all announcements from college based on membership association between user and college
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
On Top create post bar
List all discussions from college based on membership association between user and college
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
On Top create post bar, search bar and filters if any
List all stories from college based on membership association between user and college
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
- Three pinned posts
On Top create post bar, search bar and filters if any
List all events from college based on membership association between user and college
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
- Three pinned posts
On Top create post bar, search bar and filters if any
List all projects from college based on membership association between user and college
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
- Three pinned posts
On Top create post bar, search bar and filters if any
List all opportunities from college based on membership association between user and college
- Two Published Ad / sponsored posts if any (One at a time based on view of the user) on loop based
- Three pinned posts
-- Later
On Top search bar and filters if any
List all users (students / alumni / faculty / followers) from college based on membership association between user and college
- Suggested user to follow from the college
-- Later
Member View: Non member view
College Admin Panel:
Search:
Notifications:
Control Centre:
Article View page
Ticket bookings page
Suggested links from other websites as a post on feed (just like Ad)