• Arrow Left
• Instagram

Tickets to Connection

Helping people connect over long distances through art.

• Arrow Right

Overview

For my project, I wanted to create something that encourages connections and conversation through art. Inspired by myself and my partner being in a long distance relationship, I created a deck of cards that feature art prompts and conversation points that get users making art and talking to each other.Note: All the goals and plans on this page were written at the very start of development, so they differ a bit (or a lot) from my final product as my idea evolved.

• Refined Goals Found Here

What is this website for?

This website is to show my journey through creating my final major project; from initial concept to the final product. It explains every step I went through in development, although some go into more in depth than others, depending on how new the skills were to me or how much time I spent on that stage.

What are the goals of this project?

The main goal of this project is to develop a platform to help people connect over long distances using art whilst showcasing my digital skills in graphic design.To do this, I will design a deck of digital cards that are available on a website and an app. These cards will feature art prompts to give the users an activity to do whilst on call together. The prompts will be supported by suggested conversation points or questions to help the users talk to each other, guide them towards deeper conversation and take them on a journey to connect with each other. Users will have a digital account used across an app and website that allows them to sync the cards they acquire, create groups to share the prompts they own, maintain a private gallery of artwork completed for the prompts and track achievements with digital badges.Altogether, this will provide people in any kind of distance relationship the resources to complete creative, offscreen activities together whilst encouraging conversation and the space to connect.

Why is this project important to me?

My partner and I have been in a long distance relationship for over a year, and have been trying to find different things to do together. We have found that there is nothing to do beyond consuming media together and playing video games, but even then there is only a limited number that encourage you to work together and not just wander off in opposite directions. This is why I want to create something that can be used by people in long distance relationships and make the experience slightly more bearable.Communication and connection is very important to any kind of relationship and any kind of relationship can be separated by distance, whether it be family relations, romantic relationships or even friends, so I wanted my project to extend to those groups too. I also have a group of online friends, and now spend longer periods of time away from family, so I understand this area of connection too.
By focusing the project around creating art, it gives people something to do, which is one of the hardest things to do over long distances. By using an art prompt, everyone involved can work towards the same goal and the joy of doing something together. Everyone will, however, end up with something slightly different and this is an excellent way to get people talking to each other. I want to get people talking because communication is very important in building healthy relationships and creating good personal wellbeing. Art is also an excellent way to contribute to wellbeing and is something I would like to explore with the increasing research in art therapy and other uses of art in building good mental health.I want to take on a project of this scale so I can showcase as many of my skills as possible. Expanding a small idea of art prompts on cards into a full product is a great challenge that involves lots of different skills and various forms of media.Finally, I want to end up with a physical product because I want to hold onto physical media. The ability to have a physical object to hold when you have made a purchase can be important to some, and it would also be beneficial to the showcase at the end of the year. It also gives me the opportunity to explore and develop more skills.

Who is this Project for?

Tickets to Connection is for anyone who wants something to help them stay connected and have an activity to do with people they care about when they are separated by distance. This could mean online friends, long distance couples or families spread across the world. Tickets to Connection aims to be accessible regardless of the situation and the reason for the distance. It also can be used by groups in person as an activity to get talking to each other.There are limited activities to do when you can’t be someone in person. Tickets to Connection is for people looking for an activity to do whilst on call together. It allows for interactions and quality time without being completely tied to a screen. This makes it better for reducing screen time, sharing a device when calling loved ones and allows for the creation of physical pieces of media and therefore more suited to a much wider audience of people.Tickets to Connections goal is to get people connecting, it's for people who want to build strong connections with those they care about. The unique addition of related talking points supporting the art prompts makes it easier to start talking, whilst being able to make art removes the pressure away from the conversation. Because of this, Tickets to Connection will also be beneficial in wellbeing spaces, allowing people to open up about their experiences at their own pace in a safe group setting whilst creating art.

How Will I Complete the Project?

To complete this project, I will create:

Additional, but not essential things i want to do:

To reach a finished product I will go through a cycle of research, experimentation, development and testing. Going round each part until I reach something that is high-quality, and I am satisfied with. Unfortunately, I am the sort of person who will always think something can be better.
At the start of my project, I am going to do in-depth research into the positives of art in wellbeing, as well as how art can promote communication. This will give me guidance in adding the discussion points to my cards. I will also explore similar products and existing prompts lists to get inspiration whilst making sure my product is unique.When moving on to development there are some areas I will be more confident in, for example the graphic design, whilst there are others I have little to know experience in, such as 3D modelling and printing. I want to experiment and push my skills as much as possible whilst still making sure I keep on track for completing the project on time.Throughout the development of my project, I am going to put it to the test, with my partner and my online group of friends. First, I will gain feedback on just the concept of the project from my peers, ensuring to get feedback from online friends. As I progress through development to where I have a prototype, I will test the project with a small group of my online friends and ask them to try it with other friends to get more in-depth feedback. I will know I have succeeded when I have a product, with all my deliverables, that completes the purpose of giving people in long distance relationships something to do together and build connection.

