Challenge Summary
Welcome to WinField - Responsive Website Design Challenge.
We need your help to redesign the look and feel of an existing website from the Land O’Lakes group. This specific website serves information about their available programs and product from the lawn industry.
Best of luck.
1. Home Page (Desktop and Phone)
2. Tools Overview (Desktop)
4. Product Detail (Desktop)
5. Article List/Filter (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
1. Home Page (Desktop and Phone)
2. Tools Overview (Desktop)
3. New Product Launch (Desktop)
4. Product Detail (Desktop and Phone)
5. Article List/Filter (Desktop)
6. Article Detail (Desktop)
7. Rep Finder (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
We need your help to redesign the look and feel of an existing website from the Land O’Lakes group. This specific website serves information about their available programs and product from the lawn industry.
Best of luck.
Round 1
Submit your design for a checkpoint feedback.1. Home Page (Desktop and Phone)
2. Tools Overview (Desktop)
4. Product Detail (Desktop)
5. Article List/Filter (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
Round 2
Submit your final design plus checkpoint feedback.1. Home Page (Desktop and Phone)
2. Tools Overview (Desktop)
3. New Product Launch (Desktop)
4. Product Detail (Desktop and Phone)
5. Article List/Filter (Desktop)
6. Article Detail (Desktop)
7. Rep Finder (Desktop)
- Please provide a MarvelApp Presentation (see details below).
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03).
The goal of this challenge is to design the look and feel of a responsive website. You are provided with the existing website, branding and improvements needed to be considered.
Concept Goals
Our main focus as business goal is to get superintendents, growers and operators to consider WinField when making purchasing decisions instilling the belief that WU PPG is as obsessed about their business as they are.
In order to achieve this sensitive goal, we established the following communication goals for your information:
1. Increase awareness of the WinField United PPG brand in the professional products industry among key audiences with on-target, rich content that genuinely reflects our brand:
-- Actively showcase thought leadership by demonstrating insights, expertise and solutions via up to date, rich, relevant content.
2. Connect the brand with customers at key digital moments as they actively seek out information along their decision journey:
-- Deliver a seamless user experience in line with best digital practices.
-- Directly connect users with their sales rep contact via rep locator tool and consider method to drive direct connection (email?).
-- Ensure product information is easy to access and share.
The most important features you need to keep in mind (in order of priority):
1. Products.
2. E-commerce.
3. Thought leadership content (articles, videos, potential future podcasts, etc).
4. Rep locator.
5. Email sign up.
6. Intuitive navigation and user flow.
Regarding to the visual design aspect, the goal is to break from the traditional WinField United branding and create an elegant, elevate, luxury brand for this business unit. We expect the final design to express luxury, staying away from the existing website style (layout and colors), specially the current green colors, instead use the colors from the branding guideline - recently approved new ones.
Screens Requirements
Overall
- Show hover/active states for buttons, dropdowns, breadcrumbs, errors/success states, elements with interaction, etc.
- You can extract photos and content out of the existing website.
- Provide an intuitive navigation through the overall site. See sitemap.
- You can reuse content from the existing website pages. Avoid using “Lorem ipsum” text.
1. Home Page (Desktop and Phone)
See home.
Considerations:
- Come up with a home page design that describes our brand and value.
- Show overviews of major sections and pages (products, tools, etc) and provide intuitive links and navigation to dive into the details views.
- Email update sign-up form should be noticeable.
2. Tools Overview (Desktop)
This is a new page, it doesn’t exist in the current prototype. The goal of this page is to serve as a landing/summary of the different tools available with links to details.
Come up with an interesting layout to display the following tools:
- Adjuvant Selection Guide
- Fertilizer Tool
- GeoTech Tool
- NutriTech Tool
- Pesticide-Efficacy
- Pesticide PH Chart
- TurfTech Tool
Each product summary should have:
- Prominent name/title
- Brief
- Link to see more details.
Keep in mind this type of landing/summary will be also used in the market and program pages, as well as any other. It should be somehow generic to allocate content for other purposes.
3. New Product Launch (Desktop)
This is a new page, it doesn’t exist in the current prototype. The goal of this page is to prominently showcase a new product. The content would be a combination of a product detail page information and marketing content to inform users and drive them to the product detail page.
See new product information example. You can reuse the content and photos from that page. This page would be displayed randomly to the user when we launch a new product. It could be a new full page, an overlay, we are open to suggestions.
Attention! It is not a typical products details page, it is a marketing page, so the approach has to be bold and unique, think of an interesting layout, paragraph styling and unique features to highlight the launch of a new product in the site.
4. Product Detail (Desktop and Phone)
See product.
You can use the photo and information but do not use price neither cart capabilities, just information/description.
Considerations:
- The products shown on website are a mix of both our proprietary products and vended via other supplier partners. We will prioritize our proprietary products first and some of our focus vended products.
5. Article List/Filter (Desktop)
See articles list.
Considerations:
- Deliver easily-accessible, in-depth information. Consider incorporating search functionality, filters, thumbnails for each article, fewer steps in navigation to reach common information types (like tags/labels).
- We envision this feature more than a news/blog list is kind of closer to a education resource center. We want users to be able to find articles on the topics they are interested in as fast as possible (search, filters - similar to a product listing, example - do not copy any information from here, just for reference).
- Social media integration (share buttons, follow buttons, etc.): Twitter, LinkedIn.
6. Article Detail (Desktop)
See article.
Considerations:
- Detailed full view of the article.
- Add related articles, related products, useful information for the user to read related to the article content.
7. Rep Finder (Desktop)
See rep finder.
Considerations:
- Interactive map to locate sales reps.
- We would like to keep the existing functionality from the current version but we are open to suggestions if you think the UX can be improved for this page.
Branding Guidelines
- Use the provided logo.
- Colors and typography usage are provided in the branding book.
- If you don’t own any of the official fonts, replace them with a similar one. You will be asked to replace them during final fixes.
- Keep things consistent. This means all graphic styles should work together.
Screen Specifications
- Desktop: 1280px width. Height as much as needed.
- Mobile: 750px width. Height as much as needed.
- Make sure your work is in a vector format, for retina scaling and high fidelity.
MarvelApp Presentation
- Request a MarvelApp prototype from me (mahestro@copilots.topcoder.com).
- Do not use the forums to request for MarvelApp.
- Provide clickable spots (hotzones) to link your screens and showcase the flow of the solution.
- Provide the MarvelApp shareable link in your notes during submission upload. See example.
Stock Artwork (Illustrations, Icons, Photography)
- Stock artwork is allowed for this challenge.
- Make sure to declare all your assets properly or you might fail screening.
- You don’t want to fail screening? Read this.
Target User
Our audience is a business-to-business customer (US only): golf superintendents, pest control operators, nursery/greenhouse managers, aquatic vegetation managers, lawn care operators.
Other audiences that will use the website include: prospective employees, our sales reps, media, industry influencers, industry associations.
Customer Persona
- Caucasian male.
- 45 years old (core: 45-65, secondary: 35-45).
- Runs a mid-size operation.
- Loves the outdoors, getting his hands “dirty”.
- His values: aspirational, always striving for something better; value-conscious, seeking the biggest bang for the buck; relationships.
- What motivates him to do his work? He started in the business at a young age and is in it for the long haul; has a tireless work ethic and takes pride in work.
- What are his biggest concerns? Labor issues; how sustainability fits with his operation; pressure from external sources.
Judging Criteria
- Interpretation of the user experience.
- Is the website easy to use/intuitive?
- Are mobile-first considerations appropriately applied to the design concept?
- 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 for your submission files.
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop, Illustrator or Sketch. Layers should be named and well organized.
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.