Windy City Labs
- Style tiles
- High fidelity screens
- Style guide & clickable prototype
Windy City Labs wanted to bring motion sensor technology into the classroom by producing an app that uses a motion tracking chip for recording data in classroom science experiments.
I worked on a team of 4 UI designers. Our team’s task was to design an intuitive interface for an application that records and visualizes data and makes it interesting and fun for a school setting. We were given a set of wireframes from a UX team to work from. We focused primarily on developing the interface for a physics education app that recorded data from a bottle rocket as it is launched into the air; the app would visualize data such as trajectory, velocity and acceleration. Due to an NDA, the names of the sensor chip and application will not be discussed in this case study.
Our process began with a competitive analysis into education and fitness apps. There was no direct competitor for this app but I looked for trends within this domain. The key aspects we focused on were apps that tracked motion, education apps and data visualization.
Upon beginning our style exploration, we decided to use iphone templates in our style tiles as a mobile first design strategy to concentrate more on the content and how the site is used.
After the research, I wanted these design principles to be incorporated into my design
- Fun, youthful and interesting
- Bright and engaging visuals
- Strong visual hierarchy
- Clean interface and good contrast
- Clear visualization of the data
After presenting our style tiles, the client decided it would be best to switch from mobile to tablet. The feedback I received was that the blue style tile was clean, has a better layout and targets the right audience. The glass-like feel was interesting and stood out. This is the design I used for the final product.
One of the challenges we encountered was the wireframes we received had multiple metrics on one screen so the data was over-whelming and content heavy. We also needed to make sure the data was visualized accurately in the final design.
Since we received the wireframes from another UX team, communication was very important. We needed to make sure all aspects of the wireframes were understood and represented correctly in our high fidelity screens
The solutions we came up with was incorporating a clean and minimal color scheme to easily see and understand the data while still engaging the user with interesting design.
High Fidelity Screens
After we received feedback and a specific direction from our style tiles, we got started on our high fidelity screens. The client explained what they wanted the main flow to be and then we chose the appropriate screens to show the complete flow.
Edits to the wireframe screens include:
- Rearrange the tabs and buttons so it is easier for the user
- Group related text together to help the user understand the data
- Hierarchy with text and color
- Change the graphs to show more accurate sample data
Click Here for the InVision clickable prototype
I learned how important visual hierarchy and color was in this project. It had to help the user and not be distracting. I had to be careful with the blurred background and not add too much color because it would draw away from the data. Instead, I made sure that there was plenty of contrast in the data visualization.
The UX team worked hard researching and creating the wireframes so communicating frequently with them was helpful to make sure we are depicting them correctly.
Our clients were very educated with the UI process. They gave us excellent feedback in each meeting and it was great to learn their insights and collaborate our designs with the team. We gave the client opportunity to critique our work and worked as a whole group to ensure that the user has the best experience.