Challenge Summary
Welcome to EDMC - Search UI Design Concepts Challenge.
The EDMC is the one stop shop for design students to access everything that they need for their design education. It's a great resource for students and professors to collaborate, share assets, and interact on their course work. Your main goal for this challenge is to help us design the search UI component of this application. You'll be working off of an existing look and feel and we've provided you with several assets to help you start your design concepts. Please see attached referenced Wireframe & PSD assets & Search Scenarios.
Downloads for this challenge are available in Google Drive Folder which requires prior permission to access..please see the challenge description for more details on this.
Round 1
Please provide UI storyboard concept for provided search scenario:
- Basic Search
- Search Results
- Content Details Display
- Advanced Search
- Advanced Search Results
- Feel free to add any additional screens to show your search scenarios.
- Notes.jpg: Any comments about your design for the Client
- NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client
Round 2
- All Required Final Designs (with all required feedback implemented) for review.
- Feel free to add any additional screens to show your search scenarios.
Notes.jpg: Any comments about your design for the Client
NUMBER YOUR SCREENS (01, 02, 03 etc.) - it’s easier to review with the client
Client has an online application that is targeted to students and faculty to help manage and share class content and information. This challenge is focused on improving and implementing a robust search UI and functionality. This application has many main areas/sections where a search will be utilized, so when a user searches for a keyword in the application homepage - then it should return the search results categorized by these main areas/sections and also provide further search features like “Advanced Search Options” to narrow down the search results and help the user in finding the exact item they were searching for. In addition to "Advanced Search" options we will need to see some thought on how to filter and sort the search display results as well.
Challenge Downloads:
Please note, files for this contest are available in Google Drive. Once you register - please request access to the Google Drive Folder by sending a request mail to csystic"at"gmail.com and bwalles"at"appirio.com.
IMPORTANT - Design Considerations!!
- Size of your screen should be 1024px for your width. Height is variable depending on what you are showing for your search results.
- Start your design based off of the provided asset: ai_pinnacle_nav.psd
- Please do not change or work on the top navigation area in ai_pinnacle_nav.psd...only concentrate on the areas of the page layout that have to do with "Search".
- We've also supplied a PSD (ai_pinnacle_DASH.psd & ai_pinnacle_web_nav_accolade.psd) that has some of the icons that they'll be using in your design, feel free to utilize those assets to execute your design.
- Your design should fit in with the existing look and feel and feel like it is part of the existing application.
- This is an application targeted at design students...so your direct opinion on how this looks matters as a designer!
Content Types & Details:
Main Areas/Sections where a search will utilized includes Social, Classrooms, People, Files and Learning Assets. Within each of those sections you will have various types of content to display. Please show these content types in your concepts.
- Adobe file types (PSDs, EPS, JPG, ID) ...all will be displayed in the search results.
- Article (Article name and two lines of descriptive text)
- PDF (Name of the PDF and please come up with Ideas on what else can be shown here)
- Word Docs (Name of the PDF and please come up with Ideas on what else can be shown here)
- Videos (Video Title, Video Thumbnail and please come up with Ideas on what else can be shown here)
- Adobe File types (File name and a couple lines of descriptive text)
- Social content (chats, texts, posts)
- Course Content - Required Content, Supplemental Content, Recommended Content
- File Types, Date Range, Student Content, Faculty Content, Accolades.
- It is up to you to show us how these items should be organized.
- The client likes how the MAC OS search displays results for a search like this by grouping together file common file types.
- The use of icons and other visual cues to help organize the content is encouraged.
- Think of this from the student/ user perspective and think how you would want your content to be organized in a fashion that makes it easily accessible and relevant.
Required Screens:
We have attached a search scenario document (EDMC-Search-Wire.pdf) which shows a wireframe for the below given scenario. We have also attached a PSD file (ai_pinnacle_nav.psd) to help you start your designs; you can have this as a base for your design concepts.
We've also provided you with a sample wireframe (EDMC-Search-Wire.pdf) for how you might structure your search flow for this challenge. This is only a suggestion as to how you might approach this challenge. Can this work? Should it be better? We want you to come up with a solution and show us why it works better. Should the advanced search options be a 1/3 column and the search results be 2/3 of the page? What is the best way to organize the content? What typographical and iconographic hints can we use in organizing our search results displays? This is what we want you to focus on. Please review the sample wireframe (EDMC-Search-Wire.pdf) - page 5 for more detail on what we need to display in our search results.
Scenario 1:
Assume a student is searching the application for a piece of “required reading” content for their course.
Basic Search:
- This is the main screen; you can use the ai_pinnacle_nav.psd as the starting point.
- In this screen, user enters search criteria in the basic search box “Graphic Design 101” at the top right hand corner.
Search Results:
In this screen, based on the keyword entered in previous step - search results are displayed.
- We need the search results to be displayed below the top information (which includes the progress for the course work and its percentage).
- In the search results, we need a text for showing the search keyword – something like “You searched for “Graphic Design 101”
- We need a button somewhere with “Advanced Search” text - please see below in Scenario 2) on the information required within Advanced Search.
- In addition to "Advanced Search" options we will need to see some thought on how to filter ( and sort the search display results as well.
- Search results will be categorized in five main areas.
- Come up ideas to show these areas as a collapsible/expandable sections.
- Within each of the areas, we need to display the different types of content types listed above.
- Please use the “Content Types & Details” given above to show different types of content within search results.
- Please see the 2nd Image in the attached PDF as a sample wireframe of what this could look like.
- If you can show a better arrangement of these contents than shown in the wireframe - then you can show your ideas.
- Please indicate one or two sub categories for course work "required" and "supplemental" – would this be best displayed as an icon?
Filter:
In this step, the student desires to view the content with Required Reading Mark/Icon.
- Please think on how to display the filters, where should these options be shown?
- Filter Options could include: Type of media (PDF, Word Doc, Article, Videos)���, Origination point (did it come from library, faculty content, student content etc.), Courses and Type of Course Material “Required, Recommended or Supplemental”.
- Within the filter, user first selects “Classroom” and then followed by “Required Reading”.
- This will help the user to narrow down the search results and reach their desired content.
Content Details Display:
Assuming user has found the course content by applying the Filters, they view this page, which displays the Article.
- Article Title will be displayed here with tags below it.
- Display some paragraphs of text,
- Provide an area to "comment" on the article
- We need to display “Author Information” with Author’s thumbnail image and Author’s name and badges they had received – what else can be displayed here?
User then moves to Scenario 2...
Scenario 2:
While reading the above article (in Content Details Display), user thinks of a piece of work a peer sent to them last week and they want to comment on it.
Advanced Search:
Use the Content Details Display screen from previous scenario as the initial screen for this.
- Instead of “filtering” search this time, user know exactly what they am looking for so they set some advanced parameters in Advanced Search.
- Come up with ideas on how to display the Advanced Search options. In the wireframe we have shown it as an expandable/collapsible button - do you think this a best way to show Advacned Search?
- Within the “Advanced Search” – we need few checkboxes (Community, Shared Work, World Wide Web, Accolades, Classroom, My Content) and also options to select a Date Range through date picker, file types (please see content types & details given above), more options to choose some criteria and a button to submit the query.
Search Results:
User has found the piece of work easily as there is a peer icon next to it and everything else in the search results has an instructor icon next to it.
- Use the same search results layout, which you designed in Scenario 1.
- In the search results, we need a text for showing the search keyword – something like “You searched for “Graphic Design 101”
- Search results will be categorized in five main areas.
- Within each of the areas, we need to display the heading as “Community” and “Shared Works”
- Below the heading (Community), we need to display a Thumbnail/icon image of an Instructor (how this need to be shown), Instructor name, two lines of text.
- Below the “Shared Works” heading, we need to display the works done by the each peer – please display an icon for this and show the Article Title and two lines of text and also we can display a badge icon for an article.
Content Details Display:
Assuming user has found the course content by applying the Filters, they view this page, which displays the Article.
- Article Title will be displayed here with tags below it.
- Display some paragraphs of text
- Provide an area to "comment" on the article
- We need to display “Author Information” with Author’s thumbnail image and Author’s name and badges (Example: “Piece of the week” Badge) they had received, what else can be displayed here?
User then moves to Scenario 3...
Scenario 3:
While reading the above article (in Content Details Display), user notices that his peer has earned a badge for "Piece of the Week" for this piece of work, so they decide find out the requirements for earning this badge.
Basic Search:
Use the Article Display page from scenario 2 as the initial screen.
- In this screen, user enters search criteria in the basic search box “Piece of the Week Accolade” at the top right hand corner.
Search Results:
- Use the same search results layout, which you designed in Scenario 1.
- In the search results, we need a text for showing the search keyword – something like “You searched for “Piece of the Week Accolade”
- We need a button somewhere with “Advanced Search” text - please see below (in Scenario 2) on the information required within Advanced Search,
- Search results will be categorized in five main areas.
- Within each of the areas, we need to display some heading as “Lorem ipsum alpha” and “Lorem ipsum”
- Under each of the above heading - we need to display “badge ” thumbnail image, Badge name (use example as “Piece of the Week”), two lines of text. Have 4 entries of these under each heading.
Content Details Display:
Assuming user has found the course content by applying the Filters, they view this page, which displays the Article on "Piece of the week".
- Article Title (Piece of the Week) will be displayed here with tags below it.
- We can display “Badge” icon here.
- Display some paragraphs of text (Use some sample text "lorem ipsum").
- At the bottom, we have “Related Content” with icons, name and two lines of text.
Branding Guidelines:
- Follow the existing look & Feel from ai_pinnacle_nav.psd
- We have also attached logo/icons/other UI elements, feel free to use them.
- Follow the colors as from AI colors screen grab.jpg
Target Audience:
- Students, Faculty
Judging Criteria:
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Your design should be possible to build.
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 original source files. Original source files should be saved as layered Photoshop PSD/AI files.
Final Fixes
As part of the final fixes phase you may be asked to modify your graphics (sizes or colors) or modify overall colors. If items were missed from the checkpoint round you may be asked to include them in your final design.
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.