Challenge Summary
Welcome to the FAST!! AppXpress Branding Update Challenge! In this challenge, we are looking to quickly update/redesign the AppXpress.com site to bring it more inline with the Appirio brand and to also contiunue refining and updating the overall user experience. AppXpress is a service that allows customers to quickly and easily design and build an application with the help of the TopCoder Community. AppXpress is a new and refined process for simplifying the process of accessing TopCoder!
Key things
- Keep it simple
- Make sure your graphics are refined, clean and consitent
- Look to improve and refine the UX (if you were to use this site... what makes sense)
This is a FAST challenge! We are looking to have design updates this week so we can start applying your new design next week.
Rolling Review:
- Blake Walles (bwalles) and Adam Morehead (adroc) will provide a rolling review of your designs between the start of the challenge and the checkpoint deadline
Good luck!
Round 1
adroc and bwalles will be providing Rolling and Checkpoint Feedback.
- We would like you to focus on these screens for the Checkpoint
1) Landing Page
2) Get Started
3) Any other pages you would like feedback on
- Make sure to number your files (00, 01, 02, 03) etc.
Round 2
Submit all required pages plus any checkpoint updates and feedback
Challenge Description:
The goal of this challenge is to quickly update the user interface of AppXpress.com. This is a Appirio service that allows new clients to rquickly and easily design and build an application. This service is asking simple questions and is very focused in how a customer interacts with the TopCoder Community.
Since this is a FAST Contest, we want you to focus more on updating the look and feel and UX, rather than worry about completing all pages. The key thing is to refine and update all the graphics to be more of an Appirio branded site and make sure icons, colors, navigation is clean and crisp.
Focus:
- Update the branding
- Use the Appirio blue's correctly
- Refine the icons!
- Make sure your primary and secondary colors make sense... keep it clean!
Rolling Review:
- Blake Walles (bwalles) and Adam Morehead (adroc) will provide a rolling review of your designs between the start of the challenge and the checkpoint deadline.
- Submit your design early for a "Rolling Review"
- You must watch the forum for your design feedback
Design Guidelines:
- We need AppXpress.com to belong to the same design family as Appirio.com - a unified brand.
- Typography: Refer to the use of typography on appirio.com
- Color: Use the color palette from Appirio current online "standards" (see also in attached style guide):
-- Dark blue
-- Lighter blue
-- Gray and white
- Top Navigation: Use same text color for top nav (might need to darken it a bit to ensure readability on multiple platforms, seems a bit light)
- Secondary color palette: Use this for secondary or in-body navigation needs - buttons, etc.
- Icons: Refine the icons! Clean and crisp and very clear to the user.
- Banners: Big banners, banner video and maybe a mega slider at the top so we can implement customer successes and promotions in the space.
- Content: Use Appirio color palette to inform the information hierarchy on the home and landing pages - overview, info or umbrella positioning at the top, and then lower banners of info should get more granular.
- While stock photos are allowed for this challenge, please use imagery that is relevant to this application concept.
Important Notes
- Do not make the site busy... it can be as easy as color, typography and spacing updates
- The site is responsive! Make sure you design within the grid
- Look to make the site better...
Supporting Documents:
- Appirio Style Guide (AppirioStyleGuide.zip)
- Website Sketch - content updates for AppXpress website (Website_Sketch.zip)
Screen size:
- Desktop: 1024px width and height as required.
Required Screens:
Refer existing website for content.
1) Landing Page: (Desktop and Mobile)
See https://appxpress.com/ for existing content, and Website_Sketch.zip for desired content.
- Space for demo video, and headline "What will you build?"
- Call to Actions: "Learn More" and "Product Tour"
These call to actions need not necessarily be placed only here - eg. if it makes for better UX to have them in the primary navigation, you could design it so. We'd like to see your ideas for the best user experience
- Visual depiction of the process / steps:
1. Select your target devices
2. Define your app
3. Select your output (design mockups, or clickable application)
- Overview of Features:
a) Easy to Setup
b) Non-Technical
c) Responsive
d) Quick to Build
- Support / Have A Question:
Leads to Help section
2) Get Started (Desktop and Mobile)
See https://appxpress.com/get-started-2/ for content
This section outlines the packages that are offered, along with pricing details: Design Mockups, Pilot Application, or Production Application
- Link to Support Section
3) Questions - Samples (Desktop)
See https://appxpress.com/help/samples/ for content. This page shows sample images of the design deliverables.
- Is there a better way to show example/portfolio?
4) Shopping Cart (Desktop)
See https://appxpress.com/shoppingcart/ for content
- This will be a standard shopping cart, containing the different app-packages, or selected items that the customer wishes to purchase.
- It should have all the functionalities of any e-commerce shopping cart (ie. fields like: Item Name/Description, Quantity, Price, Options to Edit/Remove)
- Call to actions like Continue Browsing, or Checkout.
5) Login
Need not be a separate page, you could design it as a modal, or whatever you think makes for the best user experience
6) Logo
- Take 30 minutes and provide your approach to the AppXpress Marketplace logo
- We will provde feedback on this at the checkpoint.
Target Audience:
- Users/clients looking to have apps designed and developed.
Judging Criteria:
- Consistency between Appirio.com and AppXpress.com
- How well you plan the user experience and capture your ideas visually.
- Cleanliness of your graphics and design.
- Creativity and ease-of-use is key to the success as it must be engaging to users.
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.
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.