Challenge Summary
Welcome to the Project Logos - Mobile Application Wireframe Challenge! In this challenge, we are looking for you to design wireframes to update an existing Proof of Concept app to ultimately create an ionic app for mobile devices.
For this challenge, we need you to create wireframes for the entire application. We will provide a video of the current application and its functionality along with a list of new features and overall comments on the app. It’s then up to you to decide how best to lay out and incorporate the features and functionality for the best usability in this app.
We look forward to seeing your creative wireframe designs!
Round 1
Round 1 will focus Mobile Portrait layout of the application, except where identified below, on the following functionality for the new application:
01 Splash Screen
02 Navigation (Mobile Portrait & Tablet Landscape)
03 Dashboard (Mobile Portrait & Tablet Landscape)
04 All Services (Mobile Portrait)
05 Services Details (Mobile Portrait)
NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!
Round 2
In Round 2, you will need to include all Round 1 screens (updated based on checkpoint feedback). For Round 2, you must also include all the remaining functionality described in the project documentation, including the following screens in both Mobile Portrait & Tablet Landscape:
01 Splash Screen (Mobile Portrait & Tablet Landscape)
02 Navigation (Mobile Portrait & Tablet Landscape)
03 Dashboard (Mobile Portrait & Tablet Landscape)
04 All Services (Mobile Portrait & Tablet Landscape)
05 Services Details (Mobile Portrait & Tablet Landscape)
06 Service Alert History (Mobile Portrait & Tablet Landscape)
07 Settings (Mobile Portrait & Tablet Landscape)
08 Notifications (Mobile Portrait & Tablet Landscape)
NOTE: If anything is unclear, please ask for clarification on the forum and we will be happy to help!
The goal for this challenge is to create wireframes for the overall application, detailing how you see the different user levels using the app. This app will consume the services listed below, but also incorporate more services in the future, so your design should be able to expand to add more services.
Background Information:
As an industry leader in the cloud application space, IBM has many of services that they need to keep their teams and customers aware of status and performance. Through use of existing performance monitoring systems, logging systems, and testing systems, IBM gathers a landscape of performance. They want to build a single application that can both summarize, and provide detail of, these gathered metrics.
This application will be used on mobile devices with a desktop version planned for the future. For this wireframe challenge, you are to consider mobile portrait, and tablet landscape for the screens we identify.
Items to Keep in Mind:
This will be built as an Ionic hybrid mobile app and they want it to fit comfortably on both a mobile phone in portrait and a tablet in landscape, showing more useful data when there’s more screen real estate.
- They need the notion that the user could be an individual interested in a single customer account or an IBMer responsible for many accounts (up to 20).
- Currently the alerts are rather useless. Please explore how a system alert could be surfaced in your app that should tell them what system and the severity.
Existing Application:
Video of the existing application, please DO NOT COPY - as we are looking to change the overall flow and interaction!
- https://youtu.be/PMdx_bzXe2M
Wireframe Requirements:
- All screens / functionality described in this challenge spec must be included in your submission.
- Provide us with your interaction and click-path thoughts and suggestions.
- The application must be very easy to use and intuitive. Keep that in mind when you create your solution for the layout and flow information.
- Provide wireframes of mobile portrait as well as the same screens in tablet landscape
- - Mobile: 320 x 480px (portrait)
- - Tablet: 1024 x 768px (Landscape)
Users of this Application:
Below are the users of this application, we would like to create wireframes for each of these users and include/come up with screens that would be appropriate based on the below details:
1) As a potential customer of the service, I need to see some general information about the service availability and track outages with this app as an evaluation.
2) As a current customer of this service, I would like to stay alerted about the availability of my subscribed capabilities and ignore other services. NOTE: A single customer is almost exclusively going to be interested in services from a single geography in this current environment, however that my not always be the case.
3) As an IBMer assigned to support several clients I need to have immediate access to data about several individual accounts across multiple data centers. I live in a desktop or tablet environment and the mobile device is only critical for me to receive alerts and adjust settings.
Application Overview:
Below are some of the suggested screens, based on user type above - feel free to add screens that would be appropriate
01 Splash Screen:
- Once a user logs into the app with their IBM ID, they will see a splash screen that shows the terms and conditions for them to accept.
- Though this is a one time process, users should be able to access these terms and conditions should from the app in some way, so think on where to have these “Terms & Conditions” once a user is logged in.
02 Navigation and Overall Structure:
- Come with a navigation that allows users to access different pages of the site.
03 Dashboard:
- This shows the overall status of the services!
- Users should have the ability to add/remove services (please see below for the list of services that are being monitored) from different data centers that they think is important!
- Good to show the list of data centers that are currently being monitored, how do we shown them?
- User will be able to select a Data center to view the list of services that are available to be further drilled down to view the status of how each of the service is performing. At this time, there is only a single graph for each service (and you may note that there is not a good alignment between the graphs shown and the 'services' listed,) but in the wireframe - we are looking to account for various levels of detail whereby a user could see monitors in some form of hierarchy if needed. Think in terms of an organization that subscribes to the service and has 10 monitors installed in various locations. That user (with sufficient privileges) should be able to see what the response graph is for any one of those 10 monitors as well. Think about having several lines on the same graph.
- We would like to have a search that will help to quickly find the status of the service they are looking for - looking forward to your thoughts on how this need to be put up!
04 All Services:
- Provide a way for the user to view all the services
- Do you think we could indicate the status of all services right away here?
- Provide a way for the users to search and filter through the list of services (could filter by data center, status, what else?, etc).
Services that are being monitored are:
- Notes NRPC
- iNotes Mail
- iNotes Calendar
- Verse Inbox
- Connections Homepage
Additionally these can also be monitored:
- Sametime Chat
- Sametime web
- Traveller Mail
- Admin
- Additional Connections Services (Files, Communities, Activities, etc..)
- Others
Status could be:
- All Services are functioning normally
- Service may be slow or intermittently unavailable
- Service is unavailable
05 Services Details:
- This need to show the status of the service, whether that service is working or not and whether service is good.
- Need to show Interactive Uptime/Response Time visualization overlaying notifications if they exist.
- Should show the list of alerts that we had in the past. Clicking on these alerts take you to the alert detail for more information.
- Aggregated messages from the system with filters by date and severity.
- Show when the status was last updated and an option to refresh it!
- What else do you think would be helpful in this screen?
06 Service Alert History:
- This screens shows the list of alerts history
- Need a way to search and filter with date, severity, and allow them to search/filter.
07 Settings:
- They should be able to select the type of notification they want to receive (push notifications, email and SMS).
- Provide a way for the user to choose the events for which notifications need to be sent.
- User should be able to update their phone number to which the notification need to be sent.
- Terms and Conditions that the user accepted need to accessible in some part of the app, do you think this would be an appropriate place to link to the terms & conditions"?
08 Notifications:
- This will be a new and important feature of the app!
- How does a user receive notification if the service has gone into a state where they are slow or intermittently unavailable or unavailable?
- An example of notification “There’s a fatal system error with <this system>” with a timestamp or something.
- What happens when a user clicks on a notification (takes you to details for the day/event or a history of the given service with others as well?)
- We are looking for your thoughts on how this need to be shown?
New to axure RP, get started right-away!!
Here are some quick tutorials to help you get started http://www.axure.com/support
Target Audience:
- The target audience of this application are IBM service engineers.
Judging Criteria
- User Experience of the application
- Completeness and accuracy of the wireframe as defined in the attached requirements.
- How well your wireframes provide a consistent user flow.
- How well your wireframe captures all the requirements.
- Any suggestions, interactions and user flows you recommend (provide any notes or comments for the client).
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 Files
- All requested contest requirements as clickable HTML files generated by Axure. All the content must be listed and the pages are linked together to show page flow.
Source Files
- Wireframes should be built in Axure. The resulting source files used to generate the clickable HTML files. Also, all the content must be listed and the pages are linked together to show page flow. All fully editable original source files of the submitted wireframe as required by the contest under "Source Files" in the sidebar should be included in your Source zip file.
Final Fixes
As part of the final fixes phase you may be asked to modify content or user click paths. See more information about Final Fixes.
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.