DescriptionOverview: Nimbus Frames are large digital HD resolution digital canvases that allow you to display your own photos and art. You can also show moving art and videos from any video camera on the digital photo frame. You can create playlists to change your decor and enjoy all your travel photos and family portraits as stunning wall art. This can all be controlled with a smart phone app or on the website. It's pretty cool. Through a mutual colleague, I met the lone wolf, Tom, who has been making these products as well as doing all the development work. It's like a really serious hobby of his. However, being so close to the product and lacking design sensibilities, he reached out for UX and visual help from me.
Process: I initially met with Tom at his home office in Evergreen, CO. We talked about the product, ran through a few demos and discussed expectations. The app and website were usable, but not user-friendly to say the least. He gave me a frame and sent me an app download link so I could try things out at home. I dug in hard and took a lot of notes, because you can only experience something for the first time once. This is what all other user's would likely be experiencing, I needed to make sure that I remembered these things and made Tom aware of any major hangups.
After collecting the initial feedback, I starting working up some notes with specific user needs, my assumptions as a designer and user assumptions. I reviewed this with Tom at our next meeting along with a few sketches that showed a general flow chart for the mobile application and some on-boarding screens to discuss. The meeting went well and we sketched out some user flows on a white board to ensure ease of use for the most necessary features.
At this point, I had enough to create a site map and wireframes. I started finding commonalities across different sections of the app. I later used these to create reusable components that Tom could reuse to build the app more easily while retaining consistency for the user. After talking through the wireframes and creating some crude prototypes, I wasn't entirely happy with some of the features. Specifically, browsing for new artwork. As this is a feature best suited for the web application, I wanted to hold off on designing a mobile version until I had a better navigation paradigm. I needed to push forward to create an MVP that we could release and iterate on. The wireframes were now simplified and solidified.
I began the visual design work in Sketch by creating text styles and reusable components. It's important to lay this framework early on to make inevitable changes easier down the road. I wanted the design to be simple, modern and elegant. I also really wanted to make the artwork the central focus of the design. So, I made the header, footer and buttons match the currently selected work of art programmatically. This effect really helps to make the app feel a little more dynamic and delightful. For production, I made use of Zeplin to hand off assets as well as to communicate text styles and components. The development work is ongoing at this point.