Challenge Summary
Welcome to the IBM - License Tweeter Screen Design Challenge!
Our client needs your help to revamp License Tweeter Mobile App, a mobile web app that lets a sales person to look up information about a customer, or find updates to entitlements, licenses, announcements, and life-cycle information. We'd like to have some changes applied to the UI and open for new ideas as well. This may be a quick-paced contest. In the end of this Challenge, we're looking for a revamped app delivering better user experience to its users.
In this challenge you are provided with the rich resources and change requests to get insights into this app and our client's expectations.
Round 1
Submit your design for a checkpoint review
1. Login
2. Home
3. New customer list form
4. Customer list page
5. Customer site
6. Related parts
Notes :
- Please submit two versions: Phone-friendly and Tablet-friendly
- Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Submit your final design plus any client checkpoint updates
1. Login
2. Home
3. New customer list form
4. Customer list page
5. Customer site
6. Related parts
7. Details of entitlement
8. License Info
9. Entitlements
10. Life Cycle
11. Announcements
Notes:
- Please submit two versions: Phone-friendly and Tablet-friendly
- Any comments about your solutions, make sure you capture correct flow for every page!
Challenge Details:
The License Tweeter app aims to provide easy access for a sales person to looking up information about a customer, or find updates to entitlements, licenses, announcements, and life-cycle information. We'd like you to improve the exising app by meeting our client's change requests and applying your innovative ideas. Rich resources have been shared to boost your creations, please refer to the supporting documents.
Supporting Documents:
- Guidelines of Change Requests (license-tweeter-work-v2.pptx)
- Sample Pages in PSD format (Sample_Pages_PSD.zip)
- App Logo in PSD format (App icon.psd)
- Menu Icons (menu-icons.zip)
Screen Size:
- Target Platform: we'd like to have two versions of your design solution
-- Phone-friendly: iPhone 6 and Android Phones
-- Tablet-friendly: iPad and Android Tablets
- Show your solution in Portrait View with the resolution as
-- Phone-friendly: 750 px × 1334 px
-- Tablet-friendly: 1536 px x 2048 px
Design Guidelines:
- IBM Design Language could be a reference, but not a strict requirement.
- Make sure create all your graphic in 'vector' format (buttons, icons, etc), so when resize for bigger versions, graphic still look sharp!
- Feel free to suggest any tools/function that can bring good User Experience for this Mobile Application.
Design Requirements:
Please refer to the supporting document "license-tweeter-work-v2.pptx" for detailed requirements. We are also open for innovative ideas.
0. Overall
Refer to Page 2 "Summary – changes requested" of "license-tweeter-work-v2.pptx"
- Logo needs cleaning up to use the correct font “Menin Blue”. (No need to create a new logo)
- We are open for new name for the app (replacing "License Tweeter") while still keeping the "L" logo idea.
- Some modification to the icons on the home page
- Improvements to the “icon bar” model on the Customer Site page
- Improvements to the “new info” indicator, on list pages and entitlement list view
- We are open to changes in overall look and feel. Other changes are welcome too! We’re interested to see your innovative ideas!
1. Login
Refer to Page 3 "Login screen" of "license-tweeter-work-v2.pptx".
The login page needs some minor changes:
- The icon needs some fixes, to use the correct font in creating the “L”
- The name is changing – it is likely to be called “License Lookup”, unless we can come up with a better name – suggestions welcome!
- Remove the Copyright statement from the bottom of the page
2. Home
Refer to Page 4 "Home page" of "license-tweeter-work-v2.pptx".
We like the basic idea of the home page – big buttons. However:
-We are wondering if the icons can be smaller
-The Customer List icon seems a little weak
-There are 5 primary actions (Customer List, Active Entitlements, License Info, Announcements, and Life-Cycle Info), and 3 secondary actions (Refresh, Log Out, and About). It would be nice if the UI could reflect the relative importance of these actions
-“Refresh Offline” should read just “Refresh”
3. New customer list form
Refer to Page 6 "New customer list form" of "license-tweeter-work-v2.pptx".
This is the form for creating a new customer list.
- Is it possible to improve on this form?
- One idea – can we make the buttons Save & Cancel, instead of using the Save icon?
4. Customer list page
Refer to Page 7 "Customer list page" of "license-tweeter-work-v2.pptx".
Once there are items, the customer list form looks like this.
- The plus sign at the top right is used to add new customer lists.
- You can swipe left to delete a customer list.
- Tapping a customer list opens the Customer site page (next page)
5. Customer site
Refer to Page 8 "Customer site" of "license-tweeter-work-v2.pptx".
This page lists all the entitlement information about a particular customer site. Note that if there were changes to an entitlement, they would appear on the left as a red indicator. We’d like to see some changes:
- Can the red “changed” indicator be the only indicator (removing the grey dots)
- The # sign and glasses icons are the most critical actions (shown on the next two pages). The other 3 icons open pages in a browser. Right now, you see the icons by tapping the row, and the blue bar opens up. This blue bar is what we’d like to see improvements to.
6. Related parts
Refer to Page 9 "Related parts" of "license-tweeter-work-v2.pptx".
You get to this page by clicking the “#” sign on the Customer site page.
- Please match whatever other changes are made on other pages of the design
7. Details of entitlement
Refer to Page 10 "Details of entitlement" of "license-tweeter-work-v2.pptx".
You get to this page by clicking the “glasses” icon on the Customer site page.
- Please match whatever other changes are made on other pages of the design
8. License Info
Refer to Page 11 "License Info" of "license-tweeter-work-v2.pptx".
You get to this page from the License information icon on the home page.
- As with the Customer Site information page, there will be indicators when something in the entitlement has changed since you looked at it last. We would like to see some improvements to the indicators
9. Entitlements
Refer to Page 12 "Entitlements" of "license-tweeter-work-v2.pptx".
You get to a list of entitlements page from the Entitlements icon on the home page. From there, you can see the details of a particular entitlement.Clicking on the three dots at the top brings you to the Related Information window, and again to the list of all Annc. Letters, License Information or Life-Cycle Information as from the Navigator.
- Please match whatever other changes are made on other pages of the design
- We don't like the dot line in the pop-up menu at the bottom. Interested in other design ideas.
10. Life Cycle
Refer to Page 13 "Life Cycle" of "license-tweeter-work-v2.pptx".
You get to this page from the Life Cycle icon on the home page.
- As with the Customer Site information page, there will be indicators when something in the entitlement data has changed since you looked at it last. We would like to see some improvements to the indicators.
11. Announcements
Refer to Page 14 "Announcements" of "license-tweeter-work-v2.pptx".
You get to this page from the Announcements icon on the home page.
- As with the Customer Site information page, there will be indicators when something in the entitlement data has changed since you looked at it last. We would like to see some improvements to the indicators.
Important:
- Please submit two versions: Phone-friendly and Tablet-friendly
- Keep things consistent; all graphic styles should work together.
- Think simple but effective solutions!
- The winner of the challenge will have to pre-slice (the source PSD or AI) with icons, backgrounds, headers, UI elements, avatars, images, buttons, etc. to make it easy to split up for use by IBM developers.
- We're looking for better User Experience.
Target User:
- The target audience for this application will be salespersons
Judging Criteria:
- Both versions (Phone and Tablet) are covered
- Cleanliness of your graphics and design.
- User Experience of this Mobile Web Application.
- Creativity and ease-of-use is key to the success as it must be engaging to the target users.
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.