Challenge Summary
Welcome to the “Thompson & Litton Web Design Challenge”. In this challenge we are looking for you to review the existing site design (treat it like a wireframe) and to create a more modern and clean user experience.
For this new Web design we are looking for a responsive design, as this website should work perfect on any device. Think mobile first when designing it.
Let us know if you have any questions
1) Home (Desktop & Mobile)
2) Service (Desktop & Mobile)
3) Company (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
1) Home (Desktop & Mobile)
2) Service (Desktop & Mobile)
3) Project Type (Desktop & Mobile)
4) Company (Desktop & Mobile)
5) Search Results
6) Contact
7) Careers
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Thompson & Litton is a FULL SERVICE Engineering-Architecture firm with more than 60 years of service in engineering and architectural projects that have contributed to the development and growth of the Virginia area in United States.
This website will be developed as a Wordpress Theme using bootstrap, so have this in mind when designing the website. We are looking for modern, corporate and clean styles. Think on best user experience. Right now this website requires too many “clicks” to get into some main sections, so we need to make this an easier experience for everyone.
Please have in mind that this website will need to work on any device from mobile phone to desktop. So think mobile first when designing this application.
We want you to focus on the user experience and the responsive design (Desktop and Phone).
Chekspir will be managing the challenge and helping with the design feedback. So use the forums to ask all the questions you might have. It is really important that you request for your MarvelApp prototypes with time enough in advance.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily find sections.
- This is a corporate website, so please let’s design in brand and with the professional look and feel of a corporate website.
Required Screens
1) Home - Link - (Desktop & Mobile)
This is what users will see first when accessing this website. Basically this home page is a introduction to this company. Elements we are looking for this page:
- Main Navigation. Research their current navigation and look for ways to improve it. Maybe some dropdown elements for subsections?
- Search Bar.
- Welcome Message.
- Latest News and Informations.
- Footer area.
2) Services - Link - (Desktop & Mobile)
This section showcase all company’s services. Currently it’s showing a sub navigation with all their services, so how can this section be improved? Dropdown sub navigation for “Services” page?. We need you to propose the best UX here.
This is the list of their full services:
- Civil Engineering
- Architecture
- Transportation
- Surveying
- Structural/MEP
- Innovative Project Delivery/Design
Note that some of this sections have 3rd level sub sections inside. We are not looking to design every page of this website. We are just looking that you can propose how this sections should look and how user should navigate between them.
So it is important that you can design the following:
Services Landing
- A 2nd level page
- A 3rd level page
3) Markets/Project Types - Link - (Desktop & Mobile)
This is section showcase the different project types executed by the company. Similar to “Services” page, is showing a sub navigation with all their project types, so how can this section be improved? Dropdown sub navigation for “Project Type” page?. We need you to propose the best UX here.
This is the list of their full project types:
- Adaptive Reuse
- Athletic Facilities
- Criminal Justice & Correctional
- Designer Led Design Build
- Higher Education & PK-12
- Site Development & Stormwater
- Solid Waste
- Telecommunications & Broadband
- Water Resources & Wastewater
- Note that some of this sections have 3rd level sub sections inside. We are not looking to design every page of this website. We are just looking that you can propose how this sections should look and how user should navigate between them.
So it is important that you can design the following:
Project Types Landing
- A 2nd level page
- A 3rd level page.
4) Company - Link - (Desktop & Mobile)
This is section showcase all the information related to the company, plus some extra sub sections with resources, news, jobs, etc. Please see the following list for complete subsections list:
- Who we are
- Doing Business with T&L
- Award Winning Design
- News Room
- Resources
- Seminars and Events
We need to improve the user experience on this section. So think on how the landing page of “Company” can be resumed and how the navigation to the subpages should be represented.
- Note that some of this sections have 3rd level sub sections inside. We are not looking to design every page of this website. We are just looking that you can propose how this sections should look and how user should navigate between them.
So it is important that you can design the following:
Company Types Landing
- A 2nd level page
- A 3rd level page.
5) Search Results
We need to design the layout for the results after a search is made. To see an example of this please write the word “thompson” on the search input and look how the results are being shown on this page. Things to consider:
- Result Title (Hyperlink)
- Short Text or Excerpt. Read the wordpress documentation for this: The Excerpt.
6) Contact - Link
This section will have a list of their current offices locations. We are looking to remove the current side navigation and merge this into a modern and clean page design.
Things to consider:
- Add a map with their locations. (Google Map is fine, if you use another source please document it).
- Simple contact form with the following fields:
- Name
- Email
- Phone
- Reason to Contact (Select Field)
- Comment (Text area).
7) Careers
- Overview
- Search Open Positions
- Learn About T&L
- T&L Career Path
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please use their current branding and web colors. We will provide additional guidance at the checkpoint.
- Please use Open Sans as your main font.
- Focus on the user experience.
- Think mobile first.
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding
- Use Thompson & Litton colors from their current and live website.
- Open to designer. Must be Sans Serif Style Font.
Target Audience:
- Thompson & Litton customers.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a 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.
For this new Web design we are looking for a responsive design, as this website should work perfect on any device. Think mobile first when designing it.
Let us know if you have any questions
Round 1
Submit your initial designs for a checkpoint feedback:1) Home (Desktop & Mobile)
2) Service (Desktop & Mobile)
3) Company (Desktop & Mobile)
- Important: As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for a MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Submit your Final designs:1) Home (Desktop & Mobile)
2) Service (Desktop & Mobile)
3) Project Type (Desktop & Mobile)
4) Company (Desktop & Mobile)
5) Search Results
6) Contact
7) Careers
- Important: As part of your final submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- Please ask in the Forum for an MarvelApp prototype link. You will receive 2 MarvelApp prototypes, one for mobile and one for desktop.
- Make sure to include a URL/Link to your design within your "notes.txt", Important!
- Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Thompson & Litton is a FULL SERVICE Engineering-Architecture firm with more than 60 years of service in engineering and architectural projects that have contributed to the development and growth of the Virginia area in United States.
This website will be developed as a Wordpress Theme using bootstrap, so have this in mind when designing the website. We are looking for modern, corporate and clean styles. Think on best user experience. Right now this website requires too many “clicks” to get into some main sections, so we need to make this an easier experience for everyone.
Please have in mind that this website will need to work on any device from mobile phone to desktop. So think mobile first when designing this application.
We want you to focus on the user experience and the responsive design (Desktop and Phone).
Chekspir will be managing the challenge and helping with the design feedback. So use the forums to ask all the questions you might have. It is really important that you request for your MarvelApp prototypes with time enough in advance.
Things to think about
- We are looking for a nice clean, modern and easy experience. A user needs to be able to easily find sections.
- This is a corporate website, so please let’s design in brand and with the professional look and feel of a corporate website.
Required Screens
1) Home - Link - (Desktop & Mobile)
This is what users will see first when accessing this website. Basically this home page is a introduction to this company. Elements we are looking for this page:
- Main Navigation. Research their current navigation and look for ways to improve it. Maybe some dropdown elements for subsections?
- Search Bar.
- Welcome Message.
- Latest News and Informations.
- Footer area.
2) Services - Link - (Desktop & Mobile)
This section showcase all company’s services. Currently it’s showing a sub navigation with all their services, so how can this section be improved? Dropdown sub navigation for “Services” page?. We need you to propose the best UX here.
This is the list of their full services:
- Civil Engineering
- Architecture
- Transportation
- Surveying
- Structural/MEP
- Innovative Project Delivery/Design
Note that some of this sections have 3rd level sub sections inside. We are not looking to design every page of this website. We are just looking that you can propose how this sections should look and how user should navigate between them.
So it is important that you can design the following:
Services Landing
- A 2nd level page
- A 3rd level page
3) Markets/Project Types - Link - (Desktop & Mobile)
This is section showcase the different project types executed by the company. Similar to “Services” page, is showing a sub navigation with all their project types, so how can this section be improved? Dropdown sub navigation for “Project Type” page?. We need you to propose the best UX here.
This is the list of their full project types:
- Adaptive Reuse
- Athletic Facilities
- Criminal Justice & Correctional
- Designer Led Design Build
- Higher Education & PK-12
- Site Development & Stormwater
- Solid Waste
- Telecommunications & Broadband
- Water Resources & Wastewater
- Note that some of this sections have 3rd level sub sections inside. We are not looking to design every page of this website. We are just looking that you can propose how this sections should look and how user should navigate between them.
So it is important that you can design the following:
Project Types Landing
- A 2nd level page
- A 3rd level page.
4) Company - Link - (Desktop & Mobile)
This is section showcase all the information related to the company, plus some extra sub sections with resources, news, jobs, etc. Please see the following list for complete subsections list:
- Who we are
- Doing Business with T&L
- Award Winning Design
- News Room
- Resources
- Seminars and Events
We need to improve the user experience on this section. So think on how the landing page of “Company” can be resumed and how the navigation to the subpages should be represented.
- Note that some of this sections have 3rd level sub sections inside. We are not looking to design every page of this website. We are just looking that you can propose how this sections should look and how user should navigate between them.
So it is important that you can design the following:
Company Types Landing
- A 2nd level page
- A 3rd level page.
5) Search Results
We need to design the layout for the results after a search is made. To see an example of this please write the word “thompson” on the search input and look how the results are being shown on this page. Things to consider:
- Result Title (Hyperlink)
- Short Text or Excerpt. Read the wordpress documentation for this: The Excerpt.
6) Contact - Link
This section will have a list of their current offices locations. We are looking to remove the current side navigation and merge this into a modern and clean page design.
Things to consider:
- Add a map with their locations. (Google Map is fine, if you use another source please document it).
- Simple contact form with the following fields:
- Name
- Phone
- Reason to Contact (Select Field)
- Comment (Text area).
7) Careers
- Overview
- Search Open Positions
- Learn About T&L
- T&L Career Path
Important:
- Keep things consistent. This means all graphic styles should work together.
- Please use their current branding and web colors. We will provide additional guidance at the checkpoint.
- Please use Open Sans as your main font.
- Focus on the user experience.
- Think mobile first.
Screen Sizes:
- This will be a responsive website. So please use these specifics screens sizes:
Desktop: 1280px width or 2560px width if you work on a retina display, height increased as needed.
Mobile: Design for iPhone 6/7: 750px width and height increased as needed.
- Make sure you create graphics in 'shape' format, so when we resize graphics everything will still look sharp!
Branding
- Use Thompson & Litton colors from their current and live website.
- Open to designer. Must be Sans Serif Style Font.
Target Audience:
- Thompson & Litton customers.
Judging Criteria:
- How well you plan the interactive experience and capture your ideas and experience visually.
- Overall design, UI and user experience.
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 Desktop PNG/JPG Screens. PSD source files
Source Files
All original source files of the submitted design. Files should be created in Adobe Photoshop and saved as a 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.