Project Management/360° Component/Functionality Testing

Project Management – Tuesday 5th March 2019

Tuesday was the big day of briefs. Our tutor introduced us to the unit, and we booked some slots for Interchange. Next Wednesday I will be learning about the architecture of a dome to create a geodesic structure. I will write all about this experience in a separate blog post.

The main meat of the session, however, was assessing the learning objectives (LO) that are to be met for the two projects in this unit. There are four main LOs that our work will be assessed by:

• LO7: Demonstrate an understanding of a wide range of applications for your work, including workplace contexts.
• LO8: Propose and plan areas of research for further study based on the analysis of appropriate techniques and information that extend your knowledge.
• LO9: Evaluate and employ appropriate communication and presentation techniques in relation to subject and audience.
• LO10: Demonstrate your ability to work collaboratively to meet specified goals.

Each LO is essential for the development of my work within University, but ultimately I will be bringing these skills into my professional career. Due to this unit explicitly focusing on collaboration, recording evidence of LO10 is a priority. Moreover, this LO requires the right amount of project planning and time management. These are vital skills that I lack at this stage of my career, so creating a project plan at the beginning and trying to follow it throughout will be, for me, harder than it sounds.

To be able to work efficiently in a team, we must be able to share ideas and deadlines on an easily accessible public platform. To do so, we have chosen to use Trello again. We created a Trello board for Stage 1, and it wasn’t used as much as I would have hoped. For Stage 2, we decided it best to record our time in a Gantt chart. The beauty of using Trello is in the form of a Chrome extension called Elegantt. Elegantt lets users input start and end dates of projects and tasks through lists and cards and automatically generates a Gantt chart. Being the type of person who much dislikes meticulously planning her time, this is a simple and easy solution.

At the moment, our Trello board looks like this:

Our Trello Board – “The Broads Board: Stage 2”

We have organised our lists into key focus areas. We had to come up with a way of displaying this information that is not only easily navigatable for us, but also for the GCS who may not have used this project management tool before. By splitting content into the app, website, general uni deadlines and critical texts, all of us will be able to understand and digest the information smoothly.

I took charge of uploading the dates for the “Uni” column. I made these straight from our last session and set the start date as the Monday of each week and the end date as 23:59 on each Friday. This way, we will be able to mark the tasks as completed any time on Friday. If the deadline was set for Friday at 17:00, there runs the risk off all of us having busy days and forgetting to mark it as completed on time. As we are all known for working late after hours, this method gives us more freedom with our time.

Our unit timetable

Once I had input all of this data, I enabled the Elegantt extension and voilà! A functioning, easy-to-read, well organised Gantt chart.

Our unit timetable in the form of a Gantt chart

After many failed attempts at creating Gantt charts in Project Libre and my frustration leading to struggling even to understand why there’s useful at all, I can finally see their place in project management. The clunky and outdated user interface of Project Libre made it very difficult to navigate, input data and export a finished result. I enjoy the way that Elegantt offers live updates that can be edited either directly in the Gantt chart or on the adjoining card. For example, if I wanted to change the due date for “Wi-fi test” I could either scroll down to the list with this particular card on or click its blue box on the Gantt chart to edit the information.

Another excellent project management solution is Monday. This on-trend, colourful and user-friendly option is popular with large companies and businesses that rely on teamwork not just in the office, but on a global scale. Monday can track sales orders, manage Agile sprints and manage individual client projects (as well as show these as part of the bigger picture) in a way that everyone can understand. Unfortunately for us, this is a paid service starting at £22 a month hosting five users going up to £4k+ for 200+ users (monday.com, 2019), with no student option, so we will not be able to use it during our time in University.

Monday.com front page promotional image

Bibliography

monday.com. (2019). monday – team management software | monday.com. [online] Available at: https://monday.com/pricing/ [Accessed 9 May 2019].

360° Component – Thursday 7th March 2019

