Challenge Summary
Welcome to the SaxoTraderGO - Apple CarPlay UX/UI Design Concepts Challenge
In this challenge we want to see your ideas on how to create SaxoTraderGO application for Apple CarPlay based on details requirements below. Create a great UX/UI that will optimize the usage of cognitive and/or AI features to give best experience to our users. This is a concepts challenge, so want to see your unique design ideas and executions.
Entries must be your original work, and must not infringe on the copyright or licenses of others. All standard TopCoder Terms, TopCoder Policies apply to this challenge.
1). Dashboard
2). Account Summary
3). Positions
4). Watchlist
Note:
- Create checkpoint submissions on these 2 following screen sizes
a). 960px × 540px | 16:9
b). 1920px × 720px | 8:3
1). Dashboard
2). Account Summary
3). Positions
4). Watchlist
5). Calendar
6). Any additional Features & Functionality
7). Presentation Screen - 1920x1080 (16:9 Ratio)
Note:
- Create checkpoint submissions on these 2 following screen sizes
a). 960px × 540px | 16:9
b). 1920px × 720px | 8:3
Challenge Objective
SaxoTraderGO is an award-winning mobile trading platform by Saxo Bank.
We would like to explore optimising the design and user experience for Apple CarPlay for the following screens: Dashboard, Account Summary, Positions, Watchlist & Calendar
The existing SaxoTrader mobile app can be downloaded from the App Store for free here https://itunes.apple.com/gb/app/saxotradergo-scm/id486341512?mt=8
You can also create a free account here https://www.home.saxo/accounts/ to start using the app and explore the screens.
Challenge Problem
SaxoTraderGo Apple CarPlay system revolves around a large touchscreen display in the car dashboard. We are designing the UI and experience of the infotainment system, translate challenge requirements below on your design solution. This challenge is all about to ignite how best UX/UI experience, exploring new cognitive/ AI features and functionality for SaxoTraderGo Apple CarPlay.
General Requirements
- Design screens for car touchscreen display
- Color and branding need follow client existing website and application.
- Important: Apple CarPlay has unique UX considerations that need to be taken into account. Please read the Human Interface Guidelines for CarPlay here starting from here: https://developer.apple.com/carplay/human-interface-guidelines/overview/introduction/
- Follow AppleCar Typography for the font usage: https://developer.apple.com/carplay/human-interface-guidelines/visual-design/typography/
- Optimize the usage of Apple CarPlay element: https://developer.apple.com/carplay/human-interface-guidelines/system-elements/action-sheets/
Screen Sizes
- CarPlay supports several landscape-orientation display resolutions with varying pixel densities and aspect ratios. Take extra care in designing your layout so that it looks great on all possible screen sizes. The system automatically scales app icons and interfaces based on the resolution of the display, so they always appear onscreen at roughly the same size. Refer to this page: https://developer.apple.com/carplay/human-interface-guidelines/visual-design/layout/
- For this challenge you need create 2 version on these following Screen Size & Ratio:
a). 960px × 540px | 16:9
b). 1920px × 720px | 8:3
- Use this background of your design demo screens: https://developer.apple.com/carplay/human-interface-guidelines/images/carPlay_hero.png (Create this on separated folder)
Downloadable Files
Design References: https://drive.google.com/open?id=18ypdodV6aVGursfsnpnyU_hdDa76bXrL
Challenge Design Screens
1). Dashboard
- This is the first page user see after launch the SaxoTraderGo application
- Screen should serve as the main command center for the entire page functionalities
- What user see on this Dashboard page?
- How to navigate to between pages?
- What are your ideas for additional cognitive and AI features? Voice search, automatically showing information about the user, their preferences, their schedule, etc.
- We want to see your ideas!
2). Account Summary
Screenshot: 01-Account-Summary.PNG
- This screen will information user Account Summary
- What actions should available on CarPlay system?
3). Positions
Screenshot: 02-Positions.PNG
- This is Positions screens
- Think about how user see this Position data on CarPlay system?
4). Watchlist
Screenshot: 03-Watchlist.PNG
- User need able to change to different Stocks market
- Create different color to indicate the up/down value
- Think how this user see this Watchlist on CarPlay system?
5). Calendar
Screenshot: 04-Calendar.PNG
- Create Calendar look for CarPlay system
- Think about what need displayed on this page.
6). Any additional Features & Functionality
- What are you additional ideas and design concepts
- Any features we can grab from client existing website and application that will useful for this CarPlay system?
- What are additional Cognitive and AI features that add to the overall experience
7). Presentation Screen - 1920x1080 (16:9 Ratio)
- This screen is very important so make it look good!
- If you were walking into a meeting and needed to sell your design - use this screen to showcase your concept.
- DO NOT put extra text on this screen - use it to showcase your application!
Design Considerations
- How do the various screens link together
- Remember, this is a UI in a car. The navigation, buttons, text should all be simple and easy to interact with. Make sure the scale of your UI items make sense
- What are the cognitive and AI features that you can design into the experience
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvelapp request to lunarkid@copilots.topcoder.com
- You MUST include your Marvelapp URL (in your marvelapp prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Judging Criteria
- How well do your design concepts align with the objectives of the challenge
- Our ability to create a demo from your concepts
- Design quality of your visuals/screens
Target Audience
- SaxoTraderGO Potential 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 a layered PSD file, or Adobe Illustrator as a layered AI file or Sketch!
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.
In this challenge we want to see your ideas on how to create SaxoTraderGO application for Apple CarPlay based on details requirements below. Create a great UX/UI that will optimize the usage of cognitive and/or AI features to give best experience to our users. This is a concepts challenge, so want to see your unique design ideas and executions.
Entries must be your original work, and must not infringe on the copyright or licenses of others. All standard TopCoder Terms, TopCoder Policies apply to this challenge.
Round 1
Initial SaxoTraderGO - Apple CarPlay UX/UI Design Concepts for this following functionalities:1). Dashboard
2). Account Summary
3). Positions
4). Watchlist
Note:
- Create checkpoint submissions on these 2 following screen sizes
a). 960px × 540px | 16:9
b). 1920px × 720px | 8:3
Round 2
Final SaxoTraderGO - Apple CarPlay UX/UI Design Concepts for these following screens:1). Dashboard
2). Account Summary
3). Positions
4). Watchlist
5). Calendar
6). Any additional Features & Functionality
7). Presentation Screen - 1920x1080 (16:9 Ratio)
Note:
- Create checkpoint submissions on these 2 following screen sizes
a). 960px × 540px | 16:9
b). 1920px × 720px | 8:3
Challenge Objective
SaxoTraderGO is an award-winning mobile trading platform by Saxo Bank.
We would like to explore optimising the design and user experience for Apple CarPlay for the following screens: Dashboard, Account Summary, Positions, Watchlist & Calendar
The existing SaxoTrader mobile app can be downloaded from the App Store for free here https://itunes.apple.com/gb/app/saxotradergo-scm/id486341512?mt=8
You can also create a free account here https://www.home.saxo/accounts/ to start using the app and explore the screens.
Challenge Problem
SaxoTraderGo Apple CarPlay system revolves around a large touchscreen display in the car dashboard. We are designing the UI and experience of the infotainment system, translate challenge requirements below on your design solution. This challenge is all about to ignite how best UX/UI experience, exploring new cognitive/ AI features and functionality for SaxoTraderGo Apple CarPlay.
General Requirements
- Design screens for car touchscreen display
- Color and branding need follow client existing website and application.
- Important: Apple CarPlay has unique UX considerations that need to be taken into account. Please read the Human Interface Guidelines for CarPlay here starting from here: https://developer.apple.com/carplay/human-interface-guidelines/overview/introduction/
- Follow AppleCar Typography for the font usage: https://developer.apple.com/carplay/human-interface-guidelines/visual-design/typography/
- Optimize the usage of Apple CarPlay element: https://developer.apple.com/carplay/human-interface-guidelines/system-elements/action-sheets/
Screen Sizes
- CarPlay supports several landscape-orientation display resolutions with varying pixel densities and aspect ratios. Take extra care in designing your layout so that it looks great on all possible screen sizes. The system automatically scales app icons and interfaces based on the resolution of the display, so they always appear onscreen at roughly the same size. Refer to this page: https://developer.apple.com/carplay/human-interface-guidelines/visual-design/layout/
- For this challenge you need create 2 version on these following Screen Size & Ratio:
a). 960px × 540px | 16:9
b). 1920px × 720px | 8:3
- Use this background of your design demo screens: https://developer.apple.com/carplay/human-interface-guidelines/images/carPlay_hero.png (Create this on separated folder)
Downloadable Files
Design References: https://drive.google.com/open?id=18ypdodV6aVGursfsnpnyU_hdDa76bXrL
Challenge Design Screens
1). Dashboard
- This is the first page user see after launch the SaxoTraderGo application
- Screen should serve as the main command center for the entire page functionalities
- What user see on this Dashboard page?
- How to navigate to between pages?
- What are your ideas for additional cognitive and AI features? Voice search, automatically showing information about the user, their preferences, their schedule, etc.
- We want to see your ideas!
2). Account Summary
Screenshot: 01-Account-Summary.PNG
- This screen will information user Account Summary
- What actions should available on CarPlay system?
3). Positions
Screenshot: 02-Positions.PNG
- This is Positions screens
- Think about how user see this Position data on CarPlay system?
4). Watchlist
Screenshot: 03-Watchlist.PNG
- User need able to change to different Stocks market
- Create different color to indicate the up/down value
- Think how this user see this Watchlist on CarPlay system?
5). Calendar
Screenshot: 04-Calendar.PNG
- Create Calendar look for CarPlay system
- Think about what need displayed on this page.
6). Any additional Features & Functionality
- What are you additional ideas and design concepts
- Any features we can grab from client existing website and application that will useful for this CarPlay system?
- What are additional Cognitive and AI features that add to the overall experience
7). Presentation Screen - 1920x1080 (16:9 Ratio)
- This screen is very important so make it look good!
- If you were walking into a meeting and needed to sell your design - use this screen to showcase your concept.
- DO NOT put extra text on this screen - use it to showcase your application!
Design Considerations
- How do the various screens link together
- Remember, this is a UI in a car. The navigation, buttons, text should all be simple and easy to interact with. Make sure the scale of your UI items make sense
- What are the cognitive and AI features that you can design into the experience
Marvel Prototype
- We need you to upload your screens to Marvel App.
- Please send your Marvelapp request to lunarkid@copilots.topcoder.com
- You MUST include your Marvelapp URL (in your marvelapp prototype, click on share and then copy the link & share it within your notes/comment this link while you upload).
Judging Criteria
- How well do your design concepts align with the objectives of the challenge
- Our ability to create a demo from your concepts
- Design quality of your visuals/screens
Target Audience
- SaxoTraderGO Potential 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 a layered PSD file, or Adobe Illustrator as a layered AI file or Sketch!
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.