Skills Audit

To begin the project I created a skills audit containing all the skills I have gained throughout my Higher Education and experiences during this timeframe. For me this consisted of 4 years of modules, from 2 different universities, which makes it quite long. So to read it click the button below.

• To Skills Audit

Coming Up With An Idea

Mind Map Of All My Ideas
I knew going into this project there was going to be a lot of brainstorming, and therefore a lot of mind maps. Instead of handwriting them, and watching them slowly become more and more illegible, I decided to use an app called Simple Mind to make them.

Choosing An Idea
I started to become very attached to the idea of making the card game with art prompts; thinking about what I could do and how effective it would be for people in long distance relationships, myself included. Although I feel some passion for making a Think Bike campaign and some personal connection and animating to music was my idea for my final project earlier in my time at university, I kept being drawn back to the cards. So I decided to go with that idea. The personal inspiration and connection makes me so much more passionate about working on the project and giving it everything I can give.I expanded upon this idea to be less of a card game and more of a tool for people to use making art as a way to build strong connections and healthy relationships.

Project Mindmap - what can I do?

With my idea chosen I wanted to get down every possible thing I could do as part of this project to see what skills I could cover, new things I could learn and how to make a high quality product.

Inspiration - A Mindmap

Every time I found or was suggested a piece of inspiration, I put it on this mind map. This then became the base of my research.

Defining the Outcomes

This project has a lot of potential and many possible deliverables, however I need to be realistic in what I can produce in the time frame. This is the minimum I want to achieve in this timeframe that I feel is achievable whilst still pushing the potential.Main Outcomes:

Additional Outcomes:

Project Proposal

I completed a form about the proposal covering what my project is, why I want to make it, who it is for and how I plan to complete the project. I also outlined a brief, matching my deliverables to the learning outcomes of the project.

Target Audience and the limits is creates

My target audience is anyone who can’t be with someone they care about physically. The initial inspiration was long distance couples, however, I know more people could benefit from a product that makes video calls far more fun and meaningful. This could be families living across different countries, online friend groups spread across the world, people with loved ones in hospital, people separated by friends and family in the military and a whole other load of scenarios.However, this does create limitations on certain aspects of the project, to make it as accessible as possible to all those groups. For example, those who are in a hospital or in the military might not have access to many resources or other locations. I need to keep this in mind when developing the prompts.

Personas

I created some personas representing my target audience. I made them specific to my project, making sure to include the aspects that would most reflect their interest in the project. By understanding why they would be interested in a product like this and what they would use it for will be useful in guiding decisions during development and how the final outcomes will look. Given the target audience is broad it was hard to cover all potential consumers, but I tried to cover the major age groups and situations.

The Learning Curves

The only time I have taken a concept to a final product was for my GCSE coursework, where we had to design and make a CD case. This was of course very structured, with an already decided end goal, weekly tasks and very little space for experimentation, meaning I didn’t learn how to manage the project myself and the whole project was a much lower level. Furthermore, I have never developed an app or website with such detailed functionality. The platform involves far more than navigating between a few different pages.However, I know I have the potential to complete the project because I have all the foundation skills for all the elements of the project. I have strong graphic design skills and an understanding of UX and UI design meaning I can build on this to build a thorough mock-up of the website and app to clearly convey my idea and test the concept of the project. This means that even if I cannot develop the app, with my limited software development and coding knowledge I have the foundations to get it fully functioning in the future.The project is difficult and has a lot of different elements that need to come together but I know my passion and personal connection to the project will help me maintain motivation in completing the project and drive me to overcome barriers.

Project Timline

I created a timeline to outline the production process of my project. I then broke this down into a week by week timeline to give myself an outline of when I should have parts of the project completed by. Obviously, as the project progresses things might change and the time I spend on a certain stage might need to change.I also kept a log each week to reflect upon what I had done, how things were going and how I was feeling. This covered more of my personal reflection on my progress instead of technical decisions.

• Weekly Reflections

Production Process

Timeline

Redefining my goals and outcomes

Since initially deciding upon my project, it has changed, developed and decisions are scattered about. So I decided to redefine my key goals, their importance to the project and how they will help me develop skills.

What do I want to Research and Why?

I am aware of how important communication and connection, but I want to further understand the role art can play in communicating in a way that creates connections, encourages creativity and promotes connections.I want to research how communication and just talking to people can improve mental health to help show the importance of my project, as well as see what topics I should guide people to in my communication points. This is because I want to guide users to have meaningful conversations without being pushed towards topics that are too deep or serious, as I want this project to be fun and lighthearted, although users themselves might steer towards this conversation.I want to look at projects where people use different forms of media to communicate over long distances to see the different media people use to communicate beyond texts and phone calls.

