IBM - SiBM Event Connect Attendees Mobile App Design Challenge Swiftoberfest

Welcome to "IBM - SiBM Event Connect Attendees Mobile App Design Challenge Swiftoberfest". In this challenge, we need your help to create the best possible UI/UX layout for Attendees/Audience parts (mobile) for our Event Connect application. This part of application will give the user an ability to be able view and attend events and at the same time create a schedule by joining sessions and events. The application needs to be a simple, easy to use experience. Users will use the app while attending events. They will be able to select and set schedules for their event experience with the app and share it to their friends/colleagues along with several features which will be describe in challenge details below.

 

Round 1

01. Landing Page
02. Event Details Page
03. My Schedule - Events and Session Page
04. Session Details Page
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

 

Round 2

01. Landing Page
02. Event Details Page
03. My Schedule - Events and Sessions Page
04. Session Details Page
05. Advance Search Page
06. Notification Page
07. Contacts and Chat Pages
- If you have time - please provide us with a click map for your design.
- Readme.jpg : Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).

 

We need to create the best possible UI/UX for our "Event Connect" Application. This application will run in both Desktop/Web and Mobile with different purpose. In this challenge, our focus is to create the mobile part of the application for event user (Attendees), where users will be able to view events and create their schedule when attending the events. This should be a simple, easy to use experience. 

This part of Event Connect application will be create as responsive apps (Desktop and Mobile) and will be use by Event Attendees/Audience to view event details, and we just need the mobile version for now, desktop version challenge will be run after this challenge finish.

