SLEEBY
PROTOTYPING
Before we began any prototyping, our first step was to figure out the general flow of user experience while using the app. This user flow was centered around a core loop of using the app to research potential advice/habits for better sleep, then trying them out and either looking for a new method or continuing to use that one, depending on its success.
User Flow Chart
Once we came up with our user flow, we began to build a site map that outlined the key pages that would be necessary to support that flow and any sub-pages that made sense to make the app feel more complete and functional.
-
A discovery page to help with research
-
A profile to keep track of the user’s sleep habits
-
A blog to share any developments/updates
-
A support and about page to provide help at any point
Site Map
Our actual prototyping process started out with our four team members individually creating very quick sketches that would outline the visual design for the five key pages of the app. While each of us came up with very different concepts, it became very clear early on that we were going to end up with a design that heavily emphasized boxes: rectangular menus, buttons, displays, etc.
Sketches
Storyboard
After voting on which of our sketches would be chosen to move forward in our design, we upscaled and recreated them in our lo-fi physical paper prototype, to get a sense of how navigation within and between pages would feel, as well as to unify the basic design of our very different sketches.
Lo-Fi Paper Prototype
After this step, we moved on to beginning the hi-fi prototype of Sleeby (it was at this point that we came up with the name), which was developed in Figma. Our first step was to create our five main pages and their sub-pages, based on our previous prototypes, then build more pages around them based on what we felt was needed for the completeness of the app and feedback from our usability testing. We also continuously tweaked the design of each page based on those same two factors.