Mental Health & the Importance of Communication

My project is built on the importance of talking and connecting with the people you care about to maintain that relationship despite being separated by distance, as communication is the foundation of a strong and healthy relationship; regardless of the type.To support this and the importance of this project, I looked into how good communication can improve mental health. I found that effective communication can improve “wellbeing by reducing stress and enhancing emotional resilience” (Hanger, 2023). Furthermore, being able to communicate needs and boundaries can make someone feel safer, more comfortable and boost self-confidence.Tickets to Connection encourages conversation, strengthening communication whilst having fun. The aim is to not force people to have difficult and deep conversations but give them the space to do so and the tools to build up to that level of conversation.

Mindful Art Prompts

It was important the prompts used in Tickets to Connection promoted conversation and got people reflecting and talking, so I had a look at mindful art prompts for some inspiration. These prompts are usually aimed at individuals, helping them reflect and relax, many of which I felt would be more personal than what users would want to share straight away. However, I found it helpful to see what sort of activities promotes this as well as the additional information of the goals that came along with this set of prompts. Furthermore, ideas for prompts that are more personal or more in depth will be useful for expansions where users are looking for that kind of prompt.

Past Projects Using Art & Media to Communicate

Dear Data
Dear Data was a project where each week two people, Giorgia Lupi and Stefanie Posavec, hand drew their personal data on postcards and sent them to each other across the Atlantic. They experimented with different ways to visually represent the data and approach data “in a slower, more analogue way” (Lupi and Posavec, 2016). The two artists don’t want to use the data to “become more efficient” they instead want to use it “to become more humane and to connect with ourselves and others at a deeper level” (Lupi and Posavec, 2016).I really like Dear Data using physical media in a world where everything is becoming digital and screen based. The idea of physically posting a postcard rather than just sending an email makes it far more personal. I want to get people making art with my project, to have physical pieces of art to send to each other or to have as a physical memento of the moment.

Vlogbrothers
Vlogbrothers is a YouTube channel started on 1st January 2007 for the purpose of hosting the Brotherhood 2.0 project. Brotherhood 2.0 is a project undertaken by brothers John and Hank Green where they only communicated via video blogs, taking turns to upload a short video to YouTube. The project lasted a full year, but by that point people had started watching their videos and so the project continued but shifted to each brother uploading once per week rather than every other day.The brothers now have a catalogue of every video on YouTube that they can look back on. A suggestion I could make for users of my project could be to keep a sketchbook of all the artwork they make with the people they care about to be able to look back.

Inspiration for the Prompts

The Art Assignment

You Are An Artist: A book to supplement the YouTube series of different art assignments that encourage you to be creative regardless of your skill, often with interesting approaches.The Art Assignment pulls together interesting works of art and processes from different artists. These artists then assign the viewers an art assignment relating to their own work or the work they have talked about. This gives people a way to create art, as often the barrier is not knowing where to start. These assignments are not what you would expect, as they are not “draw a still life” or “practice anatomy.” Instead, they include assignments such as “Meet in the Middle” where you and someone you know travel to the midpoint between your two homes and document the journey or “Emotional Furniture” where you arrange furniture in a way that conveys envy, melancholy and confidence. This more fun and abstract approach to art prompts is what I want to include in my project.What I like about The Art Assignment is that the goal isn’t to teach people difficult technical art skills, but to inspire people to get creative and learn about existing art in an interesting way. The assignments in the book often include ways to adapt the tasks to make it more accessible, and also gives some tips on how you could approach the project to get the most out of it. The book encourages creativity and making art regardless of skill level.

Wreck it Journal (and similar books)

The wreck it journal is a book filled with activities designed to stretch creativity and encourage out of the box thinking in a way that leads to the destruction of the book. There are other books that have a similar premise sometimes without the destruction of the book, such as The Pointless Book, The Time Traveller Journal and Diary of a Wimpy Kid Do-it-Yourself book.All these books include activities that involve standard household items in order to interact with the page in the book, often using just a pen to make shapes, write things down or draw. The Wreck-it-Journal occasionally requires a little more as the purpose is to change the complete state of the book, but overall the materials needed is quite low. Furthermore, despite the activities being the same in every copy of the book, they are so open that everybody who completes the book completes it in a completely unique and personal way. I want the prompts I include within my project to include, for the most part, elements that will be personal, be that about themselves or something from their daily life, giving them a chance to share it with the person/people they are connecting with.

Inspiration - A Moodboard

I made a mood board to create a visual representation of my research and things to inspire the creation of my project.

This entire section is not very linear. I jumped around between different things as I discovered new ideas, got peer feedback, or progress with one part led to me wanting to develop another. It covers early development, experimentation, and research in specific areas.

