Challenge Summary
Welcome to "Trestle Responsive Newsletter Design Concepts Challenge". In this challenge, we are looking for your help to create the best possible UI/UX template for our newsletter that will be sent to sales staff to inform them about latest information about new products, promotions, events, deadlines, technology, and other stuff related to our business.
We want you to critically think about the problem and propose the best UI/UX solution on how content information should be displayed, arrange the best navigation structure, and how should the user moves through the site. Your designs should have a simple, modern, and responsive UI and UX. As always, reach out in the forum with any questions. Good luck and looking forward to your design ideas!
01. Email Newsletter Template Screen
02. Homepage Newsletter Screen
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
01. Email Newsletter Template Screen
02. Homepage Newsletter Screen
03. Specie/Category Screen
04. Archive Screen
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Background information
Our client want to create a newsletter for their sales staff to inform them about new products, promotions, events, deadlines, technology, related to their business. In the next phase of this project we will integrate Salesforce information into the newsletter that is specific to each recipient, but this not be part of this project. In this challenge, we want you to focus on creating newsletter template for both our email and website.
Challenge Goals
- Create a responsive newsletter template for email and web (newsletter archive).
Screen Requirements:
01. Email Newsletter Template Screen
WF reference "TrestleDirection.pdf -> Page 2 email template" and "TRESTLE EMAIL MOCKUP 6.7.16.pdf"
- User will receive summary of latest informations via email.
- This email newsletter will be send every period of time to user (Bi-weekly).
- The wireframe (Trestle Direction.pdf and TRESTLE EMAIL MOCKUP 6.7.16.pdf) show rough mockup of summary informations that should be shown in the email.
- All the links in the email will redirect user to Newsletter web.
- Alert Message and Information Message will only appear on the email and visible when we have an information to be published and need user attention. This will be a WYSIWYG area to allow text, links and images.
- Nine specie/category buttons/links will appear on the email. Not every bi-weekly edition will have content for every specie. In the case there is no content, the button/link will be disabled and grayed out.
- All Specie/Category content can be found below:
-- Cattle
-- Horse
-- Dairy
-- Swine
-- Backyard Poultry
-- Specialty-Aqua
-- Show
-- PMI Pet
-- Mazuri
- Other Links:
-- The Farm VIP
-- Business Updates
-- The Trestle Newsletter PDF Version
-- BusinessLink Newsletter PDF
02. Homepage Newsletter Screen
No WF references
- This screen will appear when user access the newsletter website directly.
- What kind of information/content that important to be shown in the homepage:
-- Latest content from each specie/category?
-- Navigation to Archive page where user can access all past newsletter in PDF format?
-- Important links that related to client business
-- Anything else?
03. Specie/Category Detail Screen
WF reference "TrestleDirection.pdf -> Page 2 Newsletter template"
- User will be redirected to this web screen once they click any specie link in the email.
- Web based newsletter that contains news stories and event reminders specific to the specie clicked on in email received
- All 9 specie/category (mentioned in email newsletter requirements) will share the same template layout (only content changes).
- User will be able to check the latest and detailed information about the specie/category from this screen.
- There should be a navigation/menus to go to other specie/category and other links from this screen.
- Chronological list of past, all specie newsletter with links to PDF versions (Searchable).
- Show us what else that we can offers in this screen.
04. Archive Screen
WF reference TrestleDirection.pdf -> Page 2 Archive template
- Chronological list of PDF version of past newsletters with a short abstract accompanying each link to describe each archive entry.
- Archive will have a full text search.
- The newsletter PDF that links from each page will be a compilation of all specie newsletters for that edition. Generated on click.
- The archive will only maintain the PDF version of past editions and will be searchable by keyword.
Documentation
- PURINA_CampaignGuide_v1.pdf (Branding Guidelines)
- TrestleDirection.pdf (flow and wireframes information)
- TRESTLE EMAIL MOCKUP 6.7.16.pdf (sample of email template)
- Photostock folder
Design Direction
- Branding/ UI Guidelines from client (PURINA_CampaignGuide_v1.pdf)
- All page design must maintain the branding established by the Purina web site: http://www.purinamills.com
Screen Size
Your designs should be created as Responsive design
- Desktop: 1280px width with height adjusting accordingly
- Tablet: 1536px width with height adjusting accordingly
- Mobile: 640px width with height adjusting accordingly
Target Audience
- Sales staff
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience
- How well you interpret the example screens and show us new ideas and concepts
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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
We want you to critically think about the problem and propose the best UI/UX solution on how content information should be displayed, arrange the best navigation structure, and how should the user moves through the site. Your designs should have a simple, modern, and responsive UI and UX. As always, reach out in the forum with any questions. Good luck and looking forward to your design ideas!
Round 1
Initial submission for client review (All devices)01. Email Newsletter Template Screen
02. Homepage Newsletter Screen
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Round 2
All requirements like stated in challenge details with client feedback applied01. Email Newsletter Template Screen
02. Homepage Newsletter Screen
03. Specie/Category Screen
04. Archive Screen
- Make sure all pages have correct flow. Please number your files (00, 01, 02, 03).
- Readme.jpg: If needed, provide notes about your submission
Background information
Our client want to create a newsletter for their sales staff to inform them about new products, promotions, events, deadlines, technology, related to their business. In the next phase of this project we will integrate Salesforce information into the newsletter that is specific to each recipient, but this not be part of this project. In this challenge, we want you to focus on creating newsletter template for both our email and website.
Challenge Goals
- Create a responsive newsletter template for email and web (newsletter archive).
Screen Requirements:
01. Email Newsletter Template Screen
WF reference "TrestleDirection.pdf -> Page 2 email template" and "TRESTLE EMAIL MOCKUP 6.7.16.pdf"
- User will receive summary of latest informations via email.
- This email newsletter will be send every period of time to user (Bi-weekly).
- The wireframe (Trestle Direction.pdf and TRESTLE EMAIL MOCKUP 6.7.16.pdf) show rough mockup of summary informations that should be shown in the email.
- All the links in the email will redirect user to Newsletter web.
- Alert Message and Information Message will only appear on the email and visible when we have an information to be published and need user attention. This will be a WYSIWYG area to allow text, links and images.
- Nine specie/category buttons/links will appear on the email. Not every bi-weekly edition will have content for every specie. In the case there is no content, the button/link will be disabled and grayed out.
- All Specie/Category content can be found below:
-- Cattle
-- Horse
-- Dairy
-- Swine
-- Backyard Poultry
-- Specialty-Aqua
-- Show
-- PMI Pet
-- Mazuri
- Other Links:
-- The Farm VIP
-- Business Updates
-- The Trestle Newsletter PDF Version
-- BusinessLink Newsletter PDF
02. Homepage Newsletter Screen
No WF references
- This screen will appear when user access the newsletter website directly.
- What kind of information/content that important to be shown in the homepage:
-- Latest content from each specie/category?
-- Navigation to Archive page where user can access all past newsletter in PDF format?
-- Important links that related to client business
-- Anything else?
03. Specie/Category Detail Screen
WF reference "TrestleDirection.pdf -> Page 2 Newsletter template"
- User will be redirected to this web screen once they click any specie link in the email.
- Web based newsletter that contains news stories and event reminders specific to the specie clicked on in email received
- All 9 specie/category (mentioned in email newsletter requirements) will share the same template layout (only content changes).
- User will be able to check the latest and detailed information about the specie/category from this screen.
- There should be a navigation/menus to go to other specie/category and other links from this screen.
- Chronological list of past, all specie newsletter with links to PDF versions (Searchable).
- Show us what else that we can offers in this screen.
04. Archive Screen
WF reference TrestleDirection.pdf -> Page 2 Archive template
- Chronological list of PDF version of past newsletters with a short abstract accompanying each link to describe each archive entry.
- Archive will have a full text search.
- The newsletter PDF that links from each page will be a compilation of all specie newsletters for that edition. Generated on click.
- The archive will only maintain the PDF version of past editions and will be searchable by keyword.
Documentation
- PURINA_CampaignGuide_v1.pdf (Branding Guidelines)
- TrestleDirection.pdf (flow and wireframes information)
- TRESTLE EMAIL MOCKUP 6.7.16.pdf (sample of email template)
- Photostock folder
Design Direction
- Branding/ UI Guidelines from client (PURINA_CampaignGuide_v1.pdf)
- All page design must maintain the branding established by the Purina web site: http://www.purinamills.com
Screen Size
Your designs should be created as Responsive design
- Desktop: 1280px width with height adjusting accordingly
- Tablet: 1536px width with height adjusting accordingly
- Mobile: 640px width with height adjusting accordingly
Target Audience
- Sales staff
Judging Criteria
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Overall design, UI and user experience
- How well you interpret the example screens and show us new ideas and concepts
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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as layered PSD file, or Adobe Illustrator as a layered AI file.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. We may ask you to update your design or graphics based on checkpoint feedback.
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.