Design for a space mission
A working prototype of a web-based software that helps enterprise clients manage IoT weather stations and data.
Team
Diana Zhan, Shan Wang
Duration
Sep, 2019 - Present
Challenge
I needed to build an IoT product system from the ground up by working closely with an interdisciplinary team as the software, hardware and data products were being developed at the same time. In addition, the only way I as the designer could learn about customer requirements is through the marketing team as I cannot contact clients directly.
My responsibilities
I was responsible for designing the hardware product, a web-based dashboard and a mobile app. In the dashboard design, I took charge in information architecture development, wireframe iteration as well as assisting the engineers with developing the working prototype and testing it.
Understanding problem space
Organize requirements in info architecture
This was the first product line of BloomSky targeting enterprise clients, and there were many departments involved in the development process. In order to make sure everyone stays on the same page, we have held kickoff meeting where we balanced customer requirements, our time and resources, and we decided to prioritize the Dashboard features which are summarized in the information architecture below.
Due to the large number of parties involved in this project, it was quite inevitable that each team had different ideas of product positioning and expectations. Through the kickoff meeting, not only did all teams learn more about the project but they also got to know each other better, which laid a solid foundation for future collaborations. If we could conduct contextual inquiry with actual customers, we would be able to further validate our information architecture.
Reflection
Define Workflows
Based on the information architecture, we categorized the product functions into three major workflows: management of the administrators, the product and the data. We listed all relevant screens according to each workflow. This prepared us for the later wireframe design.
Reflection
The completion of the workflows helped us gain a comprehensive understanding of the user interface for our product. Having this visualized operating system would allow marketing to help us test the workflow and come back to us with more detailed customer requirements.
Key features
Current data vs historical data
The key feature of Dashboard is to present to users two types of weather data: live data and historical data. Due to the large volume of both types of data, we have chosen to show them separately. This would allow users to quickly search for the data in need as well as conveniently move on to subsequent steps like downloading the historical data of a specific date.
Device management
Enterprise users may have multiple devices under one account. To make device management and maintenance more convenient for users, we created a device grouping function. Users can group devices based on their needs and monitor them more efficiently on Dashboard.
Iterate on wireframes
Design changes along with development of hardware
Since the development of the hardware product and the Dashboard proceeded simultaneously, any design changes on the hardware would have a direct impact on the Dashboard functions. This posed quite a challenge and resulted in we updating wireframes continuously. For instance, when the rain gauge was separated from the main equipment and designed to be an individual device, we worked to display rain gauge separately on Dashboard to reflect that change.
Reflection
We experienced some difficulties in communication between the software and hardware teams. I found myself as a designer play an important part in facilitating this bilateral communication, and Wireframe would be my best tool to achieve that. Through presenting the Wireframe to different teams, we were able to discover inconsistencies and make adjustments in a timely manner. Personally, I deem it necessary to have real users test the Wireframe through Think Aloud Protocol. It would have helped us discover any design flaw in the early stages thereby significantly reducing the risk of failure.
Assist implementation and testing
After confirming the Wireframe design with each team, we moved on to implementation. With the assistance of front-end and back-end engineers, we were able to complete version No.1 of the working prototype and test it after we got the hardware device. It was really a great team effort to have had both the hardware and the Dashboard function properly as designed.
Testing site in Sunnyvale
Reflection
We had many challenges in developing the working prototype. While collaborating with front-end engineers, I realized that our communication sometimes became difficult due to my lack of coding knowledge. Therefore, I decided to teach myself front-end tools. After a couple of months, I had a solid grasp on HTML, CSS, JavaScript and ReactJS through Codeacademy, and implemented a website for the company later.
Final prototype interface design
Hand over and reflection
The first group of enterprise clients were based in China. And as a result, I handed over the Dashboard to a Chinese design team for further testing and improvement.
Looking back on these five months of work, I really believe that were we able to conduct some user research, the product could be more solid. Conducting a contextual inquiry in the early stage could validate our information architecture. Running think aloud protocols on wireframes could evaluate our design and reduce risks. Developing performance metrics on the product would guide our design in the future.
On the other hand, I have learned a great deal from working with an interdisciplinary team. Firstly, I understood how data was collected and processed, and then generated value in an IoT system. In addition, I learned how to use design skills to facilitate effective communications among teams. My time at BloomSky has helped me discover my passion in dealing with complex systems and solving problems through combining design and technologies.