As discussed in last week’s blog post, our strategy for learning and executing technical functionality is to practice little and often. On Thursday, we created our first 360° mobile app experience.

Our tutor started the session by laying down fundamental knowledge for us to create our functioning prototype.

How a spherical image can be shown on mobile using gyro technology

The information displayed above was easy to follow at the time, but upon reflection does resemble the markings of a mad man. So, let me explain.

Up until this stage in the project, we have taken a “top-down” approach, meaning we have thought of the strategy and overview first and considered component functionality second. In this phase, we will be working “bottom-up” to view the functionality of components, albeit based on ideas from strategic ideation, and how they can be technically executed for use in a mobile app experience. When this phase’s ideation and testing is complete, we aim to meet in the middle and have everything required for project delivery.

Now, onto the techy stuff. To create an interactive 360° image two spherical images must be taken on a particular type of camera. We used the University’s Samsung Gear 360, and it was great. The device, for a rather niche piece of technology, is intuitive, small and requires minimum learning. The user is greeted with three simple buttons and with the help of a small on-device screen, can start taking their own 360° images. We decided to take some pictures in the University carpark to see how well it would handle natural light. The result looked like this:

Spherical images were taken on the Samsung Gear 360

The camera did well for a typically English, grey and overcast day. I am keen to see how it performs in a range of different settings such as a well-lit room, outside on a sunny day and in darker environments.

To convert the spherical images into a real sphere, they must first be stitched. This can quickly be done by uploading the image to Nadir Patch which does all the hard work for you. Stitching is also possible in Adobe Photoshop, but that is an experiment for another day.

When the two images have been stitched together, they form an equirectangular photo. A typical example of this is shown in pictures of the globe. Images of Planet Earth must be formatted in a way that does not distort the size and shape of countries. This diagram featured in a Google AR and VR article shows how the sections at the top and bottom of the picture become warped when converted from 3D to 2D.

Google’s diagram of an equirectangular projection

The globe on the left-hand side shows evenly sized dots being stretched and distorted at the top and bottom of the picture on the right. This method of creating 3D images is relatively new technology and before, to render worlds in gaming, for example, a cube map was created. This method projected the image onto the net of a cube to form a rectangular world. (Google, 2017)

Google’s diagram of a cube map

Our equirectangular stitched car park image turned out like this:

Our equirectangular carpark image

The aspect ratio of equirectangular images usually measures at 2:1, so we sized ours to 2048×1024.

To test if our equirectangular image performs well in a 360° environment, our tutor introduced us to Marzipano, an API designed to bring 360° photos to life. With the code available through GitHub, using only HTML, CSS and JavaScript, users can upload their images and play with the code how they so wish. The API comes with inbuilt information hotspots where the user can press on a point on the image and a small information box appears.

I started editing the code by changing the position of the information hot spots. These coordinates are controlled by values called yaw (horizontal) and pitch (vertical). The diagram below helps visualise yaw and pitch. We were not using a full 3D model, so the roll is not relevant here.

A visual representation of yaw, pitch and roll

360° is the equivalent to 2 Pi radians, so, in the yaw plane, turning your head 180° clockwise is the equivalent of moving through Pi radians. The value used for this movement in Marzipano would be Pi which is equal to 3.14 radians. Radian is the metric used to define the angle of the yaw. To think of this in terms of degrees, a 90° clockwise movement is 90(Pi/180) = 1.57 radians. This is the value that Marzipano uses to describe this movement. Similarly, moving your head counter-clockwise would be represented in Marzipano by the value -1.57 radians.

Yaw parameters

This same principle must be applied to the radian value of pitch.

Pitch parameters

After coming to grips with the pre-programmed parameters, I wanted to create some new ones. To do so, I set the starting parameter to 0° and using the graph above I could figure out whether to add a positive or negative value to the yaw and pitch. I picked a point on the map to aim for which was the bottom left window of the SU Lounge. Firstly, I set up a new <div> to hold the text.

