Learn to design and develop in ThingWorx. Gather requirements to inform the design of your custom app. Then sketch the first draft to test the design with users.
If you're implementing out-of-the-box apps, skip these tasks. You'll tailor the apps to user needs later.
Before you begin, complete these steps:
To build a custom app for ThingWorx Navigate, take the time to learn to design for and develop in ThingWorx. This will help you gather essential requirements. It will also help you learn what's possible in ThingWorx.
For a smooth design process, you'll need knowledge and skills in:
One person may have these skills, or they could be shared among several. If your company does not have these skills readily available, work with PTC or an experienced partner. PTC offers services and training courses to help. For example, the service "Execute ThingWorx Navigate Design Workshop" (listed in the services below) will help you determine how your app should look and operate based on your UX requirements.
Training courses are available from PTC University. Some may have prerequisites. To determine which courses best meet your needs, speak with a Training Advisor.
Here are a few courses we recommend:
Recommended Resources
User experience (UX) requirements help you understand how users will interact with your app, what the app looks like, and how the user interface (UI) works. We recommend that an IT lead and UX/UI designer work together to gather requirements. If you do not have access to these skill sets, PTC offers the "Execute ThingWorx Navigate Design Workshop" linked in the services below.
To gather UX requirements, start by interviewing your users. Users are the people who will use the data from the app. Explain the business use case and ask them what data is most important to help them meet that goal. Ask users how they'll search for information in the app. It may be helpful to ask them to demonstrate their current workflow.
As you gather UX requirements, your research should answer the following:
As you research, document your findings to form UX requirements. You'll refer to your requirements as you create and iterate on the UI.
Write user stories before you create an initial design. For this purpose, a user story describes what a user’s goal is in the app based on their role or job.
You'll need the user stories to design the flow of the app. They will help you determine whether the design meets user needs and will be useful when you test your design. Write stories for the various jobs identified in your UX requirements so that your app is inclusive of many needs.
Format user stories like this:
As a [person in a role], I want to [take an action or find something out] so that [desired outcome].
Example:
As a manager, I want to find production data from the last fiscal year so that I can find out if we are on track this year.
User stories should align with your use case and be real-world scenarios. Document the user stories and include them in your UX requirements.
Next, create your initial designs. Review your UX requirements and the business use case to lay out a sitemap or navigation for the app. A sitemap is a diagram that shows the organization of the app and what's included. It helps you establish a hierarchy of elements and get an understanding of your ideal user flow. Use the sitemap to show how things are organized and labeled.
Once you've created a sitemap, design wireframes. These are your first drafts of the user interface (UI) of the app. A wireframe is a low-fidelity, early-stage design. It often contains a grid of empty boxes that represent elements on a screen. To make a wireframe, you can use a tool like Balsamiq or Axure or draw it by hand.
Wireframes provide direction to the developers who will build the app. They also show how users interact with the app. You will be able to use wireframes to test the design with users later.
Focus on what is most important for functionality. The goal of the UI is to make it easy for users to get the information they need when they need it. Look back on UX requirements, user stories, and the business use case. Instead of filling up the screen with widgets, we recommend that you leave blank space. The fewer elements users see, the easier the app will be for them to learn and use. Focus on the user flow and user interactions with the elements. Do not spend time on colors, images, or other styling choices yet. You'll make those decisions later.
In your wireframe, include the following:
As you design, you'll create a sitemap and wireframes. You should also end up with a design document that outlines your design. Keep the design document up to date as you go through design iterations and development.
Once you have wireframes that meet the business use case, you're ready to test them. Go through your user stories first. How do the wireframes perform against the user stories? Make any changes to your wireframes to solve issues that you notice.
Then test the wireframes with real users. Choose a small group of key users to review your wireframes. The key users should have a stake in the success of the app and are part of the main audience for the use case. Get their feedback and evaluate whether the UI is easy to follow.
What you're looking for:
If you need to make changes to the UI, update the wireframes and test with users again. This is a fluid, iterative process. You should feel comfortable making rapid changes and responding to feedback.
You can consider your UI design ready for development when you've met your UX requirements, it aligns with your business use case, and users verify that it meets their needs. Update your design document with any changes so that it's prepared for the developers to use later.
Have a question? Submit your contact information and we’ll reach out within 1 business day. You’re never obligated to purchase or commit.