Challenge Summary
Welcome to Forrester Research Vendor Comparison App Design Challenge! Previously we ran a LUX challenge where we focused on iPad UX/UI design concepts and exploring general look-and-feel direction for the Forrester iPad app.
In this challenge we need to complete Forrester Wave Report search and comparison application static designs based on design direction and wireframes provided. The app needs to create a natural, immersive user experience filled with visualizations and other rich-content.
Round 1
Submit your design for a Checkpoint feedback:
0. Navigation.
1. Login Page.
2. Dashboard Page.
3. Reports Page.
4. Report Detail Page.
5. Vendor Detail Page.
- Provide us with a click map for your design along with all priority screens.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file naming and numbering.
Round 2
Final design plus any Checkpoint feedback:
0. Navigation.
1. Login Page.
2. Dashboard Page.
3. Reports Page.
4. Report Detail Page.
5. Vendor Detail Page.
6. Favorites.
7. Profile.
8. Help.
- Provide us with a click map for your design along with all priority screens.
- Readme.jpg: Provide notes about your submission.
- Make sure all pages have correct flow! Use correct file naming and numbering.
App Purpose:
- Interactive vendor comparison tool.
- Compare different vendors in a particular category.
- Compares products and services.
- Comparison generates custom “Wave” graphic.
App Users:
Client of Forrester:
- Has a User account.
- Is able to search for and view a limited report summary.
- Has purchased Forrester Research Wave Reports and has an account with Forrester.
- Super User, able to search and compare various vendors and how they compare with other vendors within the same category.
- Able, through filtering, to create their own “Wave” graphic and save it, share it.
Vendor:
- Does not have user account.
- Is able to search for and view a limited report summary.
- Able, through switching off other vendors in report detail, to create their own “Wave” graphic and save it, share it.
User Flow:
- Download App.
- Login (if Client).
- Continue without Login (if Vendor).
- After Login the user may:
-- Enter a text search for wave reports.
-- Execute a guided search for wave reports.
-- View wave report summary.
-- Compare wave reports.
-- Create custom wave report comparison by turning on and off switches.
-- Download/share wave report graphic with watermarked Forrester logo.
-- View recent/saved search.
-- View favorite wave reports.
-- View Contact / FAQ / Legal information.
-- Change user settings (client only).
Branding Guidelines:
- Please use https://www.forrester.com/home/ for branding and colors.
Design Requirements:
- Design for iPad Air 2 resolution: 2048 x 1536px at 264dpi (length can extend to fit your designs).
Supporting Documents:
- LUX Winning Design (Source Files.zip).
- Wireframes (Wireframe.zip).
Required Screens:
0) Navigation:
- How does the user navigate this application?
- Include navigation that you think fits with this application.
- Focus on the priority items and how things should be sized.
1) Login Page:
- No wireframe for this screen.
- You can be inspired from 01_login.png.
- A client would sign in with Username/Account.
- A vendor can sign in as Guest.
2) Dashboard Page:
- Please refer to dashboard.html
- We only need your help changing the coloring of this page based on provided branding guidelines..
- User can view:
-- Recent Reports (wave thumbnail, client category, name, date of report).
-- Recent Vendor View.
-- Link to Saved Searches.
-- Link to favorite reports.
-- Link to custom “Waves”.
- Guest view:
-- The Guest is limited to what they can gain access to. None of the saved searches, favorites, or user settings will be accessible.
-- This mainly applies to the dashboard screen and side navigation. Navigation elements for favorites and user settings would be hidden.
-- On the dashboard screen, the "saved searches" and "favorite reports" would not be available. The dashboard interface should be adjusted to compensate for this.
3) Reports Page:
- Please refer to search.html
- User can search for vendor, product name or category.
- Show last search (tap to go back to the results).
- Show saved searches. (tab to show search results)
- Guided search:
-- User have to make selections here, we need it to be generic as shown in wireframe:
-- Step 1.
-- Step 2.
-- Step 3.
-- Step 4.
- Search Results:
-- Sort by: Vendor, Author, Date.
- Clicking on a report title from search results will take user to Report Detail page.
4) Report Detail Page:
- Please refer to report_detail.html
- Wave Graphic (changes with toggle panel switches).
Toolbar:
- Share:
-- Download watermarked Forrester wave.
-- Email watermarked Forrester wave.
- Print watermarked forrester wave.
- Favorite.
Report:
- Wave on top.
-- Tap vendors on wave, shows details of vendor in report. (vendor detail page)
Toggle Panel:
Shows Forrester Categories:
- Current Offering (Binary Switch):
-- Switches turn grey out vendors and rankings throughout the report to draw focus to those who are still switched on
- Strategy (Binary Switch):
-- Switches turn grey out vendors and rankings throughout the report to draw focus to those who are still switched on
- Market Presence (Binary Switch):
-- Switches turn grey out vendors and rankings throughout the report to draw focus to those who are still switched on
- Also show Overall and Vendor Average Score.
5) Vendor Detail Page:
- Please refer to vendor_detail.html
- In this view we will shows details of vendor in report.
6) Favorites:
- No wireframe for this screen.
- If Less than 10 reports, show wave thumbnails, category, company name, report date.
- If more than 10 reports, Show list: category, company name, report date.
Note: Wave thumbnail is the chart shown on each of the squares of the top section, it looks like a series of blue circles with "Vendor 1, Vendor 2, etc." on top of it (in WaveDashboard.jpg).
7) Profile:
- No wireframe for this screen.
- Show us your design concept for profile page here, should be very standard.
8) Help:
- No wireframe for this screen.
- Show us your design concept for profile page here, should be very standard.
- Help contains FAQ and Legal.
Important:
- Keep things consistent. This means all graphic styles should work together
- All graphics should have a similar feel and general aesthetic appearance.
Target Audience:
- Clients of Forrester and vendors as explained above.
Judging Criteria:
In order of importance, you will be judged on:
- How well does your design align with the objectives of the challenge.
- Creativity of your visualizations.
- Cleanliness of your graphics and design.
- Overall Design and 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 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. See more information about Final Fixes.
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.