Creative Technology Project

For my final year creative technology project I was able to incorporate my passion for storytelling, digital technologies and user centered design. I developed a writing organisation web application to help writers manage their creative writing projects. I used a range of iterative, qualitative research methods including design probes, auto-ethnographic interviews and researching through practice to better understand creative writing processes. This ensured I grounded my final design in the insights developed from considering my own and other individuals creative writing processes.


Final prototype video

To read about the process I went through to research, design and develop this prototype please click here to visit my documentation blog.

 

Advertisements

Designing for Ecology + Conservation

As part of a team I researched and developed an interactive game to teach school children about the importance of bee conservation.


Our design process

Initial discussion
During our initial discussion we decided to focus on conservation for local wildlife.

Brandon Hill research trip
We took a research trip to Brandon Hill to explore potential areas and organisations to work alongside during this project.

Guest lecture – Antonio Gould
We had a guest lecturer Antonio Gould that is a product design manager who has worked on several interesting projects. He gave us some insights into developing educational games for children as he previously worked on Teach your Monster to Read’. We learned how to engage children and were given advice on interesting points to focus on next.

Guest lecture – Dr. Robert Phillips
Dr. Robert Phillips came to speak to us and mentioned that he had worked on a project called Bee Lab. He told us that we need to be more specific in our focus to help the project have a better impact. 

Group meeting
We met as a group and decided to focus on bee conservation and create three mission statements to help us be more specific.

  1. Educate schools on how they can adapt their spaces to accommodate bees
  2. Provide an interactive way to engage students on the topic
  3. Create a set of digital resources for teachers to use to achieve point 2

Having a sharper focus I contacted Dr. Jeff Davey, who is a research technician at the university who takes care of on site beehives, and was able to set up a meeting with him.

Guest lecture – Jemma Kamara
Jemma Kamara is a UWE Business Studies graduate and came to talk to us about her career in Digital Media. Jemma focuses on accessability, creating games and products for children. We were given some invaluable insights into how to engage children and promote empathy.

Dr. Jeff Davey interview
We met to conduct and interview with Dr. Jeff Davey so that we could learn more about bees, conservation and teaching children.

hive-sketch

Thematic analysis
Having interviewed Dr Jeff Davey we were left with a lot of notes and ideas. In order to try to focus on what was important we conducted a thematic analysis exercise together. We came up with these codes to help us focus our research:

  • Habitat
  • Problems
  • Teaching
  • Photographic/mapping
  • Data collection

We decided to create a game to show children how their actions impact on the environment and bee populations. Using a phone app schools can record the health of their onsite, or local, hives and use this information to set up the game environment. This is a great way to give the game some real grounding.

Initial prototype
Using craft supplies we put together a lo-fi prototype of the hive and made some bees to add the ‘personality’ element for children.

Interface design
We created some rough user journeys and wireframes for an app to help beekeepers note down their findings.

img_20170323_133853

App interface design
I put together some wireframes to help with developing the prototype.

Design changes
Using the wireframes a simplified initial app prototype was put together along with mockups of how the game might look.

Beekeeper research visit
We met with Dr. Jeff Davey to conduct first hand research on how to take readings from a hive and what readings we need to record. We realised that our initial app design was comprehensive but had a lot of unnecessary information that children would not need.

Final app prototype
I developed our final app protoype by mocking up the interface in Photoshop and creating the user journey in Invision.

To try out the final prototype click here.


 

Click here to visit our design documentation blog.

To view my individual report, group design brief and group prototyping report click here.

Mobile game development

I used Android Studio to create interactive applications for mobile using Java as well as a guide on how to get started with developing for Android. I developed applications that would record sound and video, respond to touch gestures and eventually used Unity to develop a mobile game.

I started by creating a specification of what would need to be included in the game. I then designed an island terrain on paper and re-created it in Unity.

I created a scenario where the player needs to drive a vehicle using the GUI to accelerate and brake, and the phones gyroscope to turn by tilting the phone, and jump across to another part of the island, collect rockets, and clear a blocked bridge to rescue a kidnapped scientist. Using C# I created scripts for all of the interactive elements and made start, and and game over screens.

Click here to read the report on the key points and features.

To download the game APK file click here.

Designing a digital interface for M-Shed

My team and I were tasked with researching and developing an interactive digital interface for the M-Shed museum in Bristol.


Our design process

