Challenge Summary
Welcome to the Apollo Mobile Application Storyboard Design Challenge
The purpose of this challenge to build a mobile application which will facilitate the growth of an internal community at our client which will enable their 17,000 staff. They should be able to communicate with each other, to submit opportunities from anywhere. We should help to enable to paradigm of “Spot, Share, Succeed” which translates loosely to spotting an opportunity, sharing it for feedback, and succeeding through implementation of that opportunity. Staff submitting opportunities that convert will be rewarded with certain prizes or perks as a recognition of their opportunities succeeding.
This challenge is not about building a platform - it’s about creating a mobile application that will work with the existing platform within Apollo to drive the growth of the community around that platform. We’re looking for creative ideas around storyboard design for how this application should work and are especially interested in examples of great UX - even to the point where if you disagree with our proposed screens you’re welcome to propose alternative approaches so long as all the data is covered.
Round 1
Your submitted checkpoint design screen for client review.
1. Homepage
2. Profile Page - we want you to be as creative as possible about these badges and prizes.
3. Notifications - we want to see the design for this - make it stand out
4. Submit Opportunity
5. View Opportunities
6. Invite colleagues
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Round 2
Final pages of design solution with updated solution based on client checkpoint feedback
1. Login
2. Homepage
3. Submit Opportunity
4. View opportunities
5. Opportunity Detail
6. Invite colleagues
7. Newsfeed / Activity Feed
8. Newsfeed Detail / Activity Detail page
9. Publish Article
10. Notifications
11. Profile
12. Setting
Notes : Any comments about your solutions, make sure you capture correct flow for every page!
Company Background
Apollo is a multinational professional services network. Apollo helps organisations and individuals create the value they’re looking for, by delivering quality in assurance, tax and advisory services.
File Downloadables
wireframe.zip - Wireframe
iPhone icons GUIDE ONLY.pdf - App Icon
Submission Guidelines
- Re-use color theme based on client’s icon
- Submit your design in iPhone 6 Retina Portrait Screen Size: 750px x 1134px.
- You must anticipate that your design will works when we convert into smaller mobile device screen with responsive design solution.
IMPORTANT!
- Please reference the provided wireframe as starting guidelines for your submission! You’re encouraged to submit better Visual Interface.
- You MUST follow the client brand guidelines and color palette
- Apollo should be the client name/logo
- We want the design to be as engaging as possible - we want users to keep coming back and using the app again and again.
- We are looking for new ideas that are very visually appealing and create a great user experience.
- The application needs to be fun and social but also professional.
- This application will be an iOS native application
- All form elements (input, dropdown, radio, checkbox, textarea, etc) MUST use native design style.
- Use shape format on your .psd so we not lose quality when resized into Standard version.
- DO NOT just coloring existing wireframe, we need you suggest ideas on layout and functionality within the application. If you just follow existing wireframe every submission will look same.
User Interfaces Guidelines
- Navigation/UI is considered to be any element such as buttons, links, menus, lists, etc., that appear
on the display.
- Interactive/touchable areas such as buttons, links, etc., should be obvious – a subtle gradient is ok to
indicate interactivity
- Non-interactive elements such as lists, text boxes, backgrounds, etc., should appear flat.
- Avoid any non-brand textures or designs for use in backgrounds, foregrounds, or overlays.
- Ensure correct usage rights for any photography.
- Avoid ‘fancy’ or ‘flashy’ animations and embellishments such as element animations, drop shadows, bevels, embossing, etc.
- We want icons and designs to be striking and memorable.
Apollo Mobile App Submission Requirements
Challenge Requirements:
For this challenge, you need capture the requirements below into your storyboard solution
1. Login
- Put client’s logo on top of page
- Form need displayed are:
-- Username (input)
-- Password (input)
-- Login (button)
- Show us how validation error works
2. Homepage
- In the header show menu button, title also buttons to invite other users and notifications.
- Every page should have a header that includes the following:
-- Menu button (hamburger) on the left hand side – when clicked side bar menu appears
-- Add colleague button on the right hand side – when clicked gives the pop out
-- Notifications button on the right hand side (when gives you notifications pop out
- Match sidebar menu content
- You need create icons for each menus.
- We would like to include the number of new notifications in a bubble format
- The scrolling screen would be for headline news and scrolls left to right automatically. If clicked takes user to the detail page for the recent activity
- Show us how headline news structured inside the scrolling screen
- Latest News, We want the ‘View All’ to be quite prominent.
- Latest News scrolling would be like a carousel – so you can just keep swiping across, but you have to scroll manually.
- Footer area need displayed Ideas, Converted, Revenues and Bonuses information
- There’s a “Submit Opportunity” button in footer area
- Click this button need show up “Submit Opportunity” modal window
- Footer area only show up in Homepage
- Think about how you design the footer area.
3. Submit Opportunity
- We want the box to pop up and float up onto the screen instead in separated page
- Form need displayed are:
-- Title (input)
-- Category (dropdown). Dropdown values are: Client Specific, Non Client Specific
-- Description (textarea). Could be clients that are being thought of, to inform conversation
-- Is this part of your day job? (dropdown). Dropdown values are: Yes, No
-- Is this confidential? (radio button)
-- Is this part of your day job? (radio button)
-- Cancel (button)
-- Save Draft (button)
-- Submit (button)
- Show information for submitted form that says “we want a pop up box that says “Your opportunity has been successfully submitted.”
- Show alert popup for cancel and save draft
4. View Opportunities
- We want “Submit Your Opportunity Here” button displayed in every page except the homepage
- This page list all opportunities from Public, Personal and Draft
- Show tab format on top of page
- Create Grid view and list view when view all opportunities
- Below the tab, there’s view option, order and search button
- Create separated screens show the interactions of buttons
- Match each Opportunities content like wireframe
5. Opportunity Detail
- Design how Opportunities details page looks - a title and some textual information.
- Show progress bar below the tab
- And Opportunity Descriptions
- Think about how user go back to view all opportunities
6. Invite Colleagues
- This screen show up after click “Invite” icon in the header
- When this button clicked on, we want the box to pop up and onto the screen (rather than direct the
user onto a separate screen).
- Show us a page flow to invite colleagues via phone contact email or sms
- Show us detailed click flow when staff invite colleagues
- When the ‘Invite’ button at the bottom is selected we want a pop up box that says “Your invitation has been successfully sent.”
- “Submit New Opportunity” placed in the bottom of page
7. Newsfeed / Activity Feed
- This page need show 3 tabs for “Featured”, “Favorite” and “All”
- This page need ability for View option, Order and Search
- Add a ‘Publish Article’ bar at the top.
- Under each article there should be a star symbol to set favorite news/activity, the number of shares and comments.
- “Submit New Opportunity” placed in the bottom of page
8. Newsfeed Detail / Activity Detail page
- This is Newsfeed Detail / Activity Detail page look
- Show title and submitter information on top of page
- Comments are allowed on articles and news
- Add way to share the article
- If you click the ‘invite colleague’ symbol at the top the page will include the option for you to include the link to this news article in the invite body.
9. Publish Article
- User landed to this page after click “Publish Article” button in Newsfeed / Activity Feed page
- Form need displayed are:
-- Title (input)
-- Category (dropdown). Dropdown values are: Client Specific, Non Client Specific
-- Article Body (text-editor).
-- File Upload
-- Cancel (button)
-- Save Draft (button)
-- Submit (button)
10. Notifications
- Notification screen come up if the symbol is clicked from the header
- Notifications that are pushed to the app should be top of this page
- There are some notification type like “New/Unread Notifications” and “Notification History”
- Create some different icons to extinguish different achievements
- There will not be comments on opportunities – only on articles and activity.
- Add ‘You have won a badge’.
- Think about how user close this screen
11. Profile
- Profile page divided by personal information, Badges and Performance Statistics
- You might need create unique icon for each badges
12. Setting
- User can toggle on/off for some notification type settings
- Match every settings content
- Put “Logout” button in the bottom of screen
Target Audience
- Current Apollo Customers
Judging Criteria
- How well you create Apollo Mobile App and keep things consistent with the existing design brand.
- Cleanliness of your graphics and design.
- User Experience Mobile application across different mobile platform
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.
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.