Challenge Summary
Welcome to Cloud Dealer - Mobile UI Design Challenge. In this challenge, we need your design expertise to design the mobile UI for the given desktop version of cloud dealer website, this portal allows the cloud servicing companies to sell their products and also allows individual/companies to buy these services through this site.
Round 1
Submit your initial screen for Checkpoint feedback
1) Landing Page (Mobile)
2) Login (Mobile)
3) Enroll (Mobile)
4) Dashboard (Mobile)
5) Marketplace (Mobile)
6) Search Grid/List Views (Mobile)
7) Service Details (Mobile)
Feel free to add any other additional screens that are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Round 2
Your Final designs for all required screens with all checkpoint feedback implemented.
1) Landing Page (Mobile)
2) Login (Mobile)
3) Enroll (Mobile)
4) Dashboard (Mobile)
5) Marketplace (Mobile)
6) Search Grid/List Views (Mobile)
7) Service Details (Mobile)
8) Cart (Mobile)
9) Manage (Mobile)
10) Project Details (Mobile)
11) Add Project Information (Mobile)
12) Custom Solutions (Mobile)
Feel free to add any other additional screens, which are necessary to explain your concept.
Notes.jpg: Any comments about your design for the Client
Make sure all pages have correct flow! Use correct file numbering. (00, 01, 02, 03)
Task of this challenge is to create mobile storyboards for the given cloud dealer storyboards, please go through the below requirements to learn more.
Design Guidelines:
- Make the screens looks like a native app..
- Please show all the screens and provide a user flow/click-path so we can see how the interactions fit together in the application.
- We have attached the attached cloud dealer storyboards.
- Use clean modern typography and white space to help make it seem simple!
- Cloud Dealer is a clean modern site that is approachable and friendly in nature. Bright colors, friendly intuitive user experience, and ease of use are all hallmarks of the Cloud Dealer brand.
Screen Sizes:
We need below sizes:
- iPhone Portrait: 640 x 1136 px
Required Screen:
For all the below screens, please follow the given storyboard designs..
- You may bring any improvements to mobile storyboards based on the given cloud dealer storyboards - think about user experience, how a user would interact with the contents in mobile.
- Feel free to add any additional screens that are required to show the flow of the application..
1) Landing Page (1.1.Landing.png):
- This is the default landing for users..this is quite a lengthy page, show us how your mobile views will look in this view..
2) Login (1.2.Login.png):
- How can we allow the user to login into this portal?
- Show us how login will be displayed in mobile view..
3) Enroll (1.3.Enroll.png):
- If the user has not enrolled with cloud dealer, they will have option to enroll and enter basic details for enrolling!
- How should we have this in the mobile view?
4) Dashboard (2.Dashboard.png):
- Once the user is logged in, they will have access to the dashboard - this is default view for logged in users..
- Design a navigation that looks more like a native application..we have a top navigation and also a navigation in the sidebar - we need your help on how to make it the best user experience for users?
- Note that apart from navigation, we need to show notifications, cart icons that shows the count in them!
- Pay attention to all details in the storyboard
5) Marketplace (3.Marketplace.png):
- Marketplace allows the user to buy the services..follow the storyboards for required contents in this screen.
- There are three categories of services - assume the number of categories could increase in future, how do you think we can allow user to view the services for each of the categories
6) Search Grid/List Views (4.Search-Grid.png and 5.Search-List.png):
- User will have options to search for services and show us how the list, grid view can be shown?
7) Service Details (6.ServiceDetail.png):
- When a user clicks on any of the service in search results or marketplace, they will see this screen
- How do you think details in this screen need to be arranged?
8) Cart (7.Cart.png):
- Cart can be reached by the user when they click on the cart icon
- User will have all the ability they see in this page, looking for your thoughts on how things can be arranged in this page.
9) Manage (8.Manage.png):
- This is the page that allows users to manage different projects that they have and also allows them to create new projects
- This page also shows the statistics, projects, recent orders and recently added users
- Services will be available within each of the project
10) Project Details (9.ProjectDetail.png):
- When a user selects a project from the previous step, they will see this screen..
- This shows list of services that were purchased for this project
- They will also have the ability to add/remove users from the project.
- User will have options to edit project details
- How could we show the projects status in this screen - show us your design thoughts..
11) Add Project Information (10.AddProjectInfo.png):
- User will have the option to add project details, please follow the cloud dealer storyboards
12) Custom Solution (11.CostumSolution.png):
- This shows the custom solutions that the user can build, show us how this will look on mobiles.
- Notification alert need to shown in some way, please have a look at 12.LayoverAlert.png - how can this be shown in your designs?
Target Audience:
- Business end-users (non-technical) who would deploy applications and workloads (not an operations type engineer)
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
- Your design should possible to build and make sense as a mobile application
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.