LOST AND FOUND

@phoebehwongdesigns















WEBSITE MOCKUPS


LOST AND FOUND’S CENTRAL HUB 

This website is the central hub Lost and Found. On this website users can read found stories, find and share stories of their own and create new stories to be shared. 
The website’s aim is to be a hub for connection for its users. 

The notes next to each mockup provide descriptions on the websites look and user interactions.



These mockups have been designed using the dimensions of a 13 inch Macboook Air and have been presented in a larger scale to resemble its real life scale. 

‘LANDING’ PAGES



WEBSITE: 


  • The background of this page is an animated colour gradient which is constantly slowly moving and changing
  • There is a wipe transition rather than a continuous scroll when moving between pages  




INTERACTIONS: 


  • Click on arrow or scroll down to move to next page




WEBSITE:


  • The background of this page is an animated colour gradient which is constantly slowly moving and changing
  • There is a wipe transition rather than a continuous scroll when moving between pages 




INTERACTIONS:


  • Click on the different options to go to another page 
  • Scroll down to go to the next page 




WEBSITE:


  • The background of this page is an animated colour gradient which is constantly slowly moving and changing
  • There is a wipe transition rather than a continuous scroll when moving between pages 




INTERACTIONS: 


  • Click on arrows to open up drop downs and read different stories
  • Click on arrows again to close the drop downs 
  • Click ‘Read Stories’ to go to ‘Found Stories’ Page

‘ABOUT LOST AND FOUND’ PAGES

 

WEBSITE:


  • The background of this page is an animated colour gradient which is constantly slowly moving and changing
  • There is a wipe transition rather than a continuous scroll when moving between pages 
  • Arrive on this page by clicking ‘About Us’ on the landing pages or ‘Lost and Found’ on the navigation tab


INTERACTIONS: 


  • Click on arrow or scroll down to move to next page






    WEBSITE: 


    • Each coloured background is an animated colour gradient which is constantly slowly moving and changing











      ‘WHY STORIES’ PAGES







      WEBSITE: 


      • The background of this page is an animated colour gradient which is constantly slowly moving and changing
      • There is a wipe transition rather than a continuous scroll when moving between pages 
      • Arrive on this page by clicking ‘Why Stories’ on the landing pages or ‘Why Stories’ on the navigation tab




      INTERACTIONS: 


      • Click on arrow or scroll down to move to the next page 



      WEBSITE:


      • The background of this page is an animated colour gradient which is constantly slowly moving and changing

      ‘FOUND STORIES’ PAGES





      WEBSITE:


      • The background of this page is an animated colour gradient which is constantly slowly moving and changing
      • There is a wipe transition rather than a continuous scroll when moving between pages 
      • Arrive on this page by clicking ‘Found Stories’ on the landing pages or Found Stories’ on the navigation tab



      INTERACTIONS:  


      • Click on arrow or scroll down to move to the next page




      WEBSITE:


      • The background of this page is an animated colour gradient which is constantly slowly moving and changing
      • There is a wipe transition rather than a continuous scroll when moving between pages 
      • Arrive on this page by clicking ‘Found Stories’ on the landing pages or Found Stories’ on the navigation tab


      INTERACTIONS:


      • Users can filter stories using the option bar 
      • Click ‘clear’ to reset page to the default  

      TO READ STORIES: 


      • Click on the arrows to open drop down of text (example provided) 
      • Click arrow again to close the drop down of text 

      TO FILTER STORIES BY EMOTION:


      • Click on ‘emotion’ to filter stories by emotion
      • The background will change to correspond with the chosen emotion 

      IMAGE GALLERY:


      • Default ‘Found Stories’ page
      • Default ‘Found Stories’ page with expanded stories
        • ‘Found Stories’ page when filtered by emotion






      ‘CREATE STORIES’ PAGES






      WEBSITE:


      • The background of this page is an animated colour gradient which is constantly slowly moving and changing
      • There is a wipe transition rather than a continuous scroll when moving between pages 
      • Arrive on this page by clicking ‘Create Stories’ on the landing pages or ‘Create Stories’ on the navigation tab


      INTERACTIONS:


      • Click on arrow or scroll down to move to the next page

      INTERACTIONS:


      • Users can fully customise the story that they want to create with the options bar at the bottom of each section. 
      • When users choose an emotion, existing stories which they can scroll through will appear. Users can edit and add to these stories 
      • Users can write a joining sentence to easily blend the different stories together
      • Remove, add and move with the top option bar. 
      • Users press the ‘create’ button to view their finished product (page below)


      IMAGE GALLERY:


      1. Default ‘Create Story’ page
      2. Example ‘Create Story’ page

        ‘CREATED STORY’ PAGE

         



        WEBSITE:

        • Arrive on this page by clicking create button at the bottom of ‘create stories’ pages




        INTERACTIONS:

        • Users can save, edit or make another story using the options bar at the bottom 
        • Users can click on ‘read other stories’ to go to ‘Found Stories’ page







        ‘FIND A STORY’ PAGES 





        WEBSITE:


        • The background of this page is an animated colour gradient which is constantly slowly moving and changing
        • There is a wipe transition rather than a continuous scroll when moving between pages 
        • Arrive on this page my clicking ‘Find a Story’ on landing pages or ‘Fnd a Story’ on the navigation bar



        INTERACTIONS


        • Users click on arrow or scroll to move to next page 





        WEBSITE:


          • The background of this page is an animated colour gradient which is constantly slowly moving and changing
          • Users scroll down to move to next page






          WEBSITE:

          • The colour of the background will change to correspond with the selected emotion (example provided)

          INTERACTIONS:


          • Users click on the arrow to open a drop down menu to select an emotion
          • Users type their story in the highlighted box. 
          • Click next when done
          • Finished product of story is presented (example provided)
          • Users can either share their story onto the Lost and Found platforms , go back and edit their story or download their story for themself

          IMAGE GALLERY:

          • Default ‘Find a Story’ page
          • ‘Find a Story’ Page with changed background when an emotion is chosen
          • Example Story 
          • Completed Story page