large_Crossover Series NFTs.png

medium_Crossover Series NFTs.png

small_Crossover Series NFTs.png

thumbnail_Crossover Series NFTs.png

From Photography to NFT Art: Twisted Digital Landscapes with Nate Hill

From Design System to ‘NFT Design System’: Creating TinyFaces

Neurodiversity and Inclusion: Choosing Kinder Design

medium_652ccf22c8853584bde5553986a4eed0.png

small_652ccf22c8853584bde5553986a4eed0.png

thumbnail_652ccf22c8853584bde5553986a4eed0.png

Web5 is here. Goodbye Web3? TBD.

<p>Published on <a href="https://blog.prototypr.io/project-nhm-908b681ed29a?source=rss----eb297ea1161a---4">| Prototyping: From UX to Front End &mdash; Medium</a> Maz Farsoun </p>
<p>In our first group project (team of 4) at General Assembly we were tasked with making the experience of visiting the Natural History Museum (NHM) in London more engaging through an app or responsive website.</p>
<p><strong><em>UX Techniques<br /></em></strong><em>Project canvas creation, competitive analysis, user survey, user interviews &amp; analysis, contextual inquiry, persona &amp; scenario creation, user journey creation, experience mapping, affinity mapping, design studio, feature prioritisation, story boarding, wire-framing, hand drawn prototyping, prototyping in Sketch and user testing.</em></p>
<p><strong><em>Tools<br /></em></strong><em>Paper and felt tip, Sketch and Invision.</em></p>
<p><strong><em>Methodologies<br /></em></strong><em>UX Honeycomb, Dieter Rams principles of good design, Nielsen Norman rule of 6 tests per round.</em></p>
<h4>Starting out</h4>
<p>We began by all sitting down together to discuss what the most effective way for us to work as a team would be and set out our ground rules. This helped us to establish a few pillars upon which we could lean in order to ensure that analysis or design disagreements were dealt with in as positive and constructive a manner as possible. We finally decided on the following ground rules:</p>
<ul>
<li>‘Listen up &amp; speak up’: never be afraid to say what is on your mind but allow others to express.</li>
<li>‘No question is wrong’: ask anything and everything always.</li>
<li>‘Don’t get offended’: don’t get upset if one of your ideas gets voted down by the group.</li>
<li>‘It’s always about the user and the data’: make arguments based on user needs established from user interviews.</li>
</ul>
<h4>The Brief</h4>
<p>Our Brief outlined the extent of the opportunity with a focus on making the experience of visiting the museum more engaging and challenged us to consider:</p>
<ul>
<li>What users value in visiting and learning from exhibitions?</li>
<li>How visitors engage with the museum and exhibitions both individually and as a group?</li>
<li>What would make visitors experiences more engaging and enjoyable?</li>
</ul>
<p>We all took some time to read the brief individually and then came together to discuss our thoughts.</p>
<p>We then used brown paper and post its to create a project canvas, below is a picture of me enjoying this process:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Fo_VXcxWk6971MUOjW5fKA.png">Project Canvas</p>
<h4>Competitive analysis</h4>
<p>Once we had our Project canvas we began conducting our competitive analysis by looking at applications and websites that already existed for several different museums in London. The museums we looked at were the British Museum, the London Transport Museum, the V&amp;A and the Science Museum. We structured our competitive analysis in a spreadsheet which I believe makes everything a lot easier to read, compare and analyse. Ive included a sample of our work below:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*qagVJHRkHBteldN-QSljsA.png">Competitive Analysis sample</p>
<h4>Contextual inquiry</h4>
<p>Once we were aware of what the competition was offering in terms of content, structure and features with regard to interactivity and engagement we set of to the NHM for a site visit so that we could watch visitors engaging with the museum. Our strategy was to split up in order to make the most of our time with one of us at the entrance, one at the exit and the remaining two at walking through museum. By splitting up like this we were able to see what the visitors encountered in terms of literature and maps at the beginning of the experience, what the experience of going through the museum was like and how people felt at the very end of their visit. We each interviewed multiple visitors as well as staff who were kind enough to discuss all the different issues with engagement that they had noticed.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/294/1*I-RQ2_8HBMIu6pJOEQs26A.png">Directional sign of system</p>
<p>In getting back and comparing all of our notes we found that though visitors were given a map upon arrival it did very little by way of allowing users to plot a course in order to prioritise the exhibits they wanted to see versus those that they may had seen already; or had no time to see on their current visit. We also noticed that there was very little connection between the system that the map used and signage at the museum.</p>
<h4>Wayfinding</h4>
<p>That evening I spent a considerable time researching wayfinding in order to put a case together to use to guide our design solutions. I was however met with considerable resistance from my group members who believed that this would take too much time and was not within the scope of the project. I offered to do the work on this myself in my spare time and attempt to come up with a few design solutions to present to the group but in the end decided to move on with other solutions for the benefit of the group. I thoroughly enjoyed researching wayfinding and hope very much to use the knowledge I gained in a project at some point in the future.</p>
<h4>Surveys &amp; User interviews</h4>
<p>The next thing that our team did was create a screener survey. In creating our survey we wanted to cast as wide a net as possible to find users who visited museums, what kind of museums they visited and how often they visited them in order to determine if they were suitable candidates for our user interviews. Thanks to the community that GA affords us we were able to get quite high visibility on our survey and had no trouble amassing a relevant group of users to interview.</p>
<p>In total we conducted 13 user interviews with a variety of users that were appropriate as reinforced by the insights we had made on our site visit. I think 13 user interviews was a decent number but given more time, I would have liked to conduct a few more as in my experience the more interviews you can do the better you will understand the user as well their likes &amp; dislikes with a given experience. It’s an integral part of my process.</p>
<p>In my opinion one of the most important things we established as a result of the survey and interviews are the types of users that visit the museum. We were able to identify three distinct types of users: family groups (at least one parent and one child), tourists (which may fall into the family group but are distinctive in that they had travelled to visit the museum from at the very least outside of London) &amp; casual visitors(users who lived in London who visited the museum regularly or visited when a new exhibition opened that they wanted to see). Moreover we were able to find the following traits in these user groups:</p>
<p><strong>Family group<em><br /></em></strong>Our family groups were most interested in making sure that their children’s experience was engaging, informative and interactive. Parents with more than one child were also concerned with the museum having experiences that were capable of holding the attention of different age groups of children.</p>
<blockquote><p>“Like for the two year old I want there to be something like where he can play with water like at the science museum but I can even take my seven year old to that and it wouldn’t be inappropriate.” Aby</p></blockquote>
<p><strong>Tourist group<em><br /></em></strong>The tourist group was more concerned with their experience being timely, authentic and informative so that they may learn and see as much as possible in the limited time they had visiting the city.</p>
<blockquote><p>“One of the most important things to me when visiting a museum abroad is that the layout of the museum is easy to understand and navigate so that I can make sure I can see as much as possible as quickly as possible.” Mounir</p></blockquote>
<p><strong>Casual visitor group<em><br /></em></strong>casual visitors to the museum were most interest in making sure that their experience was not rushed or impeded in any way as well as seemed to be the most well informed on what was going on in the museum.</p>
<blockquote><p>“I like to go when the museum is not too full.” Frankie</p></blockquote>
<h4>Creating a user Journey &amp; experience map</h4>
<p>In order to further understand our users we created a few user journey and experience maps around some of the context achieved as a result of our user interviews:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*LR3OwScaF_nUzgyszL9Rug.png"></p>
<h4>Affinity Mapping</h4>
<p>At this stage we were able to take all the quotes from our user interviews that we considered important to understanding our users’ experiences at museums to establish common themes from which we could base our designs.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/480/1*d6u12xgzMOrXLtR3YfV2Kw.gif">Affinity Mapping</p>
<p>We were able to establish the following as the most important themes as a result of our affinity mapping:</p>
<ul>
<li><strong>Spirit of exploration &amp; discovery</strong></li>
<li><strong>Trusting expert curation &amp; knowledge</strong></li>
<li><strong>Fear of missing out</strong></li>
<li><strong>Desire to understand</strong></li>
<li><strong>Desire not to be rushed</strong></li>
<li><strong>Importance of multi sensory experience</strong></li>
</ul>
<h4>UX Honeycomb</h4>
<p>We used the UX Honeycomb to narrow down what we wanted our design to achieve and decided to focus on the following principles: Usable, Useful, Valuable and Accessible.</p>
<h4><strong>Personas &amp; Scenarios</strong></h4>
<p>Once we had understood our users a little better as well as the themes that define their museum experiences we were able to create three proto-personas that mirrored our user groups.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*JdK2uZyIjsV8_5148O05qw.png"></p>
<p>From which we selected our primary, Jorge because his frustrations encompassed some of those of the other two personas we had established and as such felt we could design around him more inclusively.</p>
<p>We then built a more filled out persona for him:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*poguGUUdA4pMQqqVFpABIg.png"></p>
<h4>Scenarios</h4>
<p>We then created some scenarios to design around:</p>
<p>Jorge is in town visiting his sister in London and wants to take his niece and nephew to the NHM. He wants to keep them interested and engaged within the Dinosaur exhibit as it is their favourite.</p>
<p>Jorge has been to the NHM before and would like to see or experience something new.</p>
<h4>Storyboard</h4>
<p>We created a story board to illustrate our persona and his problem:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*deXWunAvDFfmZegiKkX47g.png">Story-board</p>
<h4>Design Principles</h4>
<p>At this stage we sat down together to decide what our design principles would be based on all of our user interviews, affinity mapping and persona building. We decided on the following:</p>
<ul>
<li>Inclusive: for all ages and types of people because we know various different groups use the app.</li>
<li>Exploratory: Allowing the user to feel this sense of exploration and discovery.</li>
<li>Engaging: Making sure that we can keep the users attention and keep them coming back for more.</li>
<li>Informative: Lets the user know what they want to know.</li>
</ul>
<h4>Mood-boarding</h4>
<p>We created a mood-board to guide our design feel:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*OztjB6Nmy-QHUGqEdE58TA.png">Mood -board</p>
<h4>Design Studio</h4>
<p>We then took these two scenarios into our design studio where we ran a total of three, using 5 minutes slots to sketch solutions as furiously as possible around those scenarios.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*kWduoxyqVQScLaPw0bWgsQ.png"></p>
<p>A lot of ideas came out of the design studio as well as some around the use of virtual reality, creating an interactive map with a colour code and reorganising the signposting in the museum to create a system based on wayfinding theories; but in the end decided to go for a gamification solution.</p>
<p>The reason we chose this solution is because it suited our primary persona best and allowed us to design around children — arguably our most relevant users. The idea was to create an application that would allow users to answer questions in each exhibit they visited with the answers in the various labels and descriptions found in each exhibit. This would allow us to keep the experience somewhat analog making sure that the user would not just be looking at his/her telephone when visiting the museum while attempting to engage the user in an informative and fun way. It would work by each users mobile realising when the user had entered a new exhibit (geolocation) as a result of beacons emitting signals in each exhibit.</p>
<p>Once the user had answered all the questions in an exhibit successfully they would then receive a digital sticker, rewarding them for their work. Moreover the idea behind the stickers was to create a system that would allow the user to keep track of what exhibits they had already visited.</p>
<p>From here we worked out our user flow for the solution and set out to wireframing by hand:</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*erSE1oecy9RqB23OWUCPBw.png">Paper prototyping</p>
<p>We developed our initial wireframes into a working paper prototype.</p>
<h4>Testing</h4>
<p>Once we were satisfied with our paper prototype we set out to test it. We applied Nielsen Norman’s rule of 6 tests per round in order to get all the feedback that we needed.</p>
<p>Our 6 testers liked the concept but gave us a-lot of constructive feedback on layout, flow, privacy and security.</p>
<blockquote><p><em>“Didn’t know what I was going to get. Felt more like trivia questions than clues.” Alexandra</em></p></blockquote>
<blockquote><p><em>“If I downloaded the app I’m not certain If I’d want to share all the information about the kids. “ Frankie</em></p></blockquote>
<p><img alt="" src="https://cdn-images-1.medium.com/max/480/1*1FSAy2CbTMYY4rruQGwNbw.gif">Testing our paper prototype</p>
<h4>Digital prototyping &amp; Testing</h4>
<p>We took on this feedback and began to design in Sketch. We then took our digital prototype and tested it again. From which we received further varied feedback:</p>
<blockquote><p><em>“It would be nice to have an indication of how many stamps I’ve collected” Daniel</em></p></blockquote>
<blockquote><p><em>“I would like to see the checkpoints change colour once you’ve completed them” Louisa</em></p></blockquote>
<blockquote><p><em>“I would like some idea of where I am in the exhibit” Richard</em></p></blockquote>
<blockquote><p><em>“ I Think there should be more of a story through the exploration experience.” Carrie</em></p></blockquote>
<h4>Colour palette and Typography</h4>
<p>We then set out our colour palette and typography, carefully selecting these elements in order to ensure that they tie in with the existing brand and checking them in the Webaim website to ensure they passed readability and inclusivity guidelines.</p>
<p>Webaim: (<a href="http://webaim.org/resources/contrastchecker/">http://webaim.org/resources/contrastchecker/</a>)</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*Jm4h0LNxCKRApS741AagLw.png">Typography and colour palette</p>
<h4>Solving around testing feedback</h4>
<p>At this stage we had some important decisions to make, whenever we receive constructive criticism on a feature or the placement of a button or global element, we as designers are faced with deciding if we should scrap the feature and come up with a new way of solving the problem or making a change to improve the existing feature. In our case as a result of being restricted with time mostly tweaked post the feedback we received which resulted in an application that worked well but that would benefit from more testing and solutions.</p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/684/1*VNO5VYA7h3LSTIBNBpiWJw.png"></p>
<h4>George</h4>
<p>One thing we added to the app that then tested very well was the creation of a character named George who would lead our users through the app in a fun and whimsical way. George became integral in the on-boarding process and was a nice addition because he made the app more user friendly.</p>
<h4>Iterations</h4>
<p>Ive included a few iterations of the design that we went through before finalising our prototype.</p>
<p><strong>Dinosaur exhibit map</strong></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*rDeHqKa6IiGsyK0UDgDLHw.png">Some iterations — Dinosaur exhibit map</p>
<p><strong>Home page</strong></p>
<p><img alt="" src="https://cdn-images-1.medium.com/max/1024/1*g2YTgDGeYj7diolBGMqC4w.png">Some more iterations — home page.</p>
<h4>Prototype:</h4>
<p>Finally we put together a working prototype, accessible: <a href="https://invis.io/TSC5MCFYQ"><em>here</em></a></p>
<h4>Next steps:</h4>
<p>Theres so much that I’d like to do with this app moving forward as I’m a bit of a museum buff myself and a big fan of the NHM. I think the app would definitely benefit from a few more testing and designing rounds. I would also love to finish creating a map for the museum as I believe the current map they use does not do the museum justice and does not do very much to help the user locate himself/herself as well as specific exhibits.</p>
<p>Thanks for taking the time to read about my NHM project, and as always for any questions please feel free to drop me a line or comment and highlight anywhere.</p>
<p>Maz</p>
<p><img src="https://medium.com/_/stat?event=post.clientViewed&amp;referrerSource=full_rss&amp;postId=908b681ed29a" width="1" height="1" alt="stat?event=post.clientViewed&amp;referrerSou"></p>
<hr>
<p><a href="https://blog.prototypr.io/project-nhm-908b681ed29a">Project NHM</a> was originally published in <a href="https://blog.prototypr.io">prototypr</a> on Medium, where people are continuing the conversation by highlighting and responding to this story.</p>


Project NHM

Project NHM

Top Stories