Coming up with prompt ideas

I know I am going to need a lot of different prompts so I wanted to get started on a list early on, so as I thought of prompts I could note them down as well as any communication points I thought of for the prompt.I used a google sheet because I could access it from any way whilst still being able to organise the prompts and even sort them to make sure none are repeated.

User Testing - The concept of prompts & communication points

Draw something you see every day that's red

Draw something you see every day that's yellow

Draw the solar system, be as abstract or as realistic as you like

With a few prompts fully complete with 3 communication points, I wanted to test if the concept would actually be fun and engaging, and most importantly help with communication and connection.As we were the original inspiration for this project, I tested them with my partner, spending an evening call doing a few of the prompts. We did several different prompts, and it did keep us entertained for a couple of hours, especially as we let the conversations go off in tangent (the intention).I asked for one to be recorded to be used for my pitch, but most of the time we were just doodling in our sketchbooks. It added a little bit of structure to the call without needing to be too serious. Overall, it was a successful test.

Pitching to Peers - 04/02/25

I pitched my project to my class. I used my pitch video from the Think Big competition and complemented it using my development blog.Peers then left me feedback on a Miro board, leaving comments on my project's strengths, challenges and opportunities for me to refer back to. The general feedback for strengths was that it's unique and that using art to be mindful, stay connected and hold on to physical feedback is a great idea.

The preproduction stage where I developed more of Tickets to Connection and began progressing towards the final products.

UX and UI Research

Overview
User experience (UX) and user interface (UI) design are a fundamental part of software (and often physical product) design that is intended to be used by people. The two work together to create usable applications and allow users to visually interact with software instead of code based interfaces for all digital interactions.UX design is the process of making sure a product is easy to use and allows users to complete the intended task. UX design is user-centred, focusing on their journey using the product to make sure there are minimal points of frustration for the user, that it is easy to problem-solve issues and that the user has a positive experience.The user interface is the visuals that are then built on top of the UX framework. The UI is the visual interface users use to interact with a product. The design includes graphic elements, colours, typefaces and any other aesthetics of the design. The UI can still aid the experience; typefaces can be important in making things easy to read, colours can help with identification and good icons can minimise the use of words. UI is important within digital products because it allows physical people to interact with a digital product in a visual and intuitive manner.

Golden Rules of UI Design
In 1987, Ben Scheider, created a list of 8 rules of interface design with his research about Human Computer Interaction. These rules are not a complete list and since 1987 there have been expansions and revisions, but they are still a good reference point.Strive For consistency
Features and visuals should look the same throughout. For example colours, typefaces and icons should remain consistent throughout. The steps needed to complete an action or tasks should also remain the same, or similar, every time.Enable frequent users to use shortcut
Where possible allow for proficient users to skip to exactly where they need to go whilst keeping the instructions and directions in-place for new users.Offer informative feedback
Provide feedback that reflects the action completed, showing whether it was a success or failure. Examples include highlighting the box text box a user has clicked, indicating missed fields or marking an item they have selected with a symbol. This allows the user to visually see what they are doing and not second-guess if what they clicked worked.Design dialogues to yield closure
Organise actions or tasks into a manner that is logical to the user and leads to an end goal, e.g. have users select what they want to buy before being asked to input their card details. If necessary, divide the tasks up into groups, so users feel a sense of accomplishment when completing a certain section. Provide clear confirmation that an action has been successful and provide the next steps to allow users to move on.Prevent errors
Try to minimise the amount of errors a user could run into and make it clear how to fix an error if one does occur. An example would be if a user needs to input a phone number, don’t allow letters to be typed into the box, or if they can be, show a message stating the requirements if letters are detected in the box and do not let the process continue until a valid phone number is entered.Permit easy reversal of actions
Actions a user makes needs to be reversible wherever possible. This allows them to fix mistakes, change their minds or explore without consequence.Keep users in control
The users want to feel as though they are in control and the interface should respond to their actions the way they want it to. This means not changing where a button leads or unclear labelling. This also means that they should be given a choice where possible, one being a “yes” and one being a “no.”Reduce short-term memory load
When necessary carry as much information across pages as possible. The user shouldn’t need to remember information given to them on one page to input on another. Designs should also limit scrolling where possible to reduce having to move up and down a page to remember what you needed to do/input.

Afforadance
Affordance is how well an object implies how it should or can be used, without the user having to be told instructions. This makes interacting with things easier and quicker as it relies on visual cues. There are several types of affordance. Some are more obvious than others.In graphical user interface design, affordance often relies on skeuomorphic design. Skeuomorphic design, also part of metaphorical affordance, is when a digital interface reflects its real life counterpart and was a big part in helping people become accustomed to digital interfaces. Today it can be easy to over use it, with many people knowing the purpose of certain icons or features, for example the 3 horizontal lines means a menu. However, it still has its place as we have become accustomed to these designs such as computer folders looking like actual files or making things easier to find such as looking for a magnifying glass to find where to zoom in. I feel this will be important in creating my website and app, as it is not aimed at tech-savvy people. I will keep to modern usage, inline with other platforms and only where necessary but keep users' experience in mind and what would make it easier for them.

