Dinnaco Car Tax Responsive Design Concepts Challenge

Welcome to the Dinnaco Car Tax Responsive Design Concepts Challenge! In this challenge we are looking for your best modern layout and UX ideas on how to translate the content of a static PDF into an simple and interactive responsive website (desktop, tablet and mobile breakpoints). The goal is the keep the experience intuitive and easy to use. As always, reach out in the forum with any questions. Good luck and looking forward to your design ideas!

Round 1

- Homepage/ Landing Screen
- Content Sections/ Sub-pages

 

Round 2

Include checkpoint feedback and refinements from Round 1
- Homepage/ Landing Screen
- Content Sections/ Sub-pages

 

Our client has given us a multiple panel PDF document that they would like to take the content from and turn into a responsive website experience. The PDF contains mostly tables and charts that the user will need to be able to easily access and read on desktop AND mobile devices (tablet and phone). Your layouts and design should take the content and reorganize it in a way that is easy to follow, find information and read content. The Car Tax Guide is intended to provide a quick reference to the current tax regulations for drivers of company cars and employers.

The Tax Guide will also need to have the option of being branding for Dinnaco’s clients. Design the responsive site in a way that will allow the user to quickly update the logo OR add an additional logo. The additional logo will need to be within the header somewhere. Think about ways to sub-brand the experience. The user should also have the ability to update styles (colors) to match a sub-brand or client of Dinnaco’s. These updates will be handled through CSS in the final build, so think simple, NOT entire redesigns for a sub-brand.

Think about simple navigation mechanics and patterns that you can use to keep things organized. How will the content be displayed that allows the user to easily view and interact with the tables and data? Are there additional pieces of interactivity within a table that will make it easier for the user to cross-reference content and/ or make the data more useful and engaging? Show us your ideas and concepts. This is an exercise in modern UI and GREAT UX!

Screen Dimensions:
Your designs should walk across desktop and mobile devices. Think about a unique and appropriate experience for the tablet and mobile views. DO NOT just shrink down the desktop version to for the smaller screens. Think about the navigation, layout and content that needs to adjusted for the smaller screen sizes. Make sure you are using appropriate button (be mindful of suggested tappable area dimensions) and font sizes.
- Desktop: 1280px width (height can expand to fit content)
- Tablet: 1536px width (portrait orientation) (height can expand to fit content)
- Phone: 750px width (portrait orientation) (height can expand to fit content)

Required Screens:
Homepage/ Landing
- Think of this screen as a way for the user to quickly jump to each section within the experience: Corporation Tax, VAT, National Insurance, etc.
- What is the best way to organize and group sections together? Do certain sections of data make sense to group together and display on the same page?
- Think about an engaging and visually stunning experience for the homepage and presenting the content sections to the user. Do you use a cards based layout, icons, etc.
- Would be nice to have an introduction section or overlay (on first visit) that explains the purpose of the app, what it’s used for and/ or how to use it.

Content Sections/ Sub-pages:
- The number of these sub-pages or content sections aren’t defined. They are based on how your organize and structure the content in your designs.
- The content should be organized and presented in a way that makes sense to the user and remains usable and understandable. Does each section in the PDF get it’s own sub-page? Can sections start to be grouped together? How does the user navigate from page to page?
- Make sure you show us a clear user flow that is easy to understand and fast, but also modern and visually engaging. Think simple, but interesting.
- What is the best way to present the table data? Are there additional pieces of interactivity that can be added to make these content pieces more engaging? For example: row highlighting, tool tip style overlays, cross referencing to other tables or pages within the site. Think through the user experience of this and show us some ideas.

Branding:
Refer to the Design Direction Site

Included Documents:
We’ve included a Design Direction Site to help get you started. This included branding information, current PDF input, inspiration, additional directions and examples. This will become your single source outside of the challenge description for information and assets.

Within the Design Direction Site we’ve also included some Bootstrap Framework grid designs to get you started. This would be a great place to start to set up a good structure and well organized layout that will translate easier to tablet and mobile designs.

Target Audience:
Company car leasing customers/prospects

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

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.