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.

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 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.

Film Festival Website

Creating a responsive website using HTML5, CSS3, Javascript, Ajax and PHP

I created a horror science fiction film festival that I called Terror Incognita, and then developed a website to advertise it. I used Foundation as it offers a modular and responsive framework for me to build my website with. I stored all of my information in a database and dynamically pulled in all of my content using PHP and Javascript. I used Ajax to create hover overs to provide the user with more information.

Web Designing with Hotglue

Designing

One of the first things I did at University was learn how to document, wireframe, plan and design a website using Hotglue.

hotgluepic

Processing

I also learned how to use Processing which is a framework built on top of Java that allowed me to ‘sketch’ out interesting visual effects.

processingpic

AppFurnace

As well as this I created an app using AppFurnace that would serve as a guide for the Bristol Balloon Fiesta.
appfurnace

While Hotglue has programming limitations that do not allow for the creation of a responsive website it did allow me to focus on the documentation and design process.

To see my work please click here.