Open Learn
I took an Open Learn course to get an overview of all areas of interactive design.

Platform Features

Before moving on to actually making the platforms for Tickets to Connection, I made a list of all the features I wanted them to have and why. This way I could make sure the necessary elements were there whilst avoiding unnecessary clutter. I wanted a written list because I felt there were too many decisions about the project that had only been made in my head and had never been noted down.

Website

App

Choosing Software for Mock-Ups

I needed to decide what software I was going to create the mock-ups for Ticket to Connection in. I have experience using a piece of software called Axure before, but that is expensive if you do not have an education licence and I want Ticket to Connection to go from a project to a business beyond graduation. It does have all the tools I need, including a way to test a mobile app on a phone.I also currently have access to Adobe XD but again, once my student licence runs out I will not be able to access my files as they save to the cloud, and I am not going to pay for a Creative Cloud licence. Adobe is also currently not updating XD beyond minor bug and security fixes, and might end up phasing out the product after merging with Figma.I started by looking for free or low-cost options that would be able to make high quality mock-ups. This would be the best option as it would make the early stages of building a start-up much easier.Figma is the first one I looked at because it does have a free option and I had heard about it a lot. Figma can be used in the browser but also has a desktop app that can be downloaded, so I have the choice of working on any device in the browser or on the more powerful desktop app. The UI looks similar to XD, and it has most, if not all, the same features and tools. Figma also has an app that allows for the testing of prototypes on mobile devices, which will be great in testing the app. The problem is that the free version is limited to 3 files which might prove hard to manage when I need a low and high fidelity mock-up of both an app and website, but there is likely a possible workaround.I then looked at an open-source piece of software called Pen pot, which looked similar to Figma except much less overwhelming. I was able to figure out how to make a board and set up a button to link between two boards within seconds. The main issue I can see is that there isn’t a native app to be able to test the designs on mobile. It is possible to share a link and test web pages on any device, just not the app design.The last piece of software I looked at was Framer, another browser based application. It became clear almost instantly that Framer was just a website builder and not cut out for UX/UI design. I could not add unique elements, and I was incredibly limited on where I could place things. Framer felt like Canva but for website building.Due to it being open source, I did start creating my mock-up of the website in Penpot. However, I quickly realised I could not create the elements I needed to add to my design and I couldn’t have the different pages connect the way I wanted. So, I decided to switch to Azure as I knew this had all the elements I needed and I do get a free year with the software using my student ID. I will just need to export my file as a universal format once it is complete for future use.

The production phase! The stage where I finally get to pull together my research, development and ideas all into the final product!I worked on the final production of all the elements at the same time rather than finishing one then moving on to the other. This meant that the style, feel and goal of all 3 core elements (Prompt & Tickets, Website and App) were all similar and felt cohesive and changes on one thing were reflected in another.

Building the Website

• Website Preview Link

I went into the production of the Tickets to Connection platform mock–ups thinking it would be fairly quick; I would create a few pages with the information that could be clicked between and do the same with the app, building only a little on my past Axure rp skills. But of course it was impossible for me to just do the easy route and as I went along I kept making more and more elements work, pushing my skills and knowledge further and further and overcoming many bugs.A high-fidelity mock-up is a mostly working mock-up of a website or app with all of the graphic design added. For me, this means the website looks the way I would want the final platform to look like, but the more complicated integrations such as the store or unique user login that require hosting and/or an actual product to sell to work. Despite my limited experience in web development and code I aimed to get as many features running as I could and where I couldn’t, I still kept that stage in the user journey.Starting the high fidelity mockup and designing the backgroundI set up a new Axure file for the hi-fidelity mock-up and set it to be the right dimensions for an iMac that will be used to display the website in the showcase. I would love to look into creating adaptive views for a larger number of devices but due to the timeline of this project I was only able to do the one.I decided that having a single page website that people scroll through, with the menu for quick navigation, as this feels more like a journey. I wanted the background to flow with a gradient so it changed as the user went down. I experimented with lots of different colour combinations of my colour scheme, even testing orange which I later cut from the base colour scheme completely. I found that the using navy, or the turquoise was too vibrant for a background whereas the light blue and white worked really well and both had a strong contrast for using black and navy for the text and icons.