Initial research visit
We visited the museum to gather a list of what works well, use the technology, observe visitors interacting with exhibits. We took a behind the scenes tour of the museum and attended a talk on the future plans for the digital exhibits. We decided to focus on Bristol’s cultural graffiti scene.

img_8571

Thematic analysis
Using thematic analysis we were able to narrow our focus and come up with codes to make sure that everyone was on the same page. We realised that we needed to focus on:

  • Technologies
  • Space
  • People
  • Context

Body storming
We were taught how to perform body storming by Layla Gaye to help us learn how to communicate our ideas and put ourselves in the shoes of our potential users.

Design brief
After conducting research on the M-Shed we came together to create a design brief to make sure that we were covering:

  • A succinct project summary to make sure we are all on the same page
  • Look at the current situation in the M-Shed
  • Think about why our project is needed and what we hope to achieve
  • What is the problem we are trying to solve?
  • Who will our project impact upon?
  • What are the constraints? How will budgets, ethics etc impact our project?
  • How detailed do we want our final prototype to be?
  • What is our project schedule?

Personas and scenarios
To get a better idea of our target audience I put together a couple of proto-personas and different scenarios of them visiting the museum.

I wanted to make sure that I can cater to their individual needs, and help to bridge the gap between their age difference, while potentially collaborating on an art piece together. This was really helpful in moving forward with our installation design as we now had a use case to consider.

PACT analysis
Following our visit to the M-Shed I put together a rough PACT analysis to make sure that we were still focusing on the people, actions, context and technology within the museum.

dsc_0390

Initial prototype and bodystorm
To implement our final design we spent time researching different technologies and settled upon creating a digital graffiti wall. We then put together a lo-fi prototype so that we could conduct user testing to check that it would be easy to use and have the interactive and educational elements needed. A paper that I read found that museum visitors tend to prefer interactive exhibits with a tactile interface where they can create personal content. This led us to creating ‘graffiti’ cans.

During the bodystorm we realised that the interface worked well but did not feel innovative enough – something that we felt would be important to draw visitors.

Second prototype
To strengthen the connection between the M-Shed and graffiti in the city we re-created a miniature version of the St. Werburghs tunnel that could be placed inside the museum. Inside this representation the art from the real tunnel will be projected inside. Visitors would be able to walk in the miniature tunnel and learn about graffiti artists and add their own art without disrupting the existing art in the tunnel.

Final prototype
Testing our initial prototype we found a few issues that we would need to work (such as issues with the projection casting shadow when people stand in front of it) on and re-created our final prototype.Capture

Click here to visit our design documentation blog.

To view my individual report, group design brief and prototyping report click here.

UX Cross Cultural Understanding

I needed to create a prototype for an app that would aid in the cross cultural relationships between home and international students at The University of the West of England. To do so I conducted research into why students from different cultures were having trouble integrating with one another, and what other issues they faced when moving to the UK to study. I looked at articles that focused on the differences in communication styles of different cultures, spoke with the Coordinating Chaplin for the Universities Faith and Spirituality team, conducted interviews with both international and home students to find out what issues they were experiencing. I then took this information and used it to inform my further research and development of the app.

I started by creating two proto-personas and two mind maps, of scenarios that they may find themselves in using MindMeister. This way I could make sure that my app would be useful to them in a ‘real-world’ setting.

Then I started planning my app’s pages and content, and creating wire-frames.

In order to make sure that my design would work well for the user I created some low-fidelity paper prototypes for quick and easy user testing. I sat down with someone and gave them instructions to ‘navigate’ the app to complete a series of tasks.

I took notes of how easy they found the app to navigate and used this information to inform the final design of the app’s user interface.

I created high-fidelity mock-ups in Adobe Photoshop and uploaded them to Invision as a way to simulate how the app will look and feel when developed. This was great because it allowed me to refine my designs and conduct further user testing.

To test my full prototype on Invision please click here.
To read my written report click here.

Internet of Things

I created a fully responsive website to showcase the development of an Internet of Things (IoT) project called Tulip. The device is designed to plug into a plants soil, take readings of the plants vitals, and send this information to the user via an app on their smart phone.

I had to design the website before I knew what IoT device I would be creating, so I needed to make sure to take into account the information I would eventually need to include. I built the website from scratch using HTML5, CSS3 and JavaScript and made sure to use media queries to have it respond to various screen sizes.

I conducted research into competitors, pitched the device to my peers using Prezi, developed a prototype of the device using an Arduino, and created a short video in Premier Pro to document the process.

