Knit
Annotated Wireframes
Our paper prototype served as a model for some of the apps more commonly used features, but after receiving critiques and redesigning those pages we needed to figure out how the rest of the app was going to look. Thanks to our sitemap we knew what had yet to be designed, and used it as the basis of our wireframe layout for the entire app.
We used a prototyping program (Axure) to design to rest of Knit’s aspects. Some of the new pages we added include:
-
A Home page
-
A Settings page
-
A Contact Setting page
-
A Calendar page
-
A Reminders list page
-
A Groups page
-
A Group creation page
-
A Groups list page
We also created a visual interface state transition diagram to illustrate a key path of our app. This illustrated several methods that a user could create a reminder for a contact or group after being motivated to get in touch with them.

![]() | ![]() |
---|---|
![]() | ![]() |
![]() |
Upon receiving feedback from our peers about Knit's interface, we went on and flushed out more of the app's design with their critiques in mind.