Creating the Menu Bar
With the menu redesign, I also had to decide what the sections were to be and what would go in them to decide how many buttons needed to be on the menu. I made a quick plan of this so I could get the menu set-up correctly and also keep track of where the content was going.I used a click or tap interaction so that the page would scroll to the correct point and set the state of the dynamic panel when they were clicked. Interactions are a feature of Axure where you can define what happens if a user interacts with an element in a specific way. I actually added the interaction to a hotspot overlaying the button to ensure it covered the whole area a user could click on instead of relying on them clicking on a small specific point. I also used mouse enter and exit to have the icon and its related text get bigger when the user hovered over them adding motion and visual interest to the design which also functioned as letting users know where they were hovering.I used dynamic panels (which allows a single element to have multiple states that can be set or scrolled through using interactions) so the menu could highlight which area a user was in once they had clicked the button. I tried different colours to indicate this and decided that the turquoise worked the best.

Fixing Menu Bar Bug
Each feature I added I made sure to test it as I went along to make it easier to fix bugs and to ensure issues didn't get duplicated when creating multiple interactions as this would lead to it taking longer to fix in the future. With testing, I found that the find out more button was not working andWhen using a preview window in a browser for Axure you can pop up a console where you can track the process of an interaction. This is great for seeing where an interaction doesn’t work as you can see each step being executed. I used thai to try and find the bug in the button and found it was acting as if there was no click or tap interaction for the button. I tried deleting and reading the iteration, making sure the hotspot was not behind anything but for some reason the fix was copying the interactions to a new hotspot element.

Adding Motion
When it comes to design, you need to assume your user has no idea what they are doing and needs to be prompted or directed for everything. So to encourage users to scroll down, I added an arrow to the home screen and made it wiggle once the user has been sitting on the page for a few seconds.

Button Style Effects
I wanted to make sure users knew when they were hovering over buttons so I used panel estates to highlight the buttons when the mouse hovered over them. I initially did this by using dynamic panels and having a state for highlighted and un-highlighted. To make it work, the mouse exit and enter interaction changed the state of the dynamic panel.After doing this for a couple of buttons, I remembered style effects existed. This meant I could add mouse over effects (when the cursor is hovering over an element) without the need for interactions and dynamic panels. This made the production process more efficient as all kept the interactions tab for the buttons much cleaner, making it easier to fix issues and make adjustments.

Tab Issue
Everytime I needed to test something I would hit the preview button in Axure and this would open a new tab in my browser. I did many tests, especially when making slight adjustments to placing and scaling which resulted in a lot of tabs and it became a bit of a problem, especially if I lost a reference or research tab within them.However, I discovered refreshing the page and updating the preview to the changes I had made. This made working much easier and I could run tests much more effectively.This discovery wasn’t very technical or super significant, but I feel finding the ways to improve workflow are really important in making work more efficient and enjoyable whilst also looking more professional.

Hover to reveal problem
I had set up hot spots across an image of the tickets to allow users to hover over that section to learn more about what it is or means. I used the hide reveal function, thinking this would allow for the most smooth transition of the text appearing and fading. But with testing, I found that if a user moved across multiple items quickly, multiple pieces of text would overlap each other. Even though a user would stop moving the mouse to read, it did not look good and made it feel lower quality. To fix the issue I switch to using a dynamic panel where hovering over a hotspot would cause the dynamic panels to be set to the related state. As a dynamic panel is a singular element, only one state can be shown at any given moment, therefore no matter how fast the mouse is moved across areas, only one panel of text is displayed.I also used the same technique with the key for all the icons on the cards, but allowed users to tab left and right to move between pages of the icons, which would change the text too.

Randomly occurring bug for flip ticket button
A bug I could never manage to fix was that occasionally clicking the flip the ticket button would also scroll to the top of the website. This was annoying but even with the tracking I could not see what was causing the issue.

Font Mapping
I used the Axure cloud to be able to view the preview on another device so I could test if the layout on a mac screen was correct. It was not because I had completely forgotten that the search and toolbar of the browser would take up some space on the screen but I was quickly able to adjust this and shift everything to fit. But more importantly I noticed that one of the fonts I was using was not displaying on other devices because the font wasn't installed on that device.A temporary fix would have been to install the font on the device, but it wouldn’t work to have users download a font just to use a website. Instead, I had to map the font to the website. As I was using google fonts to ensure I was using a readable font, I was able to take the CSS code and embed it into the file in Axure. I did the same with the other font just to be sure it would show up on every device too.

Dynamic Panel View
I started creating the dynamic panels for the menu bar for the Your Journey section of the website when I learnt I could view all the states of the dynamic panel at once. This was another thing that made a massive impact on my workflow and it was so much easier to make sure all the states lined up correctly and I could quickly make changes across all states. Frustratingly, I could have noticed this way sooner but I still used it a lot going forwards.

Using Cases for Sign-In
I want users to be able to log in with their own account to keep track of everything they own, groups and progress towards badges. I used cases which are based around if statements, so that if a user types in a username and password it will "sign them in." As this is a prototype there is only 1 username and password and it doesn't change much about the experience.