Branding Guidelines:
All submission MUST follow IBM Design Language (if you haven't learned it yet - now is a great time!): http://www.ibm.com/design/language/index.shtml
-- Layout: http://www.ibm.com/design/language/framework/visual/layout.shtml
-- Typography: http://www.ibm.com/design/language/framework/visual/typography.shtml
-- Iconography: http://www.ibm.com/design/language/framework/visual/iconography.shtml
-- Color: http://www.ibm.com/design/language/framework/visual/color.shtml
-- Interaction: http://www.ibm.com/design/language/framework/interaction/introduction.shtml
-- App Inspiration: http://www.ibm.com/design/language/inspiration.shtml
- Click around Client Design Brand site to get familiar with more client design brand that not stated on this challenge spec.
- We need to make sure that there aren't any trademark violations. So IBM(R) -- with the proper logo, Bluemix (TM), and copyright statements should be checked.  The list of copyright and trademarks are here: http://www.ibm.com/legal/us/en/copytrade.shtml
- There should not be any references to SiBM in any of the final designs -- that term should not appear anywhere. Application name can either be named "IBM Event Connect" or just "Event Connect"

Accessibility:
- Make sure when you are planning your concepts you are also designing for accessibility (http://www-03.ibm.com/able/access_ibm/disability.html).
- You can view the accessibility checklist here.(http://www-03.ibm.com/able/guidelines/web/ibm508wcag.html)

Design Goals:
- How should this application be designed?
- How quickly the user can find what he wants? What should the priority features be?
- How quickly can the user understand and interact with the app?
- The application should be easy to use.
- Think simple but effective solutions! Have fun creating this - let us know how you think it should work!
- We want this to be MODERN application design!

Target devices:
- Screen Resolution: 750x1334px. Consider your layout for responsiveness since we are targetting responsive apps.
- Make sure that you create graphical elements in VECTOR format so graphics retain quality when resized.

Supporting Documents:
- Wireframes (wireframe.zip).

Required Screens:
Please refer to wireframes (Mobile parts) before you start designing your solution.

00. Logo and Application Launcher Icon
- Create simple logo for the application that match with the appps purpose.
- Implement the logo as mobile application launcher or create icon for launching the apps in mobile devices.
- Check more about mobile app icon for ios devices here : https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/IconMatrix.html

01. Landing Page - All Events
- WF reference "Landing Page - All Events"
- User will see this page first everytime they open the apps.
- By default this screen will show all available events in the current month.
- User will be able to see all event list per month from this page and see prev/next events from the event calendar.
- There is a filter/sorting settings that able to help user to manage what kind of event that needs to be priority shown in the screen.
- User will be able to search specific events in the apps via search form (click "All Events" title to simulate it) or navigate to advance search form. 
- User can register for the events or particular sessions in the events.
- User will be able to navigate to the event details page from this page. 

02. Event Details Page
- WF reference "Event Details Page - Unregistered" and "Event Details Page - Registered"
- This screen will show all event details information split into 3 tabs "Event Details", "Sessions", "Activity"
- If user not registered to the events, they will only able to view the sessions but won't be able to add and manage their schedule.
- If user already register to the events, they can start add sessions to their schedule. It also will actively show latest activity on the event. 
- User will see detailed information of the event in this page.
- Show the user about what's happening now (sessions in the next 30 minutes)
- Activity stream, shared content
- Share your content (+)
- Map. Venue map, directions to the venue.

ACTIVITY STREAM
See activity / feeds of content within the app: 
- Updates from the admin during the event. (Text; microblogs)
- What's happening now: Display what session(s) are happening at this time
- Social content added by other users during the event
---- Attached files; word, pdf, etc
---- Status updates.
---- Microblogs.
---- Shared photos.
---- Share what sessions you’re attending / see who is attending what.

SHARING
Share button that allows the user to upload / create content to be shared within the app.
---- Post content (image, microblog, etc)
---- Upload file
---- Status update

MAPS / FLOORPLAN / LOCATION
---- directions/floorplan within the venue
---- google map link to the venue/location

My schedule:
---- View my schedule of events / sessions
---- format in a timeline / daily calendar view. Showing where / what you’re attending.
---- A way to copy to your local calendar, google calendar, etc.

View a specific session:
This is the page view of specific session. Includes name, date, location, description, etc.
---- share session, threaded discussion where users can post comments/ask questions/share pictures
---- Add to list/schedule
---- List of people who are attending.
---- Additional information from the session; images, presentation files, suggested reading links
---- Artifacts associated with the session (pictures of the session, presentation given, suggested reading...)

Polls:
Push notification. User gets an alert/notification that there is a poll / survey to take. 
- View and respond to polls and surveys.

Chat:
---- Allow one-to-one messaging between attendees. 
---- List attendees and basic information: eg, job title, location, profile picture.
---- Show an example of a conversation; think iMessage, Google Hangouts chat, etc.

03. My Schedule - Events and Schedule Page
- WF References "My Schedule - Events" and "My Schedule - Sessions"
- This page will show all events and sessions that user already registered
- User will be able to drill down and manage their session of each events from this page.
- User will be able to synchronize their schedule with any external calendar.
- User can see all sessions from specific event in this page.
- The session tab page will show summary information of each session, including :
* Session image
* Session Name
* Session time and location
* Session Tracks 
* Session Speakers
* Session legend

04. Session Details Page
- WF references "Session Details Page - Unregistered" and "Session Details Page - Registered"
- User will be able to see all details information about specific session here and choose to attend the session or not.
- If user not registered to this session, they will be in read only mode and cannot do any interaction.
- If user already registered to the session, they will be able to have interaction in this page (Add comment). 
- User will be able to see other sessions from the event and should be easily register to the session (optional). 

05. Advance Search Page
- WF Reference "Advanced Search"
- User will be able to perform advance search from this page.
- Find any event/session/speeakers/attendees or random search criteria.
- Needs some intuitive ways to show search result (priority, recommendation, etc).

06. Notification Page
- WF Reference "Notifications"
- User will be notified everytime there is an updates regarding event, sessions or others activity related in the apps
- Show us creative layout for the notification list that can handle variation of content notification
- User can manage what kind of notification that they want to see from notification settings page.

07. Contacts and Chat Pages
- WF Reference "Contacts" and "Chat"
- User can make chat communications with their co-worker or other apps user.
- There will be a list that show all contact information along with notification about chat status and unread message
- Clicking "chat" button will bring user to detail chat page where user can communicate with other user
- User can entry text, files or photo/images in the chat window.  

Important:
- Keep things consistent. This means all graphic styles should work together and follow our best practice.
- All of the graphics should have a similar feel and general aesthetic appearance.
- Feel free to add new screen to explain your design interactions for the apps.

Target Users:
- IBM Employees
- Event Planners
- Event Administrators

Judging Criteria:
Your submission will be judged on the following criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Creativity and ease-of-use is key to the success as it must be engaging to users.
- Do your design make sense for responsive application?

Submission & Source Files:
Preview Image
Please create your preview image as one (1) 1024x1024px JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.

Submission File
Submit JPG/PNG for your submission files.

Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.

Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.