Project 4: Daisy Chain
For this assignment you will create an app from the content of ten linked Wikipedia entries. Everyone will start from the same place: the Wikipedia entry for Interaction Design. From within this entry you will choose a word or phrase which is hyperlinked to another Wikipedia entry, and collect the main column text for that term. From this second term you will choose another hyperlinked term, and so on, for 10 terms. (As an example, I collected the following string: interaction design, Muriel Cooper, SX-70, Mylar, sailboat, paddle, yacht, etc.)
The link chain you create will guide the user flow in your app design. Starting from a splash page, you will design an experience that takes a user from the start through the end of your chain. Consider user flow, navigation standards, and the constraints of the mobile device in your design.
Requirements
- Menu of your choice (hamburger, meatball, kebab, bento)
- Splash Page
- Working prototype that allows the user to get to the end of your chain and back
- 10 Wikipedia articles/content represented in some form
Deliverables:
- Grid sketch frames exported as .pdf
- Final design exported as .pdf
- Link to Site Survey
- Link to Figma Design File
- Step 1: Browse
Starting with “Interaction Design”, create a chain of 10 linked pages. There are two schools of thought with this:- Aim to make an interesting series, an associational series which implicitly makes a particular argument about the consequences or connections of Interaction Design as a practice and a discipline (fun!).
- Have fun and be weird! See where you can land from a shared starting point.
- For each page, collect any content you’d like to include in the app. This includes images, videos, and of course - text. How much is up to you, but try to be consistent with the amount between pages.
- Step 2: Sketch
Now that your chain is defined, create some paper wireframes to establish the structure of your app. From where are you pulling inspiration? Take some time to identify successfully flowing apps, and consider how they move the user through a digital space. - Additionally, you will be creating a user flow diagram for your app. Consider navigation in all directions - how should a user be able to flow through your app? How can they get to the end of your chain and back (and through, and around, and over, and under, etc.)?
- Step 3: Prototype
Move from your paper wireframes to a Figma board. This is the time to establish a design system and UI for your app. - Step 4: Code
Once your app is designed, create a working (i.e., clickable) prototype in Figma.