Challenge Summary
Welcome to the "IBM WISPR - Email Client UX Enhancements Refinement Challenge". In this challenge we are looking to continue refining on the UI/UX of our Email Client experience by iterating on the previous challenge winning design and to focus on completing any missing UI/UX elements.
In the previous design challenge we kicked things off by focusing on navigation, mail and improving the overall UI/UX with consistency in icons, colors etc. In this challenge we are providing the winning design with updates we would like to see and additional requirements to help us create a unified experience. As part of this challenge we also need you to think about the overall Responsive user interface (how page elements will break down on smaller screens). We want to limit the hide/show in our Responsive experience so how can existing page elements breakdown? What happens when you have a long email title? How will the icons, text, page layout look on Tablet and Phone?
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge.
- Focused on the requested design updates/merging/navigation/email etc
1) Navigation
2) Mail Screens
3) Calendar Screens
4) Preferences Screens
5) Alerts & Notifications
6) Application Colors
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
- Responsive view/details for the WISPR App (Desktop, Tablet, and Mobile)
1) Navigation
2) Mail Screens
3) Calendar Screens
4) Contacts Screens
5) Preferences Screens
6) Responsive Views
7) Application Colors
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
In this challenge, we want to see your thoughts and concepts for improving the application. We are also looking for your suggestions to fleshed out the complete details interactions on the overall application features for navigation, email, calendar, contacts and preferences features. This challenge is about the details! Makes sure to review the provided application and the winning design and think through the overall email, calendar, and contacts (day-to-day) experience.
In the previous design challenge we kicked things off by focusing on navigation, mail and improving the overall UI/UX with consistency in icons, colors etc. In this challenge we are providing the winning design with updates we would like to see and additional requirements to help us create a unified experience. As part of this challenge we also need you to think about the overall Responsive user interface (how page elements will break down on smaller screens). We want to limit the hide/show in our Responsive experience so how can existing page elements breakdown? What happens when you have a long email title? How will the icons, text, page layout look on Tablet and Phone?
Read the challenge specification carefully and watch the forums for any questions or feedback concerning this challenge.
Round 1
- Your Initial WISPR Design Refinement for checkpoint feedback (Desktop, Mobile)- Focused on the requested design updates/merging/navigation/email etc
1) Navigation
2) Mail Screens
3) Calendar Screens
4) Preferences Screens
5) Alerts & Notifications
6) Application Colors
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Round 2
- All final WISPR Design Refinement with checkpoint feedback applied.- Responsive view/details for the WISPR App (Desktop, Tablet, and Mobile)
1) Navigation
2) Mail Screens
3) Calendar Screens
4) Contacts Screens
5) Preferences Screens
6) Responsive Views
7) Application Colors
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs. Please include the MarvelApp URL in your notes.txt.
- Make sure all pages have correct flow. Use the proper file numbers, (1, 2, 3, etc.)
Background Overview
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 Slack, Webex or Amazon Alexa, etc. We want users to use this app 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 see your thoughts and concepts for improving the application. We are also looking for your suggestions to fleshed out the complete details interactions on the overall application features for navigation, email, calendar, contacts and preferences features. This challenge is about the details! Makes sure to review the provided application and the winning design and think through the overall email, calendar, and contacts (day-to-day) experience.
Challenge Goals
In this challenge, we want you to focus on the following issues:
- Refining Mail and application navigation (see word doc details attached)
- Application Color scheme (no gradients, needs your creative suggestion!)
- Refining Calendar (captured remaining interaction details)
- Contacts (captured remaining interaction details)
- Preferences (your design suggestion for our application preferences )
Documentation
- Previous Winning Design Storyboard
- Design Updates Document (Topcoder Review Comments 19062017 v1 .docx)
- Access to Existing App (Please ask in forum)
Design Refinement Tasks
- Start with the winning design source files
- Analyze our existing app (live link)
- Read our challenge requirements and requests
- Improve and Refine the user experience of the application
1) Navigation, Alerts & Notifications
- See attachment
- See the requested navigation updates.
- See the requested navigation updates.
- Capture missing interactions when navigating email features (When an email is deleted, etc.)
- Advertising: Some of our customers will have advertising placed on the screen. Where is a good/appropriate placement for this? Where could advertising best be injected and what would/could it look like? (potential box/advertising for customer usage)
- 01_12_Navigation_V2.png, Would like to see top level navigation placed vertically with icons only on the left side. Similar to how Microsoft Teams or Slack lays out their top level navigation. This would then take you into level 2 nav which would, for example, be Inbox, Drafts, Sent, etc.
- Capture missing for notifications/success (delete email, created/delete a folder, etc.)
2) Mail Screens
- We need to capture all interactions for folder features (e.g when a folder is created/deleted/edited/etc)
- Would like to add some quick compose buttons on left navigation
- Would like to remove integrations and add them to an "integration palate" either on the banner (see word docs)" or add to the new left nav. Whatever the best.
- Select All checkbox should be visible all the time it should also not replace the Search bar
- Better highlight urgent, flagged emails in the inbox or folders. Consistent icons should be used to identify important emails, flagged emails, meeting invitations; similar to how threaded discussions and attachments are shown today.
- Deleting or moving an email should be simple (e.g. 1 click). The user should not have to select the email, then select the action. Rather a hover action should appear when user select the message
- Remove any "BOX" 3rd party integration. We currently do not offer BOX integration
- Files section should contain a list of attachments that a user has in their inbox.
- Remove the mail, calendar, contacts and others actions. They should be available on the separated new left nav bar.
- Remove preview from the attachments in email. It's a great idea, but we currently don't support the feature.
- Remove download from Box link
- New Message, Need a save button.
- New Message, Remove "Box" from the toolbar
- New Message, replace "..." with something that shows it's for rich text fonts. Perhaps "A"
- New Message, Plus remove action to add contacts to email message.
- 01_19_Navigation_V2.png would like to see this icon displayed as the 3X3 grid icon that's available on other email platforms such as Office 365
- 02_1_Email-Attachment-V1.png, Like the inline reply within a message
- 02_8_Email.png, Compose message should be resizable, or at least have minimize/maximize option. Would be good to understand what is the experience if the user has multiple drafts open at the same time.
- 02_8_Email.png, need a save button. Might need a cancel button too.
- 02_9_Email.png, What if a user wants to write the message before they address it and add a subject. Is it possible to just start typing?
- 02_10_Email.png, What about saving a draft? Could we have both a "Send" and "Save" button here?
- 02_20_Email-Event-Integration.png, This is a really interesting concept that can save valuable time. However, does this display the user's available time from their calendar?
3) Calendar Screens
- Would like to see the compose window on a new event
- Needs a feature where the user can create a repeat meeting.
- Refine the refresh button function in the calendar view
- Please add a hover state when viewing an event from the calendar.
- Need more info on the event details when selected, including how to change a meeting event.
- Our calendar platform supports multiple calendars it would be good to see how you could view additional calendars, perhaps shared calendars across a department or team.
- 05_4_Calendar.png, Again, we'd like to see this navigation flow down vertical on the left similar to Microsoft Teams. It will provide the ability to expand beyond just email, contacts and calendars. Integrations could be added to this list as well
- 05_4_Calendar.png, IBM Meeting list on the left side bottom area, Is this a view of today's meetings? How is this different from the Day view in the other panel?
- Meeting Notes, Folder creation/deletion – how to show success/deletion
- Inline edit: Create new folders (mobile?) We need to standardize this
- Preferences/Calendar (basics are here – but need the inner details/interactions)
4) Contacts Screens
- Contacts currently doesn't support photos in the avatar. The avatar should be color coded either based on an algorithm or based on a preference selected by the user when they create the contact entry.
- Contacts should include a hover card.
- Also, contacts should have the ability to add a name of a user in an email to my personal contacts or groups. Please check the word docs for more details
- The highlighted section below should be visible all the time in addition to the search bar that it replaced. Perhaps the screen needs to be tweaked to accommodate that.
- 04_3_Contact.png, We do offer an import contact feature that allows users to import all their contacts from a CSV or vCard.
- 04_3_Contact.png, This is a filter option icon that allows filtering by the following: Read, Unread, Important, Flags, Attachments, Show Replied, Show Forwarded, Filter in Folder, Filter between dates.
5) Preferences Screens
- Review our existing preference screen (live app)
- Provide an updated/improved experience aligned with the refinements you are making.
6) Responsive Views
- We need to see how the application looks like in Phone/Tablet/Desktop
- We do not need all of the screens captured but need to understand how the navigation breaks down (phone/tablet/desktop), how text breaks down (long headlines how do they look on phone and tablet) etc.
- We need to understand of the details/interactions
- Mobile, Small form factor (e.g long titles) – full responsive...
- Mobile, 02_6_Email-Multiple.png, New Message screen should have a save button
- Mobile, 02_1_Email.png, The existing dropdown menu "Mail", it does not clear what the menu does in this screen compares to the hamburger menu, needs better interactions explained.
7) Application Colors
- Look to update the color scheme - avoid gradients
- Blue's Grey and Greens are best.
- Needs some way to identify read/unread marks for email or message? perhaps bold the message, slightly shade the background, or change the color of the padding to the left of the message in the inbox. In some modern email system, they use a different shade of colors to highlight which messages are unread. Perhaps the bar in email list could be changed to "Blue 80 (#1D3649)" or "Blue 30 (#5AAAFA)" to identify unread emails or messages?
- 01_12_Navigation_V2.png, Need to tweak the color palette: perhaps cool gray 10 (#DFE9E9) for the new left nav (described above) and top banner changed to Blue 80(#1D3649) or Blue 30(#5AAAFA)
IMPORTANT:
- Keep things consistent. This means all graphic styles should work together.
- All of the graphics should have a similar feel and general aesthetic appearance
- Show all the screens and provide a user flow/click-path and navigation, so we can see how the interactions fit together in the application
- Upload your files to Marvel App and share the Preview URL in your notes.txt document.
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
- You can view the accessibility checklist here
Keep in mind
- This is a browser based responsive application.
- Closely review the text styles, color, etc from the provided winning design but think about what changes need to be made to improve the application and the customer experience. Do your research!
- 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"
- Tablet: 1024px width, height can be expanded.
- 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/
Access to Winning Design & Existing App + Marvel App Prototype
- Please request access from the Copilot and PM to get the latest winning design and access to our existing WISPR app + Marvel App invitation.
- Ask in Challenge Forum or via email to fajar.mln@gmail.com (copilot) and cc adroc@topcoder.com for access.
Target Audience
- Enterprise Email Users (Small to Big Companies)
Judging Criteria
Your submission will be judged on the following criteria:
- Overall design and user experience
- How well does your design updates align with the objectives of the challenge
- Cleanliness of screen design and user flow
- Design Consistency
- Follow best practice of the IBM Design Language.
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 or Sketch 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.
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.