Bonus: All the courses I listened to whilst making these mock-ups

During the production of the prototypes of the app and website there was a lot of time where I was just placing elements, inputting next and ensuring the style was cohesive. I decided that instead of just watching youtube videos I would be a bit more productive and watch Linkedin Learning courses as these could help with transferable skills and boost my CV. I completed 5 different LinkedIn Learning courses and was able to complete the quizzes and earn the certificates.

User Testing

I got my prototypes peer tested by an online friend (hence the usernames) because I know where everything is and have looked at it many times, so it is easier for me to miss things like typos and assume that it is a good user experience.Set Tasks
I set a test for each prototype that required finding a piece of information, this way they would have a goal. I also left it open at the end to just give me any feedback on the rest of the prototype.

Notes
They completed the tests why we were on a voice call so they could voice their comments, and I took note of all the things that needed changing. There were a lot of small changes I just corrected at the moment, such as typos or kerning so text was readable. All these changes were things I had just become blind to after seeing it every day which is why it’s very important to have other people test and review it.

Changes
The bigger changes I made after the call had finished. I added a button below the shop to tell users to scroll down because my friend was disappointed there was no convenient button to scroll down like there was every other time.A change I couldn’t make was making a pause play button for the timer. I tried, but the way I stopped the timer was by setting the variable to zero so it could no longer count down which made it impossible to restart it. Given my limited skills I don’t see a way to implement this given the time frame.The biggest change I made was completely rearranging the How it works page. It was pointed out that all of the text on this page was tiny because I had to cram so much into it. This was not good for accessibility. To solve this I made it so users could toggle the icon information on and off over the top of the ticket information to save space and this made everything much easier to read.

Ticket Templates

I created templates for the Tickets that way each ticket can be made by just copying the information into the template ensuring all the tickets would be the same. At this stage I also designed 6 expansion colours schemes so the templates are ready to go.

Putting prompt list into prototypes

I put all 60 prompts onto the tickets in the collection section of both the website and the app, and checked if it was possible to search through all the new additions.I thought this task was going to take a long time as I thought I would have to transfer all the prompts, prompt names and each communication point individually. However, it turns out using a Google sheet for the organisation meant I could transfer whole columns at once greatly speeding up the process.An improvement I would make here would be to figure out how to get the communication points to format better so it matches the actual ticket template. Because the repeater just pastes the text into a single element and repeater tables can’t have new lines to make a new bullet point in a single input, I have to keep them spaced apart to ensure they never overlap. If there was a way for them to adjust based on text in other elements, it would look much better.

Making a Discord Server

Tickets to Connections aim is to help people connect no matter how far apart they are. But it could also help people struggling to find friends and connections. This is why I created a community Discord server to create a safe and welcoming space for people to make friends and share their art. It would also be an excellent way to give users early access to information about Tickets to Connection such as early access to the monthly ticket or be the first to see any news. Many people make long distance friends on Discord, myself included, and it is the best place to build a community where everyone is included and can talk in a semi public place so I feel a server would be excellent for Ticket to Connection.

I set up the server with a bunch of safety messages such as auto moderation to block inappropriate words, as I want the server to be a safe and welcoming space for all. The implementation of roles also meant trusted moderators can delete messages and ban people to ensure members not following the rules are dealt with.I set the icon and colours of the server to match the Tickets to Connection Colours to keep a consistent brand. The icon for the profile is also the one that would be used for the app icons, keeping a consistent brand by matching the pattern on the tickets themselves.

Designing Merchandise

An important part of Ticket to Connection is not pricing the product super high to ensure anyone who could benefit from it is able to buy it. To bridge the gap between the income from the product and the running costs of Tickets to Connection, it would be a good idea to sell branded products.I used product templates to design mockups of different products. I started out just placing the logo on different product but this just felt boring and kinda lazy.

I decided I needed a core design that was interesting and cohesive with the Tickets to Connection branding and visual style without being too over the top. I created a simple design that used the vector brush used in the icons and assets in the brand colours. These designs were transferable to a wide variety of products, even different base colours. I also kept the background of the products consistent to make it clear to see the brand they are related to. I changed up the design for the button badge to match the icons as it is small and has the same shape as a profile picture.

Production Files

• Production Files

The brand guidelines PDF and the Axure RP files for Tickets to Connection.

The website

• Website Prototype Preview

*Note - This is a prototype designed for being used in chrome on an iMac. It is still functional on other devices, the page might not fully fit the screen

Final Product Mock-Ups

Website Pages - Main Site

Website Pages - Your Journey

The App

• App Prototype Preview

*Note - This works best viewed through the Axure Cloud app if viewed on a mobile device, as it designed for use without a browser bar. It does work opened in a desktop browser.