HTML

<div id='suLounge' class='textInfoHolder'>
    <div class="textInfo">
      <div class="hotspot">
        <div class="out"></div>
        <div class="in"></div>
      </div>
      <div class="tooltip-content">
        <p>This is the Student Lounge for Norwich University of the Arts.</p>
      </div>
    </div>
  </div>

After playing around with the values, these are the final parameters I edited into the inline JavaScript:

scene.hotspotContainer().createHotspot(document.querySelector("#suLounge"), {
    yaw: -2.35,
    pitch: -0.05
    });

Here is a screenshot of the information hotspot on the building:

Screenshot of the SU Lounge information hotspot

As shown in the screenshot, I placed it very close to the window. I found the yaw and pitch can be very sensitive, so it can be challenging to achieve pinpoint precision.

Now that I understood how to input more information hotspots, I added one more on St Andrews House and another on St Andrews car park.

Screenshot of the St Andrew’s House information hotspot

Screenshot of the St Andrew’s car park information hotspot

The next challenge was image hotspots. I aimed to place one of these where you can see us standing and include a lovely picture of us from when we conducted ethnographic research and add another one on the Peugeot next to us with the Peugeot logo. Editing the first one was easy and turned out well. The only thing I needed to edit was to comment out a line of CSS that defined the height. By doing so, the height of the box is proportionate to the size of the image and text.

CSS

.reveal-content {
width: 180px;
/* height: 160px; */
padding: 10px;
background-color: #fff;
opacity: 0;
text-align: center;
pointer-events: none;
transition: opacity .01s ease-in-out;
}

Screenshot of the BSc team image hotspot

Now, I wanted to add a completely new image hotspot. This wasn’t an easy task to achieve straight away. I set my mental pinpoint as the Peugeot to our right and applied the parameters in the JavaScript. I duplicated the HTML and JavaScript and edited it accordingly, inputting a new image and providing it with a unique id. I clicked refresh, and nothing happened! I felt a bit stumped until I saw reveal was set as an id and should be changed to a class. When reveal is set as a class, each hotspot can be given an id.

HTML

<divclass="reveal"id="peugeot">
    <imgsrc="img/photo.png">
    <divclass="reveal-content">
            <imgsrc="img/peugeot.png">
        <p>Peugeot.</p>
    </div>
</div>

CSS

.reveal > img {
    width: 50px;
    margin: 15px0;
}

JS

scene.hotspotContainer().createHotspot(document.querySelector("#peugeot"), {
    yaw: 1.1,
    pitch: -0.1
});

This is the Peugeot hotspot:

Screenshot of the Peugeot image hotspot

I have recorded myself showcasing the experience to demonstrate my work in its intended setting.  A video of me using the experience can be found here.

The final interactive experience can be found here.

I have also created a QR code:

I enjoyed editing the code within the framework provided because of how it was laid out. I don’t consider myself a technical whizzkid with code by any means, so being able to generate my immersive world was a great feeling.

Bibliography

Google. (2019). Bringing pixels front and centre in VR video. [online] Available at: https://blog.google/products/google-ar-vr/bringing-pixels-front-and-center-vr-video/ [Accessed 7 Mar. 2019].

Functionality Testing – Friday 8th March

Friday was an exciting day because this was the first time we have been able to work in the same space as the GCS properly. We all naturally gel very well, so co-creating with them was full of positive energy, smiles and innovation.

The day started with a small catch-up session, where the GCS showed our tutor and us their work so far, and I was extremely impressed. They had considered things such as colour, type branding, logo and social media presence, all of which are crucial for a successful digital experience. The critical design elements they presented were:

Texture: Incorporating several different textures found in The Broads can show off different themes in one image. By using a collage effect of a mill, they were also able to demonstrate multiple time periods.

Slide is taken from the Graphic Communications students’ presentation

