Challenge Summary
Welcome to "IBM - SiBM Event Connect Web App Wireframe Challenge". In this challenge, we need your help to create an admin portal (Desktop/Web) for our Event Connect application. The purpose of this challenge is to create the best possible UX for the app where our user will be able to create and manage their events. The application needs to be a simple, easy to use experience. Users will manage the events they create from this screen as well as create new ones.
At the end of this challenge, we are looking to see intuitive and easy to use "wireframe concepts" that will help us design and build UI/UX in the next phase of this project! Be creative in your wireframes!
Round 1
01. Events Management Page
02. New Event Page
Round 2
01. Events Management Page
02. New Event Page
03. Notification Page
Project Overview
We need to create the best possible UX for our "Event Connect" Application. This application will run in both Desktop/Web and Mobile with different purpose. This challenge is focused on Desktop/Web, where users will create and manage events. This should be a simple, easy to use experience.
This Desktop/Web version will be used by Admin or users to create and manage their events, while in the mobile version, the apps will be use by event attendees/audience to view the events and have interactions with the event (share with colleagues, check schedules, etc).
We need you to research and determine the best way to simplify the user experience and make it easy to create an event. We don't want to overwhelm the user with a large amount of forms. Think of ways to break up the forms into sections that will allow users to focus on one area of input at a time.
User Flow Scenario :
- Alex is responsible for hosting an event for 400 employees and potential clients at a venue they do not know and will have some inconvenience to attend.
- Alex needs to be able to create an experience that will attract the audience to the event and serve them throughout the event. And after the event happens, build a positive image of the group he represents within IBM and deliver both specific value (my arranged agenda) and general value (networking interactions) through the use of this app.
- Alex starts creating his event in the administration/self service tool. He sets the event settings and adds data. He then previews his event and publishes. He then reviews his event on web and mobile platforms.
Wireframe Guidelines:
- Provide us with your interaction and click-path thoughts and suggestions
- Produce HTML click-through wireframes that can be used to demonstrate all mentioned functionalities as required in each round.
- The website must be very easy to use and intuitive. Keep that in mind when you create your solution for the layout and flow information.
- You MUST cover all requirements mentioned in challenge details below.
Screen Sizes:
Desktop: 1024px and height as required
IBM Design Guidelines:
All submissions MUST follow IBM Design Language, please refer to the client website: 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.
-- Creativity is also welcome!
NOTE:
Not all of the above guidelines are appropriate for wireframes, only those which you think would be appropriate are applicable. It is best to go through the guidelines to understand how it will impact the UX while building your wireframes.
Required Features:
- Below are some of the features required in this application, but you are not limited to this, we are open to flows and suggestions on how things could work - so feel free to expand and suggest us what would be best for this type of application!
01. Events Management Page
- This is the landing page for the application.
- Users will come to this page to view and manage events.
- From this page, they can make changes to existing events or create a new event.
- Users can quickly see basic stats on their events; attendees, invitation opens, etc. Think of sites like Eventbrite.com.
- Provide dashboard which contains list of Events
- Need layout for "Create an Event" button which will brings user to enter a summary of new event.
---- When clicked, an overlay / popup will appear to capture the following data : Event Name, Description, Location, and Date(s).
---- Users will then enter more information on Add Event Page (redirect user to next steps)
- Allows Selection of multiple Event(s)
---- While selected users can: delete/archive, publish, and manage attendees.
- Allow Copying of an Event (i.e. Copy "Connect 2015" event and Rename to "Connect 2016" event, validation of date sensitive data)
- Ability to Delete an event (single and multiple events)
- Gives Basic Stats/Report per event : Number of attendees, Number of sessions, Average attendance per session
- Display "Event Status" (setup (private vs public), running, completed . . . Etc.)
- User needs some quick way to send notifications/messages to attendees. By location, by group, by name, etc.
02. New Event Page
- Once user clicks create an event button and enters the event summary information, user will be redirected to this page to enter additional information about the events on this page.
- Basic information eg: name, date(s) will be entered and saved from Events Management Page and imported to this page.
- There is a large amount of information the user could possibly add to their event.
- Break this information up in a way that allows users to focus on completing smaller sections, and not be overwhelmed by seeing all of the information at once. Think: tabs, expanding / collapsing boxes, etc. A "wizard" or guided approach. OR maybe to simplify data entry, use approach to choose and copy data from same and old event? For ex, Commit 2013 data can be copy for Commit 2015? etc.
2A. Event Information :
- Event Name (import from Events Management Page)
- Dates (import from Events Management Page)
- Venue (location) (import from Events Management Page)
- Description (import from Events Management Page - if entered)
- URL: name the link to your event (eg: www.eventconnect.com/yoururl)
- Language(s) and Date Format (European vs USA)
- Tags
- Hotel Booking URL
- Visual identification :
-- Conference Logo / Image
-- Company Logo (could be pulled from a library)
- Categorical placement :
-- Twitter Hashtag(s)
-- Event Category
-- Attendee Directory (on/off)
-- Twitter Feed (on/off)
-- Private Messaging (on/off)
- Audience
-- Add and import attendees from other source; xml, etc.
-- Invite people from a company, or from a list, past attendees, etc.
2B. Session Details/Agenda :
- A subset portion of the event (ex : opening ceremony, main event, breakout sessions, speakers, dinners, etc), users will input specific session times and data to their event.
- Think of these as a schedule of events that users can sign up for. Users may later add these events to their events schedule.
- Button to add more sessions
- Upload sessions from xml / spreadsheet. (text link, low prominance.)
- Session Information:
-- Start / End Date-Time*
-- Name (Title) and Session Code*
-- Description*
-- Location*
-- Tags
-- Tracks, example : suggested content for different user types, predetermined by the event creator (assign unique colours to track)
-- Sub Tracks, example : suggested content for different user types, predetermined by the event creator (assign unique colours track); tied into the themes (Check 2C below)? picks colors automatically.
- Visiblity Toggle (for each sessions, determined by role/group)
-- Track (optional)
-- Sub Track (optional)
- Speakers
-- Name (Title)
-- Company
-- Biography
-- Photo
-- Description*
-- Social network handle/connections/URLs
2C. Theme/Design (for Event Page shown to audience)
Users will have the option to change colors, layout and overall theme for their event to better fit their brand's image. This does not need to be a functional page for this challenge. We only need a static wireframe for this section.
- Does not need to be a live page. Design only.
- Allow users to choose from two layouts for web page client. Show thumbnail example.
- Limited theme selections. Show placeholder options for potential themes a user could pick from.
- Input brand color / color picker: hex value, RGB, etc. Show that users could change the colors of their event page.
- Theme / Page preview. Show a preview of the completed design. **Note, this page will be designed in another challenge. Use placeholder for now**
2D. SPONSOR CONTENT
You do not need to design this page for this challenge. But account for it in how you structure your user flow!
- User needs some way to add sponsor content (logo, sponsor name) and how to manage the layout content (size, colors, etc)
2E. GENERIC CONTENT
You do not need to design this page for this challenge. But account for it in how you structure your user flow!
- Links and other secondary information about the events
- Highlights, Information, Maps, etc
2F. POLLS AND SURVEYS
You do not need to design this page for this challenge. But account for it in how you structure your user flow!
- Polls and Surveys have similar interactions, but surveys are potentially longer format, allow more question diversity (rich text input, etc.) longer duration to complete
- Add Start/End dates for the Polls and Surveys
- Polls and Survey will have short duration presented for a limited time in the events page viewed by the attendees/audience.
03. Notification Page
- On each event list in event management page, there should be a button to manage notifications setting for the event.
- User can manage and set how to distribute/notify event information, updates to individual, group(s), etc.
Learn Axure:
New to Axure? Here are some quick tutorials to help you get started.
http://www.axure.com/learn
Target Audience:
- IBM Employees
- Event Planners
- Event Administrators
Judging Criteria:
Your submission will be judged on the following criteria:
- User Experience.
- Completeness and accuracy of the wireframe.
- How well your wireframes provide a consistent user flow.
- Any suggestions, interactions and user flow you recommend (provide any notes or comments for the client).
Submission & Source Files:
Preview Image
Create your preview image as one (1) 1024x1024 JPG or PNG file in RGB color mode at 72dpi and place a screenshot of your submission within it.
Submission File
Generated HTML files with all the requested contest requirements stated above.
Source Files
Wireframes should be built in Axure. The resulting files should have generated HTML files. Also, all the content must be listed and the pages are linked together to show page flow.
Final Fixes
As part of the Final Fix phase, you may be asked to remove, update, or change some features of the wireframe.
Please read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge. It is important that you monitor any updates provided by the client or Studio Admins in the forums. Please post any questions you might have for the client in the forums.