Challenge Summary
Welcome to MyWishCompany Account Management Web App Material Design Concepts Design Challenge
For this challenge we need you to create design of Account Management Web App by following Material Design styling using Sketch application only. You need design all required pages based on requirements explained below for Tablet and Mobile screen sizes.
Read more details information on challenge specification. Let’s discuss any questions you have! asdas
Initial MyWishCompany Account Management Web Application using Material Design Concepts for these following screens on Tablet screen size
1). Login
2). Register
3). Email Confirmation
4). Forgot Password
5). Company1 Registration Page
6). Company2 Registration Page
7). Developer Portal Registration Page
Note: Feel free to submit more screens for early feedback
1). Login
2). Register
3). Email Confirmation
4). Account Activation
5). Forgot Password
6). Reset Password
7). Company1 Registration Page
8). Company2 Registration Page
9). Developer Portal Registration Page
Challenge Details
Account management portal is a web application portal through which customers register themselves to access various resources and materials. There are different registration types based on which the customer category and resources sections shall be accessed.
Application Flow
- Application is to be developed to house multiple registration pages.
- Each registration page targets different types of customers and contains fields accordingly.
- Upon registration, user gets the link to proceed further and clicking it the corresponding page will be displayed with message from server.
- On loading this link, the message shall be sent to server and the response shall be rendered.
- The page template will be displayed based on the type of registration which will be available on URL parameter.
- Each registration page link suffix shall denote the type accordingly.
Application Goal
One end point for all registration types for customers and password reset features. Users will click on link on their respective site and they will get the corresponding registration page.
Submission Requirements
General
- Before you start designing, get familiar with Material Design,
- For any component in page make sure element you created possible to build with this Angular Material components
- You can use some Google Material Design UI for Sketch, refer to this url: https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3U1JmRzdsNlo5NTQ/stickersheet-components-20170314.sketch
- Grab template for Tablet and Mobile here: https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3M2k1T0hEY1ZDVWs/whiteframes.sketch
- For all required pages, you need structurized the layout to have Header, Body and Footer.
- All page contents will be have different variations. Header, Body and Footer to be template style which will be updated based on Page type.
- Header logo & footer logo along with contents shall vary based on page type
- The page content shall be modular so that we can create new page and renders appropriately.
- We will fill each section on page with different variation, it can be only text or just image based (banner, graphic, etc)
- Let us know if need more clarification about this!
Note: Refer to this Document for page reference pointed below. Pay attention to each required fields in page:
https://docs.google.com/document/d/1et3j9W5zzVLTPWTZOYCP1SVjFXfSGxCO5daAxMxEtdU/edit?usp=sharing
1). Login
- This is Login page before user access the application
- Create error validation message for incorrect email/password
- Display link for Forgot Password and Register
2). Register
- This screen to let user register on the application
- Notice there’s Password Complexity Requirements link in page
3). Email Confirmation
- This is screen after user complete the Register form
- Title: Please confirm your email address
- Body: Before you can login, please check your email for a message from account@client.com and follow the instructions to complete the account registration and activation process.
4). Account Activation
- This is screen after user see click activation link on email.
- Title: Account Activation
- Body: Your account is now activated. You can continue to Login page
5). Forgot Password
- This screen when user forgot the password
6). Reset Password
- User clicks on the link from email (reset password link) and loads this page
7). Company1 Registration Page
- This is registration page for Company1, you can create custom theme for this page
- Notice there are some logo required in footer
- Make sure all fields follow displayed in your design
- This Registration page will be duplicated to many different company when we develop this application. Make sure your design easy to updated with different color and theme based on different client.
- On this page we need create some fields to make all fields type captured in page, for example:
-- Autocomplete: https://material.angular.io/components/autocomplete/examples
-- Checkboxes: https://material.angular.io/components/checkbox/examples
-- Datepicker: https://material.angular.io/components/datepicker/examples
-- Form field: https://material.angular.io/components/form-field/examples
-- Input: https://material.angular.io/components/input/examples
-- Radio Button: https://material.angular.io/components/radio/examples
-- Select: https://material.angular.io/components/select/examples
-- Slider: https://material.angular.io/components/slider/examples
-- Slide Toggle: https://material.angular.io/components/slide-toggle/overview
8). Company2 Registration Page
- This is registration page for Company2, you can create different custom theme for this page
- Notice there is just 1 logo required in footer
- Make sure all fields follow displayed in your design
- This Registration page will be duplicated to many different company when we develop this application. Make sure your design easy to updated with different color and theme based on different client.
- On this page we need create some fields to make all fields type captured in page, for example:
-- Autocomplete: https://material.angular.io/components/autocomplete/examples
-- Checkboxes: https://material.angular.io/components/checkbox/examples
-- Datepicker: https://material.angular.io/components/datepicker/examples
-- Form field: https://material.angular.io/components/form-field/examples
-- Input: https://material.angular.io/components/input/examples
-- Radio Button: https://material.angular.io/components/radio/examples
-- Select: https://material.angular.io/components/select/examples
-- Slider: https://material.angular.io/components/slider/examples
-- Slide Toggle: https://material.angular.io/components/slide-toggle/overview
9). Developer Portal Registration Page
- This is registration page for Developer Portal, you can create custom theme for this page
- Notice there are some logo required in footer
- Make sure all fields follow displayed in your design
Design Submission Formats:
a). Screen Sizes:
- Tablet Screen Size(Standard): 768px(w) × 1024px(h) up to your design
- Mobile Screen Size(Retina): 750px(w) × 1334px(h) up to your design
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Business-like design.
- Color palette:
-- Primary: #00AFD7
-- Secondary: #848381
-- Warning: #EE2737
- Fonts: Sans Serif(Clean, Modern, Informal) need follow Material Design Branding
- Icon Style: Solid Line (Classic)
c). Submission Design Presentation
- As part of your 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 this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Customers of our organization across multiple locations
Judging Criteria
- How well you create Account Management Web App using Material Design Concepts!
- Design should be modular based on the components and re-usability factor should be considered. Follow the DRY principle
- Consistency with Material Design styling
- Component on your design possible to build with Angular Material on next development phase?
- Different theme must use same aesthetic design
- Cleanliness of your graphics and design.
- 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 image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
For this challenge we need you to create design of Account Management Web App by following Material Design styling using Sketch application only. You need design all required pages based on requirements explained below for Tablet and Mobile screen sizes.
Read more details information on challenge specification. Let’s discuss any questions you have! asdas
Round 1
Checkpoint Submission Requirements:Initial MyWishCompany Account Management Web Application using Material Design Concepts for these following screens on Tablet screen size
1). Login
2). Register
3). Email Confirmation
4). Forgot Password
5). Company1 Registration Page
6). Company2 Registration Page
7). Developer Portal Registration Page
Note: Feel free to submit more screens for early feedback
Round 2
Final MyWishCompany Account Management Web App Material Design Concepts Design for these following screens combined with Checkpoint Feedback on Tablet and Mobile screen sizes1). Login
2). Register
3). Email Confirmation
4). Account Activation
5). Forgot Password
6). Reset Password
7). Company1 Registration Page
8). Company2 Registration Page
9). Developer Portal Registration Page
Challenge Details
Account management portal is a web application portal through which customers register themselves to access various resources and materials. There are different registration types based on which the customer category and resources sections shall be accessed.
Application Flow
- Application is to be developed to house multiple registration pages.
- Each registration page targets different types of customers and contains fields accordingly.
- Upon registration, user gets the link to proceed further and clicking it the corresponding page will be displayed with message from server.
- On loading this link, the message shall be sent to server and the response shall be rendered.
- The page template will be displayed based on the type of registration which will be available on URL parameter.
- Each registration page link suffix shall denote the type accordingly.
Application Goal
One end point for all registration types for customers and password reset features. Users will click on link on their respective site and they will get the corresponding registration page.
Submission Requirements
General
- Before you start designing, get familiar with Material Design,
- For any component in page make sure element you created possible to build with this Angular Material components
- You can use some Google Material Design UI for Sketch, refer to this url: https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3U1JmRzdsNlo5NTQ/stickersheet-components-20170314.sketch
- Grab template for Tablet and Mobile here: https://storage.googleapis.com/material-design/publish/material_v_12/assets/0Bzhp5Z4wHba3M2k1T0hEY1ZDVWs/whiteframes.sketch
- For all required pages, you need structurized the layout to have Header, Body and Footer.
- All page contents will be have different variations. Header, Body and Footer to be template style which will be updated based on Page type.
- Header logo & footer logo along with contents shall vary based on page type
- The page content shall be modular so that we can create new page and renders appropriately.
- We will fill each section on page with different variation, it can be only text or just image based (banner, graphic, etc)
- Let us know if need more clarification about this!
Note: Refer to this Document for page reference pointed below. Pay attention to each required fields in page:
https://docs.google.com/document/d/1et3j9W5zzVLTPWTZOYCP1SVjFXfSGxCO5daAxMxEtdU/edit?usp=sharing
1). Login
- This is Login page before user access the application
- Create error validation message for incorrect email/password
- Display link for Forgot Password and Register
2). Register
- This screen to let user register on the application
- Notice there’s Password Complexity Requirements link in page
3). Email Confirmation
- This is screen after user complete the Register form
- Title: Please confirm your email address
- Body: Before you can login, please check your email for a message from account@client.com and follow the instructions to complete the account registration and activation process.
4). Account Activation
- This is screen after user see click activation link on email.
- Title: Account Activation
- Body: Your account is now activated. You can continue to Login page
5). Forgot Password
- This screen when user forgot the password
6). Reset Password
- User clicks on the link from email (reset password link) and loads this page
7). Company1 Registration Page
- This is registration page for Company1, you can create custom theme for this page
- Notice there are some logo required in footer
- Make sure all fields follow displayed in your design
- This Registration page will be duplicated to many different company when we develop this application. Make sure your design easy to updated with different color and theme based on different client.
- On this page we need create some fields to make all fields type captured in page, for example:
-- Autocomplete: https://material.angular.io/components/autocomplete/examples
-- Checkboxes: https://material.angular.io/components/checkbox/examples
-- Datepicker: https://material.angular.io/components/datepicker/examples
-- Form field: https://material.angular.io/components/form-field/examples
-- Input: https://material.angular.io/components/input/examples
-- Radio Button: https://material.angular.io/components/radio/examples
-- Select: https://material.angular.io/components/select/examples
-- Slider: https://material.angular.io/components/slider/examples
-- Slide Toggle: https://material.angular.io/components/slide-toggle/overview
8). Company2 Registration Page
- This is registration page for Company2, you can create different custom theme for this page
- Notice there is just 1 logo required in footer
- Make sure all fields follow displayed in your design
- This Registration page will be duplicated to many different company when we develop this application. Make sure your design easy to updated with different color and theme based on different client.
- On this page we need create some fields to make all fields type captured in page, for example:
-- Autocomplete: https://material.angular.io/components/autocomplete/examples
-- Checkboxes: https://material.angular.io/components/checkbox/examples
-- Datepicker: https://material.angular.io/components/datepicker/examples
-- Form field: https://material.angular.io/components/form-field/examples
-- Input: https://material.angular.io/components/input/examples
-- Radio Button: https://material.angular.io/components/radio/examples
-- Select: https://material.angular.io/components/select/examples
-- Slider: https://material.angular.io/components/slider/examples
-- Slide Toggle: https://material.angular.io/components/slide-toggle/overview
9). Developer Portal Registration Page
- This is registration page for Developer Portal, you can create custom theme for this page
- Notice there are some logo required in footer
- Make sure all fields follow displayed in your design
Design Submission Formats:
a). Screen Sizes:
- Tablet Screen Size(Standard): 768px(w) × 1024px(h) up to your design
- Mobile Screen Size(Retina): 750px(w) × 1334px(h) up to your design
b). Design theme, colors, typography.
- Design Theme: Clean, Professional and Business-like design.
- Color palette:
-- Primary: #00AFD7
-- Secondary: #848381
-- Warning: #EE2737
- Fonts: Sans Serif(Clean, Modern, Informal) need follow Material Design Branding
- Icon Style: Solid Line (Classic)
c). Submission Design Presentation
- As part of your 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 this following email address: lunarkid@copilots.topcoder.com
- Important! Make sure to include a URL/Link to your MarvelApp within your submission notes
Target User
- Customers of our organization across multiple locations
Judging Criteria
- How well you create Account Management Web App using Material Design Concepts!
- Design should be modular based on the components and re-usability factor should be considered. Follow the DRY principle
- Consistency with Material Design styling
- Component on your design possible to build with Angular Material on next development phase?
- Different theme must use same aesthetic design
- Cleanliness of your graphics and design.
- 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 image files based on Challenge submission requirements stated above.
- MarvelApp link for review and to provide feedback
Source Files
All source files of all graphics created in Sketch and saved as editable layer
Final Fixes
As part of the final fixes phase, you may be asked to modify your graphics (sizes or colors) or modify overall colors.
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.