‘Buskify’ App – Final Project

For my final major project, I researched into the history of music in Manchester, picking out locations which past artists had been associated with to put together an educational based app. I then realised that I wanted to focus on a niche, new topic, and so I chose busking. This project was both UX and UI based.

I used a process of: target audience research, app research, crazy 8’s, storyboarding, navigational diagrams, paper prototyping/wire framing, graphic design (Adobe CC), digital prototyping (with Axure RP), and guerrilla testing throughout, to create my final application.

Here are some images which demonstrate key parts of my UX design process:

My Buskify app has two modes: user mode, and busker mode. Buskers can create accounts, set up profiles, and then turn on their hotspot via the app when they are set up to perform. Users can then see where buskers are on the map, and check-in when they are nearby.

Rewards such as gig tickets and free singles are given to users as incentive for supporting buskers, encouraging them to use the app. Users can also record and upload videos of the buskers, earning them badges whilst creating recognition for the talent, with the most ‘liked’ videos appearing in the leaderboard.

Here are some mockups of my final app:

Please click here to try my app for yourself! (open on desktop or iPhone, and save to home page via safari)

Due to this final project being part of my degree show at Manchester School of Art, I then took it one step further and created some print based advertisements to compliment my installation. As well as the posters and flyers below, I displayed my work on an iPad, whilst projecting the tap-through video layered over my original videos of buskers, using the music to draw people in.

Buskify Tap-through Video:

Advertisements

magneticNorth App Collaboration (3rd Year)

I collaborated with design agency magneticNorth, who set an open brief to make something digital for neurodiverse people in the city. I decided to create an app for autistic people, helping them to avoid stressful situations in indoor locations.

I used a process of: target audience research, app research, crazy 8’s, storyboarding, navigational diagrams, paper prototyping/wireframing, graphic design (Adobe CC), digital prototyping (with Marvel), and guerrilla testing throughout, to create my final application.

Here are some images which demonstrate key parts of my UX design process:

The app allows users to input their sensory preferences (quiet areas, open spaces, dim lighting etc.), and then suggests relevant locations for them to visit, or avoid.

Features of my app: tailored recommendations, star ratings, AR location identification, walkthrough videos, comments, GPS maps, and shortcuts for primary users.

After testing the paper prototypes on the target audience and then improving them using my UX design skills, I created the digital app using Adobe Illustrator and Marvel, and created an animation walkthrough/tap-through video to demonstrate my design.

Everything from the concept, to the interactivity, to the content, has been user tested on the target audience and re-improved over a 3 month period.

I presented my final design to MagneticNorth and BBC CAPE, and the feedback from both companies was extremely positive, with the BBC asking me to send over a PDF pitch of my concept. This app is something I would love to develop further, as I am passionate about the cause and I have really enjoyed developing my ideas this far already!

Here are some mockups of my finished prototype:

Click here to interact with my ‘Shape My Bubble’ App

Since completing this project, my UI and graphics skills have improved noticeably, as you can see in my ‘Buskify’ project on my portfolio page.

Shape My Bubble Tap-through Video:

Metrolink App UX Project (3rd Year)

For a HCI/UX unit, I was asked to redesign the Metrolink application. I conducted research into the current app, website, and other travel applications, creating and gaining over 100 system usability scales, Nielsen’s Heuristics, and Heuristic Questionnaire tables from willing participants, to back up my 20,000 word report.

I then talked to current Metrolink users to see what they wanted to see in a new app, leading me to create a set of functional requirements, and primary and secondary personas for this imagined new app. These were implemented into my low-level paper prototypes, supported by my hierarchical navigation diagram to show user flow.

Here are some images which demonstrate key parts of my UX design process:

My above paper prototypes were then guerrilla tested, and I conducted more SUS, Nielsen’s Heuristics, and Heuristic Questionnaires to compare the results to the feedback from the original Metrolink app.

I made final changes, before creating the digital version in Axure RP. This was my first time using Axure and was a big challenge for me, but the added interactivity it allows let me create a much more well-rounded prototype than simply using flat images in Marvel, as I used in my BBC application. This project was solely based on UX and research, and is why the UI is not as focused on.

Here are some mockups of my finished app:

Please click here to try my app for yourself! (open on desktop or iPhone, and save to home page via safari)

This project allowed me to learn new software; adding text input fields, pop ups, error messages, conditions, and dynamic panels as advanced interaction options. The feedback from my final prototype was amazing, gaining almost 100% on the SUS, more than double the actual Metrolink app.

Bury Art Museum Coding/Projection Mapping Installation (2nd Year)

In 2016 I had the chance to create a multimedia installation for the ‘coding’ exhibition at Bury Art Museum, which was on display for a month. The inspiration I had to work with was the Text Art archive, which I visited multiple times before deciding I would base my project on Polari, after learning about the Polari Mission Project by Jez Dolan, who came to view my installation on the opening day.

Polari was a secretive LGBT language, becoming extremely popular in the 1960’s when people of the LGBT community were scared about revealing their sexualities. Polari Mission was a 2014 project to bring back the language, and inspired me to bring it back once again.

I combined animation, projection mapping, social media, and coding using MaxMSP to create my installation. I decided to decode Polari in a fun way, as well as improving my technical skills at the same time. I attended workshops to learn how to code unique software to projection map my Polari quote animations, and alter the projection ‘screen’ sizes by allowing me to drag the corners of the software to fit it perfectly to the wall I was projecting onto.

