Discovery: Home Page & Welcome Screen
For introductory information about the Discovery Project, go to Ansys Discovery: UX Manager. For the information about my role as a designer for the Discovery Project, go to Ansys Discovery: UX Design.
As the early designs forming the foundation of the Discovery product came together, all the project stakeholders agreed it would be important to include a landing page when the user first started up the product. We envisioned this as a portal that the users could return to to in order to find important information, particularly for newer users who were learning the product. Based on our experience with the existing Ansys products, and following up with users and customer support, we believed the Home Page needed to provide access to:
-
Recent projects (including information about the project)
-
Sample projects
-
In-product tutorials
-
Online help
-
Instructional videos
I started out sketching out initial ideas for the welcome page on paper, getting feedback on the early versions of the design. From that feedback, I transitioned the design to low fidelity mockups, reaching out to a larger group of stakeholders to collect feedback. We identified all of the use cases and user scenarios the design should supported, and I made the wireframes to illustrate those concepts.
These are sketches of different ideas I considered for the content of the Home Page
These were the first set of wireframes created from my initial sketches. The focus of these images are the main section (showing recent files the user has opened in Discovery) and the section providing help.
After iterating a couple of times with these wireframes, we determined there was enough information in the design to pass to a developer to create a prototype and we didn’t need to move the design to the level of a high fidelity prototype. This was due to the foundation of design work and the development of the underlying UI framework for Discovery that had been completed to this point. We didn't need a precise design specification detailing all of the exact sizes, colors, margins, etc, but a document that detailed the layout, organization, content, and interactions.
These were the first set of wireframes created from my initial sketches. The focus of these images are the main section (showing recent files the user has opened in Discovery) and the section providing help.
Once the developer created the prototype of the Home Page, I worked with him and the stakeholders to further iterate on the design, making some adjustments based on technical limitations and time available. We determined that the full design could not be achievable for the first release of the software due to the resources that could be allocated for this, so we created a plan for building the features into Discovery over the course of multiple releases.
With agreement over the status of the design in the prototype, I and the initial developer worked with the developers for the Discovery product to create the Home Page based on the initial work that was done. We further iterated on the design, collecting feedback as we went.
Along the way, we learned that some of the data (specifically templates) and features weren’t going to make it into the first release of the product, so we had to go back and readjust the design to fit these new requirements. After making the design adjustments and getting feedback from the stakeholders, I worked with the developer (and did some of the development work myself) to adjust the prototype, then worked with the developers to update the design in the Discovery product. While introducing the Home Page Design into Discovery, we identified that we could include the ability to replace the screenshot of the model geometry used for the project file with a file preview that would allow the user to rotate, zoom, and pan on the geometry while in the home page.
This video captures the functionality that was built into the first version of the Home Page in our test environment
This video captures the simplified version of the Home Page that we integrated into the Discovery Product
Early on at the point of creating the low fidelity wireframes, we removed the requirement to include videos in the Home Page, as we thought it would create a little too much clutter, and wouldn’t be a priority for user to engage with. We still felt there was a need to show videos introducing how to use the software to users who were interested, so that led us to create a design for a Welcome Screen. Our aim was to create a panel that would open up to the user the first time they ran the software after it was installed, where they could watch videos on key features of the software, and then navigate to the Home Page or into an in-product instructional tutorial.
After sharing initial ideas of the design, we realized it was important to have the Welcome Screen require as little interaction as possible, so we adjusted the design, aiming for an experience where the user was just controlling the playback of the videos, and then moving onto the next one. We also wanted to ensure that while viewing the Welcome Screen, the user had an easy way to toggle on/off whether they wanted to see the Welcome Screen when Discovery started up (and providing an easy way to open the Welcome Screen from the Home Page if it was not open).
These are the initial set of mockups we came up with for the Welcome Screen, which was used to implement the first version of the Welcome Screen in our test environment
With the design in place, the focus didn’t immediately turn to implementing it in the product, but rather creating the scripts for the content we wanted to show in the videos. Once we had drafts of the videos, I worked with developers to build the design in our Test Harness. Once we iterated on the design a couple of times, I worked with some of the developers for Discovery to implement the Welcome Screen within Discovery.
With the Welcome Screen available to more stakeholders, we received additional feedback on the content of the videos, as well as improving the interactions between the videos. We were able to make improvements in time for our deadline of the first commercial release of the product, identifying some nice to have features that we could add to it in the future.
Due to time constraints, the first release of the Welcome Screen only had videos with annotations in English. As we moved to the second release (targeted for January 2021), we made sure to create multiple versions of the recorded videos that included annotations in the different languages that Discovery supports aside from English: French, German, Japanese, and Chinese.
This video illustrates the initial implementation of the Welcome Screen within the Discovery Product