Submit a solution
The challenge is finished.

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!

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 applied
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.

- 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:

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.

How To Submit

  • New to Studio? ‌Learn how to compete here
  • Upload your submission in three parts (Learn more here). Your design should be finalized and should contain only a single design concept (do not include multiple designs in a single submission).
  • If your submission wins, your source files must be correct and “Final Fixes” (if applicable) must be completed before payment can be released.
  • You may submit as many times as you'd like during the submission phase, but only the number of files listed above in the Submission Limit that you rank the highest will be considered. You can change the order of your submissions at any time during the submission phase. If you make revisions to your design, please delete submissions you are replacing.

Winner Selection

Submissions are viewable to the client as they are entered into the challenge. Winners are selected by the client and are chosen solely at the client's discretion.

Challenge links

Screening Scorecard

Submission format

Your Design Files:

  1. Look for instructions in this challenge regarding what files to provide.
  2. Place your submission files into a "" file.
  3. Place all of your source files into a "" file.
  4. Declare your fonts, stock photos, and icons in a "Declaration.txt" file.
  5. Create a JPG preview file.
  6. Place the 4 files you just created into a single zip file. This will be what you upload.

Trouble formatting your submission or want to learn more? ‌Read the FAQ.

Fonts, Stock Photos, and Icons:

All fonts, stock photos, and icons within your design must be declared when you submit. DO NOT include any 3rd party files in your submission or source files. Read about the policy.


All submissions are screened for eligibility before the challenge holder picks winners. Don't let your hard work go to waste. Learn more about how to  pass screening.

Challenge links

Questions? ‌Ask in the Challenge Discussion Forums.

Source files

  • Layered PSD files created in Adobe Photoshop or similar
  • AI files created in Adobe Illustrator or similar

You must include all source files with your submission.

Submission limit


ID: 30054923