Typeface: One student had created a typeface for The Angles Way brand based on old Victorian style writing. When A and W were placed together in this typeface and rotated by 45° or 90° it heavily resembled a footprint.

Slide taken from the Graphic Communications students’ presentation

Ownership: For branding purposes, The Angles Way can be adapted to suit any user by promoting it with tags such as “My Way” and “Their Way”. This will help mould the experience for a wider audience. These can be used as hashtags for social media as well e.g. The Angles Way #MyWay.

Slides taken from the Graphic Communications students’ presentation

Badge/Token Collection: Interestingly, they came up with the same concept as us whereby users can follow a trail to find collectables. This would hopefully provide incentive for users to come back, walks the trails again and collect more.

Slide taken from the Graphic Communications students’ presentation

Colour: Inspired by the colours that one may come across while walking, colours palettes including blues, yellows oranges and greens were considered. The final choice is navy blue and an orange-red.

Slide taken from the Graphic Communications students’ presentation

I loved the GCS ideas and am very excited to bring them into our work. So far, the BSc team have been, focussing heavily on functionality. Our prototypes function very well and efficiently show how users can interact with the digital experience. What it is severely lacking is true, artistic flair. The visuals, even though they are consistent throughout and compliment each other, aren’t strong enough to brand it as a product.

It was now time to perform functionality testing on my 360° experience prototype. Using my device, the device’s from my peers and those that belong to the University I tested my prototype on as many mobile browsers as I could. These are the results:

Overall, the experience worked well on major devices and browsers. The only exceptions were with the less popular Nokia phones and the most recent operating system update on the Samsung Galaxy S8.

Regarding the issue with Nokia phones, I don’t think resolving this should be a priority. Realistically, I don’t believe a substantial percentage of users will be using this type of mobile to use this experience o. However, the issue with dark mode on the Samsungs, albeit being possibly trivial to the overall experience as it only affects the colours, should be addressed somehow.

To finish the day we decided on the other two components we were going to build over the next few weeks. All three components must be evolutionary from our first iteration of prototypes and have to be transferable across each theme, being as versatile as the 360° experience.

Components discussion

The second component we came up with is based on a grid layout. Building upon the idea of organising information as part of a timeline, this layout adds another dimension. The user can vertically scroll through time periods (e.g. 20th century) and then scroll across horizontally to view a more specific date (e.g. 1920). The idea was initially brought to our attention during a presentation made by Neontribe using reveal.js. This presentation method uses simple HTML to nest elements inside each other, creating a 2-dimensional effect. Users can press the space bar to go through the slides in chronological order or use the navigational arrows in the bottom right corner of the screen to explore more freely. (Hattab, 2019)

reveal.js can be navigated using the space bar but also shows navigational arrows in the bottom right-hand corner

Another example of this presentation is the tutorial for A-Frame. It functions much the same but also includes a numbered ordering system next to the navigational arrows. This, along with the tutorial at the beginning of the presentation, lets the user know where they are at all times. In the example below, the user is at 2.1, meaning two slides across and one down. (A-frame, 2019)

A-frame tutorial includes a numbered system for the user to track their whereabouts

For the last component, we will be building on my finder prototype. Users will be able to find out more about the wildlife in the area by selecting a season and funnelling their choice down through a series of multiple choice categories. Improvements will be made with the layout and menu system as it will feature a breadcrumb type menu for users to keep track of their journey through the app.

All of these will be coded up using HTML, CSS and JavaScript and will be fully functioning ready for on-site testing. I am excited about this because it will be the first official time that one a creation that I had a hand in developing will be accessible for public testing.

Bibliography

A-Frame. (2019). A-Frame – Make WebVR. [online] Available at: https://aframe.io/ [Accessed 9 May 2019].

Hattab, H. (2019). reveal.js – The HTML Presentation Framework. [online] Revealjs.com. Available at: https://revealjs.com/#/ [Accessed 8 March 2019].