The Project

The following descriptions and images are in the order that we started working on the project. We began with a knowledge transfer meeting with the client, were we took notes, whiteboarded features to include, and started our initial sketching to validate our ideas. We then moved quickly into low fidelity wireframes, which we presented to the client to validate our approach and ensure that we were covering everything in the requirements. From there, we had very little interaction with the client, and proceeded to make our low fidelity wires into high fidelity wires, finally handing them over to the visual team to make them look amazing. Our final presentation was on Friday, and after a short, week-long sprint, we had created several visually appealing screens, checked off every requirement, created an interactive prototype in Invision, and really impressed our client and their team.

Knowledge Transfer Session

We met with the client first thing Monday morning to talk about the current product, what features the client envisioned to include, and then had a quick brainstorming session as a team to start ideating.

Features to Include

• Alert Notifications
• Finding Customers
• Fault History and Descriptions
• Email Alerts
• System Status Alerts
• Notifications and Event Logs
• Critical Alerts
• Configuration of Customer Devices
• Remote Troubleshooting
• Equipment Setup

Validating Ideas

After meeting with the client, we had a brief 4 hours to start going through all of the information that was presented to us, organize the information in a way that would make the product more efficient and user-friendly, and start sketching. We created some quick low fidelity wireframes to start validating our ideas, and presented to the client on Monday afternoon.

Goals for this Stage

• Become more knowledgeable about the material
• Validate our current ideas
• Ensure we were on the right path for the user persona details
• Start to think about innovative ways to improve the experience

Adding Details

After validating our ideas with the client, we started to add more details to the low fidelity wireframes to create these high fidelity wireframes. This helped the visual designers figure out how to start designing parts of the page. These wireframes also ensured that we had all of the information that the client requested before getting into the pixel perfect details.

Innovating with Usability in Mind

Our main goals for the wireframes were to:

• Build on what the product already had
• Make the product easier to use
• Ensure every detail on the personas were covered
• Show how we can innovate to create a better product
• Add big picture ideas, such as a community for users that would provide more details the client never thought of yet

Our Ideas Come to Life!

Finally, our visual designers took our high fidelity wireframes to the next level and created this final visual designs for the product. With such a colorful palatte and visual appeal, it would be hard not to want to work on this application every day. We put these designs into an interactive Invision prototype to help tell the story of this application in an interactive way.

Goals for the Designs

• Create components that could be used across the system
• Think about the design according to each user profile
• Make the information visually appealing
• One last chance to get all of the details right
• Team approval and critique before showing to the client