Challenge Summary
Welcome to the "IBM WISPR - Email Client UX Enhancements Design Challenge". This is the first of two challenges to tackle user interface and user experience design improvements for a new email client that IBM is currently developing. We are looking for you to review the current application, note the issues we are looking to improve and also make any additional suggestions based on your design knowledge and experience interacting with the application. The goal of this challenges is to improve the overall responsive user interface and customer user experience with the application. Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge.
Let us know if you have any questions in the challenge forum!
01) Navigation enhancements (Desktop & Phone)
02) Email enhancements (Desktop)
03) Search enhancements (Desktop)
- Presentation Document or Visual Map with your UX updates and notes
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include the MarvelApp URL/Link in your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03, etc)
01) Navigation enhancements (Desktop & Phone)
02) Email enhancements (Desktop & Phone)
03) Search enhancements (Desktop)
04) Contacts enhancements (Desktop)
05) Calendar enhancements (Desktop)
- Presentation Document or Visual Map with your UX updates and notes
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include the MarvelApp URL/Link in your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03, etc)
Challenge Details
WISPR is primarily an email application, providing email, calendar and contacts management within a web-based interface. The UI can be extended to include integration with external applications such as Box, Slack, Webex or Amazon Alexa (as examples). We want users to use this as their primary collaboration tool. Service Providers will benefit from users leveraging this as their primary tool as they will be able to integrate additional products and services.
In this challenge, we want to quickly see your thoughts and concepts for improving the application! We are looking to focus on the overall application navigation, email interactions and then the calendar and contacts. This challenge is about the details! Makes sure to review the provided application and think through the overall email, calendar, and contacts (day-to-day) experience.
Important: Existing Application
- Please request access from the Copilot and PM to a test version of the existing application
- You can take screenshots/use any of the existing application interfaces within your UX enhancements
Design Tasks
Improve the user experience of the application
1) Navigation (Priority)
- We are looking to improve the navigation
- The general navigation is across the top, requiring two clicks to get to calendar & contacts from email (and vise-versa). Ideally, the user should be able to compose a new event from within my inbox or email a person from my calendar.
- We are also interested in exploring a left/vertical navigation vs the horizontal navigation. (Examples include Slack, Microsoft Spaces)
- The navigation is currently not consistent (email, contact, calendar, etc), it needs to be clear which navigation items can be used globally and which navigation items are for specific features.
2) Email (Priority)
- This is the main feature of the application. Note that it needs to be responsive.
- Explore the email features in the application and suggest improvements that increase the usability and enjoyment of the UX:
-- Create new message
-- Associate an event to email
-- Adding a contact or group to an email
-- Read message (single and continuous email)
-- Reply or Forward or Reply All message,
-- Actions on the message (delete, mark as important, etc.)
-- Check, download or save attachment
-- Save to new contact.
-- Any other interactions related to email behavior
- The Font hierarchy and font weight is not consistent. Suggest improvements.
- Email Details: Header spacing and content spacing is not consistent. Suggest improvements
- Email Icons: Review and suggest better improvements in the icons, consistency in the icons.
- Actions: Actions on emails are only visible when I load the message. It would be better if they appear when I hover over the message. (delete, mark as read, etc)
- Better layout arrangement to show detail content?
- The current process for creating folders doesn't seem that intuitive. You need to add the name and press "+" which is counter-intuitive. You should press "+" then add the name. Suggest improvements.
3) Search (Priority)
- The current search and filters are confusing. The user also has a hard time filtering because of the page location.
- Suggest a better way in showing search results.
- Propose improvements to simplify the search interactions.
- Search is only within Email
4) Contacts
- Creating and managing contacts is not intuitive. The page has two "+" signs in this page and users have complained that they can not figure out how to add a contact or a group. Suggest improvements.
- We need an easy way to do an action for a contact. Currently to edit or delete a contact a user needs to reach the contact details first which is not very intuitive. How can we simplify the action? Especially if we want to perform mass actions on several contacts (add or move them to another group, delete them, etc?)
- Is there any easy way to find a contact when a user has many contacts in the list? Should we do it via global search? Or specific filter in the contact page?
- The current interaction to add a contact into group looks confusing, can we simplify it? Should we add a group as part of the input field when user adds a new contact?
- Is there an easy way to send an email to contact or group?
5) Calendars
- The current calendar is only able to show content within a day, week and monthly format. To navigate to a particular month or date user needs to click each month or weeks manually which is not really intuitive, suggest to us how a user can navigate to particular month/week/date easily.
- Review how to create a new event in the calendar (it is confusing!) How can we improve this?
~
Improve the user interface
1) Icons
- Look to improve the icons (review the existing IBM Design Language library or suggest alternative icons that improve the user's understanding and experience)
- Make sure the icons work together and are consistent!
2) Fonts
- Consistency in fonts and colors needs to be improved. The fonts used and sizes are not ideal for email (analyze the font sizes and suggest appropriate sizes)
3) Colors
- Review the color usage and suggest consistency improvements
4) Layout
- Columns and browser windows should be able to be resized.
Accessibility
- Accessibility and 508 compliance is extremely important for this project. Please see below:
- Make sure when you are planning your designs you are also thinking about 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)
Keep in mind
- This is a browser based responsive application.
- Closely review the text styles, color, etc from the provided design but think about what changes need to be made to improve the application and the customer experience. Do your research!
- We do not have the PSDs of the original desktop design, so you will need to take screenshots and recreate (and improve) the design.
- Think about what elements are prioritized when displayed on a phone, tablet and desktop versions. This should help in your process of improving the customer experience. Not all elements from the desktop version can fit inside smaller mobile screens. Research and plan how you can best design the required elements to fit into a responsive friendly design.
- Research - Study email applications! We strongly encourage you to reference and study all existing mobile email products when planning your design.
Screen Sizes
Desktop: min 1280px width, height can expand as needed, but try to keep as "fullscreen"
Mobile: 750px width by 1334px
Design Guidelines
Follow and learn the IBM Design Language: (Note they have some updated design thinking content)
- Design Language: https://www.ibm.com/design/language/
- Layout: https://https://www.ibm.com/design/language/
- Typography: https://www.ibm.com/design/language/experience/visual/typography/
- Iconography: https://www.ibm.com/design/language/experience/visual/iconography/
- Color: https://www.ibm.com/design/language/experience/visual/iconography/
Marvel App Prototype
- Ask in Challenge Forum or email fajar.mln@gmail.com (copilot) and cc adroc@topcoder.com for access
Target Audience
Enterprise Email Users
Judging Criteria
- How well you improve/enhance the IBM WISPR Application
- Follow best practice of the IBM Design Language.
- Cleanliness of your graphics and design.
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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
Let us know if you have any questions in the challenge forum!
Round 1
Your Initial WISPR UX Enhancements for checkpoint feedback01) Navigation enhancements (Desktop & Phone)
02) Email enhancements (Desktop)
03) Search enhancements (Desktop)
- Presentation Document or Visual Map with your UX updates and notes
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include the MarvelApp URL/Link in your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03, etc)
Round 2
All final WISPR UX Enhancements with checkpoint feedback applied.01) Navigation enhancements (Desktop & Phone)
02) Email enhancements (Desktop & Phone)
03) Search enhancements (Desktop)
04) Contacts enhancements (Desktop)
05) Calendar enhancements (Desktop)
- Presentation Document or Visual Map with your UX updates and notes
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Make sure to include the MarvelApp URL/Link in your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03, etc)
Challenge Details
WISPR is primarily an email application, providing email, calendar and contacts management within a web-based interface. The UI can be extended to include integration with external applications such as Box, Slack, Webex or Amazon Alexa (as examples). We want users to use this as their primary collaboration tool. Service Providers will benefit from users leveraging this as their primary tool as they will be able to integrate additional products and services.
In this challenge, we want to quickly see your thoughts and concepts for improving the application! We are looking to focus on the overall application navigation, email interactions and then the calendar and contacts. This challenge is about the details! Makes sure to review the provided application and think through the overall email, calendar, and contacts (day-to-day) experience.
Important: Existing Application
- Please request access from the Copilot and PM to a test version of the existing application
- You can take screenshots/use any of the existing application interfaces within your UX enhancements
Design Tasks
Improve the user experience of the application
1) Navigation (Priority)
- We are looking to improve the navigation
- The general navigation is across the top, requiring two clicks to get to calendar & contacts from email (and vise-versa). Ideally, the user should be able to compose a new event from within my inbox or email a person from my calendar.
- We are also interested in exploring a left/vertical navigation vs the horizontal navigation. (Examples include Slack, Microsoft Spaces)
- The navigation is currently not consistent (email, contact, calendar, etc), it needs to be clear which navigation items can be used globally and which navigation items are for specific features.
2) Email (Priority)
- This is the main feature of the application. Note that it needs to be responsive.
- Explore the email features in the application and suggest improvements that increase the usability and enjoyment of the UX:
-- Create new message
-- Associate an event to email
-- Adding a contact or group to an email
-- Read message (single and continuous email)
-- Reply or Forward or Reply All message,
-- Actions on the message (delete, mark as important, etc.)
-- Check, download or save attachment
-- Save to new contact.
-- Any other interactions related to email behavior
- The Font hierarchy and font weight is not consistent. Suggest improvements.
- Email Details: Header spacing and content spacing is not consistent. Suggest improvements
- Email Icons: Review and suggest better improvements in the icons, consistency in the icons.
- Actions: Actions on emails are only visible when I load the message. It would be better if they appear when I hover over the message. (delete, mark as read, etc)
- Better layout arrangement to show detail content?
- The current process for creating folders doesn't seem that intuitive. You need to add the name and press "+" which is counter-intuitive. You should press "+" then add the name. Suggest improvements.
3) Search (Priority)
- The current search and filters are confusing. The user also has a hard time filtering because of the page location.
- Suggest a better way in showing search results.
- Propose improvements to simplify the search interactions.
- Search is only within Email
4) Contacts
- Creating and managing contacts is not intuitive. The page has two "+" signs in this page and users have complained that they can not figure out how to add a contact or a group. Suggest improvements.
- We need an easy way to do an action for a contact. Currently to edit or delete a contact a user needs to reach the contact details first which is not very intuitive. How can we simplify the action? Especially if we want to perform mass actions on several contacts (add or move them to another group, delete them, etc?)
- Is there any easy way to find a contact when a user has many contacts in the list? Should we do it via global search? Or specific filter in the contact page?
- The current interaction to add a contact into group looks confusing, can we simplify it? Should we add a group as part of the input field when user adds a new contact?
- Is there an easy way to send an email to contact or group?
5) Calendars
- The current calendar is only able to show content within a day, week and monthly format. To navigate to a particular month or date user needs to click each month or weeks manually which is not really intuitive, suggest to us how a user can navigate to particular month/week/date easily.
- Review how to create a new event in the calendar (it is confusing!) How can we improve this?
~
Improve the user interface
1) Icons
- Look to improve the icons (review the existing IBM Design Language library or suggest alternative icons that improve the user's understanding and experience)
- Make sure the icons work together and are consistent!
2) Fonts
- Consistency in fonts and colors needs to be improved. The fonts used and sizes are not ideal for email (analyze the font sizes and suggest appropriate sizes)
3) Colors
- Review the color usage and suggest consistency improvements
4) Layout
- Columns and browser windows should be able to be resized.
Accessibility
- Accessibility and 508 compliance is extremely important for this project. Please see below:
- Make sure when you are planning your designs you are also thinking about 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)
Keep in mind
- This is a browser based responsive application.
- Closely review the text styles, color, etc from the provided design but think about what changes need to be made to improve the application and the customer experience. Do your research!
- We do not have the PSDs of the original desktop design, so you will need to take screenshots and recreate (and improve) the design.
- Think about what elements are prioritized when displayed on a phone, tablet and desktop versions. This should help in your process of improving the customer experience. Not all elements from the desktop version can fit inside smaller mobile screens. Research and plan how you can best design the required elements to fit into a responsive friendly design.
- Research - Study email applications! We strongly encourage you to reference and study all existing mobile email products when planning your design.
Screen Sizes
Desktop: min 1280px width, height can expand as needed, but try to keep as "fullscreen"
Mobile: 750px width by 1334px
Design Guidelines
Follow and learn the IBM Design Language: (Note they have some updated design thinking content)
- Design Language: https://www.ibm.com/design/language/
- Layout: https://https://www.ibm.com/design/language/
- Typography: https://www.ibm.com/design/language/experience/visual/typography/
- Iconography: https://www.ibm.com/design/language/experience/visual/iconography/
- Color: https://www.ibm.com/design/language/experience/visual/iconography/
Marvel App Prototype
- Ask in Challenge Forum or email fajar.mln@gmail.com (copilot) and cc adroc@topcoder.com for access
Target Audience
Enterprise Email Users
Judging Criteria
- How well you improve/enhance the IBM WISPR Application
- Follow best practice of the IBM Design Language.
- Cleanliness of your graphics and design.
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 image files based on Challenge submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.