Challenge Summary
Welcome to the Vodafone SIM Only Deals Responsive Design Concepts Challenge
In this challenge we are looking to take a live web page and redesign and explore layout concepts across desktop, tablet, and mobile using Vodafone's new UI and branding guidelines.
We have a single page for SIM Only plans that we would like to explore some new responsive concepts, layouts, and interactions with, using the client's new UI and branding guidelines. The client is looking for layout and design concepts that work across desktop, tablet, and mobile and present an easy and intuitive UX.
The page we are redesigning is here: http://www.vodafone.co.uk/shop/bundles-and-sims/sim-only-deals/. Use this for content input ONLY, not layout or overall UI design. Redesign this page using the new UI guidelines and explorations the client has already started as input.
Design Problem
The challenge we have with our current SIM Only proposition is that we have lots of plans with lots of features, which is confusing for our customers. We need to find a solution that helps make those decisions clear and simple.
Branding
- You MUST use the UI guidelines and explorations provided!
- We are looking for new ways to think about the Design Problem
- Note: The source files are Sketch and we HIGHLY encourage you to use Sketch. However, we realize not everyone has access to Sketch (Windows users), in that case please use Photoshop. You will be responsible for converting the Sketch input into Photoshop.
Screen Sizes
We are designing for responsive web.
- Desktop: 1440px wide (height as needed)
- Tablet: 768px wide (height as needed)
- Mobile: 375px wide (height as needed)
Submission Design Presentation
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to these following email address: tgerring@topcoder.com & lunarkid@copilots.topcoder.com
- Important! Make sure to include the shared URL/Link to your MarvelApp inside your "notes.txt"
Provided Documents
- UI Guidelines & Exploration (Sketch file)
- Vodafone Fonts (must install before viewing Sketch file)
- Sketch Viewer (to view Sketch files without Sketch. Will need to recreate any UI elements from scratch)
SIM Only Deals Page Requirements:
Devices Target: Desktop, Tablet, & Mobile
Page URL: http://www.vodafone.co.uk/shop/bundles-and-sims/sim-only-deals/
- Explore new concepts and layouts using the CONTENT on this page
- We are redesigning the entire page
- Your designs should work across desktop, tablet, and mobile
- Explore great UX for organization content, showing relevant information to the user, and creating an overall great experience.
- Explore solutions that helps the user view, understand, and make the numerous decisions available clear and simple
- Your concepts should fit into what the clients have already been exploring using the new UI guide provided.
Page elements for SIM Only Deals Page:
- Main navigation - Use Main Nav found in Sketch files as starting point
- Main banner - open to new concepts
- Length of Agreement option
- Choose bundle
- Choose Extra
- 12 Months option
- 30 Days option
- Pay as you option
- Plan Details
- Q&A/ FAQs
- Any design suggestion? Feel free to include on your submission.
Target Audience
General public and Vodafone customers
Judging Criteria
Your submission will be judged on the following criterias:
- Overall design and user experience
- How well do your designs follow the UI guidelines
- Responsive layouts and overall user experience
- UX and how well you design the content
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 Sketch, Adobe Illustrator or similar application.
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.
In this challenge we are looking to take a live web page and redesign and explore layout concepts across desktop, tablet, and mobile using Vodafone's new UI and branding guidelines.
Round 1
Initial Vodafone SIM Only Deals Responsive Design Concepts on Desktop & Mobile screen size for SIM Only Deals Landing Page including all additional screens as your design suggestions.Round 2
Final Vodafone SIM Only Deals Responsive Design Concepts on Desktop, Tablet & Mobile screen size combined with Checkpoint Feedback for SIM Only Deals Landing Page including all additional screens as your design suggestions.We have a single page for SIM Only plans that we would like to explore some new responsive concepts, layouts, and interactions with, using the client's new UI and branding guidelines. The client is looking for layout and design concepts that work across desktop, tablet, and mobile and present an easy and intuitive UX.
The page we are redesigning is here: http://www.vodafone.co.uk/shop/bundles-and-sims/sim-only-deals/. Use this for content input ONLY, not layout or overall UI design. Redesign this page using the new UI guidelines and explorations the client has already started as input.
Design Problem
The challenge we have with our current SIM Only proposition is that we have lots of plans with lots of features, which is confusing for our customers. We need to find a solution that helps make those decisions clear and simple.
Branding
- You MUST use the UI guidelines and explorations provided!
- We are looking for new ways to think about the Design Problem
- Note: The source files are Sketch and we HIGHLY encourage you to use Sketch. However, we realize not everyone has access to Sketch (Windows users), in that case please use Photoshop. You will be responsible for converting the Sketch input into Photoshop.
Screen Sizes
We are designing for responsive web.
- Desktop: 1440px wide (height as needed)
- Tablet: 768px wide (height as needed)
- Mobile: 375px wide (height as needed)
Submission Design Presentation
- As part of your checkpoint submission, you must upload your submission to MarvelApp so we can provide direct feedback on your designs.
- If you need an MarvelApp Project, send email OR via challenge forum to these following email address: tgerring@topcoder.com & lunarkid@copilots.topcoder.com
- Important! Make sure to include the shared URL/Link to your MarvelApp inside your "notes.txt"
Provided Documents
- UI Guidelines & Exploration (Sketch file)
- Vodafone Fonts (must install before viewing Sketch file)
- Sketch Viewer (to view Sketch files without Sketch. Will need to recreate any UI elements from scratch)
SIM Only Deals Page Requirements:
Devices Target: Desktop, Tablet, & Mobile
Page URL: http://www.vodafone.co.uk/shop/bundles-and-sims/sim-only-deals/
- Explore new concepts and layouts using the CONTENT on this page
- We are redesigning the entire page
- Your designs should work across desktop, tablet, and mobile
- Explore great UX for organization content, showing relevant information to the user, and creating an overall great experience.
- Explore solutions that helps the user view, understand, and make the numerous decisions available clear and simple
- Your concepts should fit into what the clients have already been exploring using the new UI guide provided.
Page elements for SIM Only Deals Page:
- Main navigation - Use Main Nav found in Sketch files as starting point
- Main banner - open to new concepts
- Length of Agreement option
- Choose bundle
- Choose Extra
- 12 Months option
- 30 Days option
- Pay as you option
- Plan Details
- Q&A/ FAQs
- Any design suggestion? Feel free to include on your submission.
Target Audience
General public and Vodafone customers
Judging Criteria
Your submission will be judged on the following criterias:
- Overall design and user experience
- How well do your designs follow the UI guidelines
- Responsive layouts and overall user experience
- UX and how well you design the content
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 Sketch, Adobe Illustrator or similar application.
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.