I worked closely with Susan, the curator to figure out how my installation would fit into the space I had to work with. She allocated me my own small room, as I needed a darker area for my projections to be more visible, and then closed the door off so that the room seemed secretive and hidden, fitting in with my theme.

Users read the numbered quotes being projected in Polari, then scanned my QR code, which linked to my twitter feed @burypolari, to find the translation of the quote. Combining social media into my project made it more engaging for visitors.

bury-websitemmu-website

The animation I previously created to advertise the exhibition was also featured as the advertisement for the exhibition on Bury Art Museum’s website and the MMU website.

BBC App UX Design Placement (2nd Year)

I had the opportunity to work alongside UX professionals from the BBC, where I was given the brief to create an app or website in preparation for BBC3 coming off air. We met in MediaCity and in the Shed at uni once a week for workshops and feedback sessions. Since this project, my skills have improved dramatically.

Over 3 months, I picked up my first experiences working in UX design. I learnt how to effectively come up with concepts and ideas, by brain storming, coming up with ‘How might we?’ questions, creating ‘Crazy 8’s’, and gaining target audience feedback.

The concept offered an educational aspect for it’s target audience of people aged 16-24, which allowed live mobile streaming, box sets, and a large selection of documentaries, which the users I talked to seemed to prefer to watch on BBC3.

The app could then connect to the website version via wifi, so young people could use their mobile as a remote control when watching on their laptops or smart TV. The ‘note taker’ option also allowed users to take notes on any educational documentaries they may watch.

Here are some mockups of my finished prototype:

Click here to interact with my ‘BBC3’ App

I presented my progression each week, sharing my feedback from my paper prototype Guerrilla testing, before progressing to create my digital prototype using the Adobe suite, and imported my graphics into Marvel to add the interactivity.

I finally created a discussion guide in preparation to lab test my finished app. I used the usability lab in BBC to question two paid volunteers, ensuring to cover everything on my discussion guide to gain the feedback which I needed.

Peers took notes on how the users managed to understand and use my app from a separate room, watching from cameras and listening through speakers. I then presented my process to the BBC and gained excellent feedback!

Here are some images from my design process:

Projection Mapping Prototype Animation (2nd Year)

After learning that our course was going to have an exhibition at Bury Art Museum, I decided to base my self-directed project around creating some kind of advertisement for the installation.

For the short project, I decided to create a prototype animation for a potential outdoor projection mapping advertisement, onto Bury Art Museum. I took a photo of the museum, editing out the clouds and making it nighttime so that the projected animations would show up as if it were real.

I used Adobe After Effects, creating masks to make my text and glyph icons show in the areas where I would want them to be projected, then editing my paths around the columns on the museum, to make the text distorted where the light would bounce off the curves of the building. I learnt how to mask, edit paths, create 3D movements with text, and layer correctly so that my animation would appear flawless.

The curator at Bury Art Museum was keen to create the real projection for the opening night, but sadly there wasn’t enough time to create it in time with the other exhibition work going on at the same time.

Kids Arduino Workshop (2nd Year)

In second year, I was given the opportunity to help lead an Arduino workshop for kids at Bury Art Museum. I was nervous because I had never done something like this before, but quickly picked up how to create some basic code to function the DC motors for my section of the workshop, which allowed me to make the motor start and stop, and spin in different directions.

I then created some worksheets with a crossword and simple questions etc. for in case the workshop became too busy to interact with everyone at once, and purchased some small toys so the kids could add them to the motors to make it fun for them. For the younger ones, I brought tin foil, paper clips, pencils and paper, so that they could conduct the circuits in different ways, helping it to be a little more engaging and hands-on.

The end result was amazing considering I have never done anything like this before, lots of children and parents turned up, with some of the adults even being inspired to purchase an Arduino by the end of it. I would love to do some more workshops if I have the chance.

B&W 35mm Photography

During first year of university, I completed a photography module, where I researched and played around with 35mm film and digital photography, comparing digital to analog, as well as researching into film noir.

The above images were taken on an iPhone camera as test shots, and the below were taken on the 35mm Pentax camera, which I processed and developed in the dark room.

ener.g CAD Work Experience

Towards the end of second year, I decided to apply for a number of placements and work experience opportunities, in order to find out exactly which career path I wanted to take.

One of the first places to get back to me was ener.g, an engineering company based in Salford. They have a design team which work in CAD and CAD 3D, creating scaled and accurate drawings of various components which are then sent to the shop floor to be cut, moulded, and built.

This was not a job role which I would usually go for, however working in a professional environment and around other designers really gave me a good feel for working life. I completed a series of workbooks which the lead designer created for me, teaching me how to use the software and developing my skills day by day. I had only used CAD a couple of times before, to laser cut and to print off accurately scaled packaging for a product.

I then got to create something for a real-live project, drawing up a steel component which was then approved and sent to be made on the same day. I enjoyed my 2 weeks working here full time, and I managed to learn the software extremely quick, completed all of my allocated tasks in half the time expected.

Yoko Ono Zine

During second year, as part of a side project, I created my first zine, based on Yoko Ono’s 1964 book, ‘Grapefruit’.

I selected this book to base my zine on after viewing a selection of different items from the special collections in the John Dalton library. It is an early example of conceptual art, and contains a series of ‘event scores’, which replace the physical work of art, with instructions that an individual may, or may not, wish to enact.

I read this book, and then decided to represent each chapter, or genre, with a simple graphic, including one of my favourite quotes or instructions from each one. This gave more of a visual representation for the book, whilst leaving it simplistic, only using the colour yellow as on the cover of the original book.