Once I had created a narrative for this modules final outcome, I decided to begin developing the website which will communicate this story to its young audience. This included creating a user-flow, sketching wireframes and creating low and high fidelity mockups on Figma. While my final outcome ended up becoming an e-Book, this work was the foundation for this final outcome and allowed me to easily convert many of the successful final elements into InDesign.
Before I began to develop visual wireframes, first I started to consider what journey the user would take to allow them to easily move through the story I am communicating about the Apollo 11 mission. To do so, I sketched several different user-flows in which I could explore considerations such as what content the user would encounter first and how this content could be introduced in an engaging manner.
(above) Refining User-flow to communicate story
(above) Continuing to refine user-flow
(above) Considering user journey via website’s navigation bar
I treated it similarly to creating a user storyboard due to the nature of the final outcome being an almost fictional, mysterious retelling of the Apollo 11 mission; considering I can pace the content provided to feel like a story unfolding gradually to increase tension. Creating a user-flow also enabled me to begin consider what types of content and visual elements I could include to communicate the story better as I move on to sketching wireframes.
Once I was happy with my refined user-flows, I began to adapt these sketches in paper content wireframes. This was a useful exercise which allowed me to consider lot’s of different layouts and navigation elements before I began to build a prototype on Figma.
(above) Website homepage sketches
(above) Considering different navigation layouts
(above) Sketching content pages
(above) Sketching content pages
My paper wireframes enabled me to easily begin creating screens on Figma.
Exploring highlighting content via interesting animation inspired by motion of highlighting information - reflects the theme while allowing me to maintain the consistent body type. Might consider changing the hover trigger to a delay as it is not obvious to the user that this is an interactive feature.
(above) Move in when scroll past interaction utilising components tool
(above) Move in when scroll past interaction utilising components tool
(above) Utilised components to create a scroll enter interaction on Astronaut profile webpage
(above) Hover over information which triggers highlight animation
(above) Hover over information which triggers highlight animation
Exploring how to create the illusion that the user is flicking through a file of physical documents by utilising ability to move pages from right to left, creating an immersive user experience.
(above) Initial prototype navigation animation
(above) Initial prototype navigation animation
(above) Exploring feedback on navigation bar
(above) Exploring feedback on navigation bar
(above) Prototype highlights issue faced with nav
(above) Prototype highlights issue faced with nav