To view all of this work on my live website please click here.

UX Workshop

Creating and Running a UX Workshop

I was involved in a UX project to research, plan, present and conduct a UX workshop for University students. We chose gamification, and its importance in user driven design, as our theme. After researching gamification further we discovered Nir Eyal’s Hook Canvas and Yu-kai Chou’s Octalysis framework. We created a Prezi presentaion on the topic that you can find here.

UXprezi

Once we had presented the findings to our class we divided them into groups and had them fill out blank Hook Canvas and Octalysis worksheets for a popular app and then present their work to the class. The workshop was a success with the majority of our students feeding back to us that they had learned something new, had enjoyed the session, and felt that this was something they could apply to projects in the future.

To read my written report on the process of creating this workshop please click here.

UX Techniques

PACT Analysis

I conducted a People, Activities, Context and Technologies analysis of the Student Union (SU) at my University to see if I could get a picture of how people use the space. I created a rough mind map and then fleshed it out using MindMeister. I noticed that a certain area of the SU was not being fully utilised and created a report that put forward the idea that using more technology in this area would help. Touch screens would draw people in and help them to interact with one another (in the form of playing games) and to interact with the University more (by accessing information on societies, sports, events etc).

To read my Student Union Design Solutions report click here.


Proto-Personas

I learned how to create proto-personas and scenarios to test if a project or a service will be of use to its user base. My proto-persona was a student attending an open day that needed help during her visit. I needed to think about her as a well rounded person and come up with what issues she would have and how best to solve them for her. I then carried out a strengths, weaknesses, opportunities and threats analysis of proto-personas.

To read my Proto-Personas report click here.


Card Sort Analysis

As a class we participated in a card sort exercise to categorize films by genre. We then took the results and used a participant centric analysis to show the differences and similarities in what choices people made. I then had to conduct research on the best methods for categorizing content and evaluate the positives and negatives of each.  Open card sorting is better for getting a larger sample of more diverse categories which is great if a website or app has a lot of content. However the results might be scattered so conducting a closed sort can help to narrow down choices and check the validity of the categories.

To read my Card Sort Analysis report click here.


Non-Visual Design

I conducted literature reviews to develop an idea for partially sighted or blind people. The idea was to allow people to share their favourite meals and  inspire others to cook based on smell instead of using pictures.

To read my Non-Visual Design report click here.


Persuasive Design

I applied the principles from the Fogg behaviour Model to two apps that focus on helping the user change their behaviour. It was interesting to see how both apps (Google Fit and Headspace) use simple visual designs to motivate the user to keep using the app and in turn keep up with the desired behaviour.

To read my App Comparison report click here.


Data Gathering

I conducted research into the Universities existing infrastructure for student transport and interviewed a student on their experience of getting to and from campus. The student that I spoke to said that he did often struggle with unreliable buses but was unaware of the university bike scheme. After conducting further research I realised that the scheme was not being advertised as well as it should be and this may have been a solution to his problems had he known about it. I wrote a report on how, although this scheme is great for students, it needs better marketing as many students are not aware of its existence.

To read my Transport Data Gathering report click here.

Unity Maze Game

Creating a Maze Game in Unity

I used Unity to create a maze on an abandoned alien planet for the player to navigate to find the missing ship piece. The maze has multiple camera angles, one attached to the player and one with a birds eye view of the maze for the player to use as a map. As well as this there are many obstacles in the form of spikes, crates and fires that would harm the player and send them back to their last checkpoint. I implemented a key card system that means the player needs to collect a key and insert it into a computer terminal to open doors along the way. All of the maze elements have been created using C#. Once at the center of the maze the player can collect the item they need in order to return to, and fix, their spaceship to end the game.

In order to make sure that I had considered every element of the game I created a  specification before starting to build, and documented the key points and features.

To download this game click here.

Scripting and Creating with Unity

Physics Wall

I created a physics wall made of cubes in Unity and a launcher that spawns and fires balls at the wall to destroy it when the player presses the space bar using a C# script.

physicswallshot

To download this game please click here.

Third Person Cam & Transporting the Player

I created a scene that contained some movable objects and platforms for the player to navigate. I also added some transporters to the map that would allow the player to re-spawn in another location when stood on.

thirdpersoncam

To download this game please click here.

Island Scene

Using Unity’s terrain building tools I created an island scene complete with sky box, water, lighting, spatial sounds and tree assets.

islandshot

 To download this game please click here.