Challenge Summary
Welcome to the Aegle MarketPoint Portal Storyboard Contest. This contest is focus to design Hestia Aegle MarketPoint Portal Storyboard. We need you create screens to help explains how the application layout and UI elements gonna looks like based on completed wireframe.
In the end of this contest we are looking for a process flow and layout design of the pages mentioned more details below as part of the whole application. The application must be user friendly, intuitive, and easy to use. And remember to keep use Interim-Digital-Quick-Reference-Guide.pdf when building the design to match with our existing design theme.
Round 1
For your R1 deliverables, please submit following screen for client review
1). Login
2). Agent User
2.1 Home
2.2 My Activity
2.3 My Profile
2.3.1 Edit My Profile
2.4 My Products
3). Director/Administrator User
3.1 Home
3.4 Market Locations
3.5 Retail Locations
Notes.jpg: Any comments about your design for the Client
Round 2
Final Design will contains all following screen + any updates from client feedback
1). Login
2). Agent User
2.1 Home
2.2 My Activity
2.3 My Profile
2.3.1 Edit My Profile
2.4 My Products
3). Director/Administrator User
3.1 Home
3.2 Change Request
3.2.1 Request Details
3.3 Products
3.4 Market Locations
3.4.1 Market Page - Products
3.4.2 Add Market Location
3.5 Retail Locations
3.5.1 Add Retail Office
3.5.2 Edit Retail Office - Office Name
3.5.3 Retail Office Location Detail
3.6 Application Updates
3.6.1 Application Updates Detail
3.7 Agent Profiles
3.7.1 Agent Profiles Details
3.7.1.1 Agent Products
3.7.2 Edit Agent Profiles
Notes.jpg: Any comments about your design for the Client
Contest Details
In this contest we need create storyboard design based on our completed wireframe(Market Point Wireframe.zip). Keep Aegle MarketPoint Portal application storyboard design clean and professional!
Important
- We attached Humana MarketPOINT Customer (Humana MarketPOINT Customer.zip) and Vitality POC (Vitality-POC-Screenshot.zip) as reference of our expected application design. Maybe you can mimic some of our existing layout/graphics.
- Always refer to Interim-Digital-Quick-Reference-Guide.pdf for the Brand Guidelines when build the storyboard.
- Keep in mind, if you think layout of wireframe need improved in your storyboard. Feel free to suggest us the idea. No restrictions to follow the existing wireframe layout.
- Before you design the page, we need thinking what the best layout to accomodate lot of data that will be displayed in search results for example.
- For any textarea, input, scrollbar, checkboxes, radio etc, make sure your design still can build using standard browser style.
- Suggest us any better wording in every pages.
Storyboard Design Requirements
In your submission, you need create some pages to show page workflows as stated below:
1). Login
- Design login page for user to enter the application.
- After succesfully login, it will take to the "Agent Login" and "Director/Admins" pages. Login will separated by the access role.
- How the error validation looks?
2). Agent User
2.1 Home
- This page show after user logged in with "Agent User" role.
- Are all boxes already in best placements?.
- Page show boxes of "Profile Summary", "My Activity" and "Products Offered".
- "Profile Summary" show quick of Agent Profile.
- "My Activity" show latest activity of Agent. Create clear color difference of background row for "Normal", "Approved" and "Rejected" status.
- Notice there's filter of "Change Status" that will affect the table rows.
- Need zebra strips/alternative row design.
- "Products Offered" is slideshow of product. Any better idea present this box?
- "View All Product", "View Full Profile" and "Edit Profile" already in good placement?
- Put image placeholder for every images/photo.
2.2 My Activity
- This page accessed from "My Activity" tab
- "Filter" box placed on top side. Any idea improve this?
- Create clear color difference of background row for "Normal", "Approved" and "Rejected" status.
- Table header need sort arrow.
- Need zebra strips/alternative row design.
- Click "View Change" link will show modal
- Match the modals content like wireframe. Notice the highlighted color on text.
2.3 My Profile
- This page accessed from "My Profile" tab
- Are all boxes already in best placements?
- "Edit" and "Preview" button placed o the top side.
- Click "Edit" will take to "Edit Profile" page
- Click "Preview" will show modals contains quick info of My Profile
- How present "Product Offered" more better?
- Click "View All" will take to My Product page
- Match the content like wireframe.
- Create best practices typography for the body content.
2.3.1 Edit My Profile
- This is page to editMy Profile
- For any textarea, input, scrollbar, checkboxes, radio etc, make sure your design still can build using standard browser style.
- Need upgrade the layout composition from wireframe design
- "Certification" and "Association" have ability to add row inline page. How your design accomodate that requirements?
- "My Background" show text area. We plan to use tinymce editor plugin when builld the text editor in the application. Need your help figured out which buttons needed in those input?
- How save message design looks?
2.4 My Products
- In this page, user have ability to "Remove" and "Add Products"
- Click "Product Details" link will show the modal of Product Details
- Click "Remove Selected" will show modal contains product need removed.
- How "Removed success message" show?
- Click "Add Product" will show modal contains product need added by user. Need ability to search products in this modal.
3). Director/Administrator User
3.1 Home
- This Director/Administrator page
- Are all boxes already in best placements?
- Match the content like wireframe.
- Create best practices typography for the body content.
3.2 Change Request
- This page have similar layout with 2.2 My Activity
- Match the content like wireframe.
- Click 'View Change" will show the "Change Request Detail"
3.2.1 Request Details
- Instead of modals like in 2.2 My Activity, in this page "Request Details" information displayed in page.
3.3 Products
- This page have similar layout with 2.4 My Products
3.4 Market Locations
- This Market Location show boxes of Market Location
- Need ability to search the Market Location and Add Market Location
- Click Details will take to 3.4.1 Market Page - Products
3.4.1 Market Page - Products
- Market Description has ability to edit the content
- Under the "Products" section. Click "Remove Selected" will show modal contains product need removed.
- Click "Details" will show the modals.
3.4.2 Add Market Location
- "Market Desctiption" show text area. We plan to use tinymce editor plugin when builld the text editor in the application. Need your help figured out which buttons needed in those input?
- How save message design looks?
- Remove the "Product Category" dropdown. But still present the "Product" section.
- How success message will looks?
3.5 Retail Locations
- This Retail Location show boxes of Retail Location
- Need ability to search the Retail Location and Add Retail Office
- How "View Map" modals show up?
- Click "Add Retail Office" will take to 3.5.1 Add Retail Office
- There's Market Location filter on the top side
- Click "View Details" will take to 3.5.2 Edit Retail Office - Office Name
3.5.1 Add Retail Office
3.5.2 Edit Retail Office - Office Name
- Notice the Images have multiple images screenshots.
3.5.3 Retail Office Location Detail
3.6 Application Updates
- Design better implementation for "Visibility Off/On"
- "Discard Updates" will show modals contains message
3.6.1 Application Updates Detail
3.7 Agent Profiles
- Filter placed on the top side. Any idea to improve this?
- Search Result placed below the filter
3.7.1 Agent Profiles Details
- This page have similar layout with 2.3 My Profile
3.7.1.1 Agent Products
- This page have similar layout with 2.4 My Products
3.7.2 Edit Agent Profiles
- This page have similar layout with 2.3.1 Edit My Profile
Target Audience
- Internal Resources
- Potential Customer
Judging Criteria
- Our main concern is to get great user Experience of Aegle MarketPoint application!
- How well you create the storyboard designs. Do not strictly follow wireframe layout, we're open to any ideas about the layout and UI elements.
- How well you implement the required data and any suggestions, interactions and user flow you recommend (provide any notes or comments for the client)
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 contest submission requirements stated above.
Source Files
All source files of all graphics created in either Adobe Photoshop or Illustrator and saved as editable.
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.