05.01 + 05.03: Production and Communication
This week we worked on producing final deliverables for our service. We user tested our app prototype and finalized interactions and visual design. We designed the packaging for the at-home product, we dove deeper into the hotel experience, and we began producing our video and presentation for the final presentation.
App
Visual Design
This week we finalized the interactions within the app and applied visual design. There were a few big considerations here. We put a lot of thought into how the user’s data would be displayed to them. It made sense for last night’s sleep data to be the default dashboard screen, since they would want to view this more often after a night of sleep, and then users can dive into trends across a week or month. In the navigation, the ability to begin a sleep cycle exists in the bottom nav so that a user can access it from anywhere in the app. We also made the visuals very simple and clear, foregoing visual clutter to defer to the data visualizations and main actions.
User Testing
After completing the prototyping of the application, the packaging and the instruction card, we began testing it out with several participants.
We recevied really positive feedback about the look and feel of the mobile application and the instruction card. The information on both was clear and easy to follow.
“I really like the look of this — really clean and fun”
“While reading through what’s on the screen, I can tell it’s well designed”
“Well done onboarding”
The participants thought that the writing was relatable and concise. There were a few small adjustments about sizing and amount of information. They were looking for a little more clarity about where to set up the hardware but that is easily resolvable for the instruction sheet.
When the participants reviewed the data, they found that it was simple and nicely presented. Things they asked about it were: What is the sleep score — how is it comprised/calculated, what does it mean? What is the percentage? “If I have information or know this, it makes sense!”
This week, we adjusted some of the colors of the data after speaking with the user testers. “The visual style disappeared with the colors. I don’t think red and yellow are used anywhere else. Maybe use one of those (red and yellow) and then had in the darker blue.”
“I don’t quite understand what the colors mean. Ex — would be FitBit: red is awake, two blues are restless/asleep. They have a key that would be helpful. And the spikes should be smaller.” As a result, we are changing and clarifying the information we are providing as a result of the user testing. We found it to be very insightful and validating. It was refreshing to be given clear feedback about to improve and we plan to alter our prototype accordingly.
Packaging
After a few revisions, we settled on our wordmark and the icon pattern we wanted to use for the box. We created both of these using Procreate and then translating the drawings into vector images. With the word mark, we wanted to convey something whimsical and “cloud-like” so we decide to use a handwritten style with loopy letters. The icon pattern we started with simple clouds, moons and stars. We added in the music notes as a nod to the music prompt and the z’s and sheep because they represented sleep. After playing with a few arrangements, we step and repeated a pattern of the drawings to create our field/pattern.
Moving forward, we used the icon pattern on the packaging and as a background image (for the title of our presentation and the instruction card). The pattern uses either the purple hue from our gradient or is a set in white at an opacity of 15% on a navy background.
