Challenge Summary
Welcome to 3D Systems - Haptic Device SDK Storyboard Design Challenge. 3D Systems is a cutting edge 3D printing company and they are looking to update the design look and feel for their Open Haptics SDK kit to be more in line with their brand.
For this challenge we’d like to concentrate on three specific areas of their Open Haptics SDK application. Your goal should be to show design concepts that improve the user experience of existing SDK installation, dashboard screens, and technical documentation for a desktop experience.
At the end of this challenge, we are looking to have the designs for
- Installation Screens Designs
- Dashboard Screens
- Technical Documentation Designs
Round 1
Initial Design Concepts of the below for checkpoint review
A. Installation Screens
B. Dashboard Screens
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
Round 2
Final Design Concepts with any checkpoint feedback implemented
A. Installation Screens
B. Dashboard Screens
C. Technical Documentation
Feel free to add any other additional screens which are necessary to explain your concept.
Notes.jpg: Please note any comments about your design for the Client
3D Systems is pioneering 3D printing for everyone. 3DS provides the most advanced and comprehensive design-to-manufacturing solutions including 3D printers, print materials and cloud sourced custom parts.
For this storyboard challenge we are looking to you to help us improve our user experience and update our design for Open Haptics SDK. We will be providing an example of the current look and feel that we want you to update the Open Haptics SDK experience with. The design is very modern and has simple flat UI elements. Take this design direction and improve on it for your design concepts for the following areas that we will be concentrating on for this challenge.
A. Application Install:
Our current application install is OK...but we want to make it better. First...bring it in line with the new provided look and feel. Second...take a look at some of the provided examples and think thru how we can improve the user experience of an application install flow. Ideally we’d like to give the user an idea of how many steps are included in the install and show them their progress as they are “guided” thru the installation process. Think of simple iconography and imagery that works well with the 3DS brand to enhance the user experience of the Application Install flow.
B. SDK Dashboard:
Once a user has successfully installed the application they will be taken to a Welcome/ Dashboard where they have easy access to resources, documentation and other content that helps the user with their understanding of how to work with the application. The Dashboard/SDK Browser will be the developer’s portal to explore the SDK. It has resources to help navigate codebase as well as samples to get one started.
Take a look at some of the provided examples and see how you can use the new 3DS design look and feel to create a SDK dashboard that is well organized and easy for a user to navigate to relevant content.
C. Technical Documentation:
Once a user finds a content item that they are looking for from the dashboard they’ll click into it to get more detail. Currently our technical documentation design does not match our new 3DS design look and feel. We need you to take the provided PDF document and work it into your design concept and new 3DS design look and feel. The PDF should be converted to a web page for easy browsing. A download version should be available as well.
A good example of a SDK site can be found here. Notice how Google handles their documentation. It’s very clean and well laid out with great typography. There’s room for embedded graphics and images, but the overall user experience is simple and easy to use. Use this design example as a guide to how to craft a great user experience for the 3D Systems Open Haptics SDK.
IMPORTANT!! Designs Considerations:
- Looking for modern, intuitive user interface - application should be easy to use.
- Focus on the design being a great user experience
- We had provided a existing screenshots to help you understand, please DO NOT COPY as we are looking to change this, which is the main purpose of this challenge.
- Give importance to the overall layout and think on how a user would interact with the content on the page.
- We had provided design inspirations for each of the items that you will be designing, use it as an inspiration and please DO NOT COPY!
- Show all the screens and provide a user flow/click-path, so we can see how the interactions fit together in the application
- Make sure all your icons/graphics are vectors, so it helps us convert your storyboards to any required size!
Design and Branding Guidelines:
- Please make sure to follow attached design guidelines..
- You may use 3D System logo in your designs
Required Sizes:
As this a desktop application, we would like ti have the size as 1280 x 1024 px
Required Designs:
A. Installations Screens:
These are the Haptic device installation screens, currently these screens are not inline with the current design guidelines, we have also supplied images of 3D printer installation screens which are inline with design guideline.
But, making them inline is not the only goal for this challenge, we are looking for you to:
- Improve existing UI, use and push your designs based on the design guidelines
- Utilize the contents shown in each of the installation screens and come up with thoughts on how to simplify, create better user experience.
- As this is a wizard, how well do you think flow could be made more better and simplified?
- Feel free to add anything that improves the overall user flow/experience.
Below are the steps in installing a haptic device, please grab contents from screenshots and feel free to simplify/digest the steps involved..
1) Welcome:
- This shows a welcome message to the user, assume this as a kind of splash screen.
2) License Agreement:
- Before the user proceed to installation, they need to agree to the terms and conditions
3) Components to Install:
- Once the user has agreed, we show them the components that they want to install which is basically a selection screen
- We need to shows description for each of the components and also the space required to install is shown for the selected components.
4) Path to Install:
- We allow the user to choose a destination path for the haptic device SDK to be installed, usually a default folder will be shown.
- Also show the space available and required to install this device SDK.
- User will be able to select install in this step
5) Installing:
- Looking for your thoughts on how the installing screen need to shown.
- Look to incorporate on what details need to be shown while installation is in progress, maybe a percentage / progress bar to indicate the progress of installation?
6) Installation Success/Error:
- You won't find these screens in the given screenshots, we would like you to come up with thoughts on how the sucess or error screen would look like..
- These screens could show the sucess or error messges and assume sucess screen will have a button like "Finish" to close the installation screen and Error screen could have a button like "Retry" to initiate the installation again
B. Dashboard Screens:
Once the installation of SDK is complete, we need a Dashboard/SDK Browser that will be the developer’s portal to explore the SDK. It has resources to help navigate codebase as well as samples to get one started.
7) Dashboard / SDK Browser:
- We don’t have any existing screen for dashboard and would like you to come up with your concepts based on the details below..
- Go through, research more around dashboard design ideas to come up with thoughts and what would be best to be incorporated on a dashboard
- Client likes the usage of Vertical Tabs..
- What else, do you think could be more effective for a dashboard?
- We have attached a good example of a dashboard experience which is the Printer Setup in the new 3DSPRINT app, note that this also demonstrates that it is inline with the attached design guidelines.
- The horizontal ribbon in this 3DSPRINT example helps separate various categories. For this Haptic Device SDK dashboard, these could be Documentation, Featured Apps, Sample Programs, SDK Supported Features etc.
- This dashboard should include but not limited to the following items:
* SDK Documentation
* Device User Guide/ Device Handling Guidelines
* OpenHaptics Programmers Guide (pdf)
* OpenHaptics API reference.
* Device Diagnostics Application (GTDD Diagnostics)
* Sample Programs
* Link to Help/Forums
* SDK Supported Features
* EULA (end-user license agreement)
* Anything else you suggest?
C. Technical Documentation:
There are couple of things that need to be focussed on:
8) Technical Documentation for API Reference:
- A user could preview the API within the dashboard, download or open it up in their browser.
- Take the provided PDF and convert it to a web page that matches the design look and feel, see this good example of a SDK site here. (note we are not looking for you to create a pdf document, just looking to create site version of this pdf document)
- This design will become a generic template that helps us have any type (text, images, videos etc..) of content in it for additional documentation
- Please show examples for each type of content, “text, images and videos”.. in your template.
9) API Reference Main Image:
- Please have a look at the current cover page design which looks too old and not inline with the current design standard..
- We would like you to come up with a new image that matches the new look and feel and works well with the 3DS brand. You are welcome to use any imagery from the 3DS site.
- Basically looking for a main image, it does not have a size..but we need a "branding image" for the technical documentation page. It's up to the designer to suggest on what size would be the best!
Target Audience:
- Developers
Judging Criteria:
- How well you plan the user experience and capture your ideas visually
- Cleanliness of your graphics and design
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.