Final Product Mock-Ups

App Pages

App Icon

Ticket Design

• Complete List of Prompts Spreadsheet

Brand Guidelines

Merchandise

T-Shirts

Other Products

This project is by far the biggest project I have worked on and one of the ones I am most proud of.Developing Tickets to Connection involved a lot of different skills and I feel I met my goal of learning new skills throughout this project. I learnt a great deal when it came to prototyping software and feel a lot more confident using Axure RP. The problem-solving element in Axure was what made it actually fun to use, because although it can be frustrating at times I am always looking for a challenge. I also developed my graphic design skills. The opportunity to create a full brand and learning what that involves, means I now know it is something I can offer as a service in the future heading into my career.I believe Tickets to Connection achieves my goal of creating a platform that helps people connect over long distances. The Tickets are fun to complete and help take the pressure off having a conversation whilst still helping to get people talking. The website and app support this goal by giving users a place to view tickets, track progress towards badges and purchase products from Tickets to Connection.Creating two separate prototypes within such a tight project timeline was difficult, and I am so proud with how they turned out. They both convey the concept of what Ticket to Connection would be if it was a launched app and website. I feel the visual style and aesthetic convey the creative and fun feel I wanted, making the brand not seem too serious. Creating the prompts was also more difficult than I thought it would be. I knew it would take time to come up with 60 unique prompts but I didn’t realise how difficult it would be and how hard coming up with the communication points would be. However, I am proud of the final list and the variety of different activities it has and really help Ticket to Connection meet its intended purpose. Finally, I love how the tickets turned out as these work great digitally but I could also see them being real life printed cards.Working on this project alone and starting out with minimal development experience limited me on how far I could go. The next step I would take would be to finish every page and element. Due to the time constraint, areas such as being able to actually enter a group and send messages or small features like pausing and restarting the timer were things I was never able to implement. A key detail I want to add is a way for users to mark a ticket as complete so it can count towards a badge, uploading a picture of the artwork for evidence. This is an important aspect, but as I have no way of hosting separate account right now it got overlooked.Tickets to Connection fills a gap in the market as there are few things to do when you can’t be with someone in person, especially when trying to avoid screen time beyond the video call itself. I am still passionate about taking this project into the real world and having it as a fully functioning product and platform users can buy and use. To achieve this I need to keep applying to get grants or investments and network to find people who can help because I know it is too big of a project to take on alone whilst also having a full-time career.If I was to work on a project of this scale again, I would plan to start the production phase sooner. I feel like I spent too long being indecisive in the early stages of development because I thought everything needed to be perfect to begin with. There are times when decisions do need that extra thought because the outcomes make a huge difference and would be difficult to change down the line, other times I need to stop other thinking and just move forward.Overall, I am still happy with the outcomes of this project and proud of what I was able to produce.

The cards and their packaging

About

Development Book

About

Printing the stickers & business cards

About

Setting Up

About

Looking into Professional Printing

About

Other Types of Cards

About

Convert Branding to Apparel?

About

Applying for Funding

About

Week 5: 03/02/25

This week I attended a lecture from a board game developer. Although I am not making a board game, the process we were shown helped me understand the process of designing the correct layout and made me realise that not everything will feel 100% perfect to begin with but is still the better choice.I decided I was in need of some creative exploration. A large part of Tickets to Connection is getting people to be creative, and this needs to shine through in the branding. It was good to just be free thinking whilst just working with various art supplies.

Week 6: 10/02/25

This week was a big focus on branding development. I made progress in developing the logo and the identity of Ticket to Connection which is an important foundation for lots of different areas.

Week 7: 17/02/25

I started on creating the prompts list this week as I need so many and starting it now allows me to work on it in the background.I also want some other opinions on my project so I launched a feedback form which makes it easier for people to leave feedback.

Week 8: 24/02/25

This week marked the beginning of pre-production with the establishment of wireframes for the platforms. I find wireframes and user journeys a good way to visually see how a user might navigate or interact with a digital experience, instead of trying to imagine it in my head.Doing research into UX/UI design was also important to help make sure I create a good experience for people using my app and website that makes them want to come back, not one that makes them leave in less than 10 seconds.

Week 15: 14/04/25

This week I actually felt like I was making progress and that completing my goals of having a working prototype that is able to convey the concept of the Tickets to Connection platform. I was able to get the foundations of a website (menu navigation, basic layout and core elements) working in Axure RP which was a lot of progress. I always find getting started difficult because I find it hard to find the point to jump off from but now that I have the beginning of an actual product I can feel everything coming together.

Week 18: 05/05/25

The final couple of days were quite stressful as I tied up all the loose ends. I want everything to be perfect, but because of that I struggle to allow things to be finished so I am always working till the last moment.

University Centre Peterborough

Anglia Ruskin University

Experience: Jobs & Exhibitions