This blog is in chronological order, so to see the evolution of the app scroll down to the first post called “Idea generation”.
The code is here: https://git.arts.ac.uk/19004236/CommunityTechAid/blob/main/README.md
A video example is here: https://youtu.be/p0vBwaaMXg0
The CTA App has 5 tabs: How To’s, Contact us, home, Find us and calendar.
Under the How To’s section: There are written guides for Macbook, Windows and Linux Computers. The charity I’m working with gives beneficiaries refurbished laptops, so users can check these guides to set up their new computers. Additionally, there’s a link to the video setup guides if they prefer to follow the video tutorials. These are in a playlist to allow easier accessibility.
Under the Contact Us section, there’s the charity’s phone for local and international calls, email, and buttons for their social media accounts. From here beneficiaries can access all their pages in one go.
Under the Home page, there are links to the CTA website with useful pages, like how to find out about Digital opportunities, and the latest news about the charity. This is so beneficiaries have an easy-access place to find information and the latest updates.
Under the Find us page, there is a map using mapKit showing the location of the offices. There is also a short description of how to access the premises from outside, which can be daunting if one does not know where they are located. It also has the code needed to call to enter the premises. After pressing the paper kite button, it sends the user to a google maps address where beneficiaries can plan their route to the charity, be it by car, bike, on foot, or public transport.
On the Calendar page there is a calendar that updates in real-time. As a further note, I would try to connect this to the charity’s Google calendar (https://calendar.google.com/calendar/u/0/selfsched?sstoken=UURmaTN1Ym5scmFWfGRlZmF1bHR8MmM0MzJlYzVjOTc5NDcxZTIzN2Q2YjkxMWZlODc5NzE) using the google API. I was not able to connect these, but I would continue working on this for further iterations. For future iterations I would also consider using FScalendar (https://www.communitytechaid.org.uk/online-help) instead of the one I currently have, as I have found more documentation on FScalendar.
The objective of this app was to provide accessible information for beneficiaries who are in receipt of a computer from the charity, to help them get started and access help and useful links that can aid them in their journey and their first steps towards computer literacy. The point of making an app like this is because these users tend to have mobile devices and are more fluent in these so this app can make it easier for them to transfer these skills to their newly acquired laptops.
At first, the home page had the logo and a start button. I figured the star button was unnecessary. I added instead a page of helpful links that could help beneficiaries easily access important information about the charity. I figured this would be much more useful.
I decided to choose this logo for the app icon, as it is clear and displays the name of the charity, making it easier to locate when scrolling.
I showed version 1.0. of the app to Cat (the CEO) of the charity:
This feedback is from version 1.0. made me rethink the layout of the app. I realized that adding extra unnecessary visuals could complicate the view and make it more difficult for beneficiaries to navigate.
Version 2.0. takes away the unnecessary visuals but I realized that the way the information was conveyed was not the most efficient. An image of a map is not as useful as a map itself. I also was trying to make a location and contact view in one, to not have to have unnecessary tabs.
From my personal experience, accessing the CTA offices is a bit tricky, as they are part of a shared office building. So from this experience, I went back and wrote down the instructions you need to follow in order to access the office. I added these to the app as just the direction to the office building alone won’t guide you to the CTA office.
The background has an interactive imported Apple mapkit, to aid visual and geographical location. The charity only updates its google maps, so I added an SF symbol button that links to the google maps directions, in case any beneficiary would prefer to use those. These maps have been introduced to help beneficiaries easily find the CTA offices, as in the past some have arrived late saying that they couldn’t find the offices in time, which can be detrimental to them as they could potentially miss workshops and scheduled activities at the charity office.
I have implemented a nav system using TabView and .tabitem(). I used the SF symbols App to choose what icons to use.
I wanted to keep the design consistent so I chose .fill items for the first 3 to keep the design consistent. Then for “Find us” I chose the magnifying glass as it represents finding a location. This page is for finding where the charity is located so that was relevant. The calendar was another SF symbol and was the basic calendar icon, which felt appropriate for its function.
For now, I’ve imported the following calendar (https://github.com/codeWithCal/CalendarSwiftUI) It doesn’t connect to the charity’s google calendar yet, but I’m going to leave it there as a placeholder for the moment as I don’t know if I’m going to have time to sort out the API.
I sent the current app version to the CEO of the charity, and her feedback was the following:
The toggles in the above design look like clickable buttons and are not clear if they have a function or not. I will now go back and re-design the pages that use these toggles for a clearer design that would suit the charity and be easier for the beneficiaries to understand.
I have started to code some basic pages together and connected them with the nav. After seeing this version 1.0., I’m reconsidering my set up. I’m going to go back to the drawing board and think about how I could better display the information.
Regarding the calendar App, I am going to set up a simple UI first and link it to the page, as It might be wise to focus on clear and beautiful design.
Who are they? It’s a charity I help out with in my free time, here in Vauxhall.
What is Vauxhall? Vauxhall has a mix of rich people and humble hard workers. We are helping the humble workers. Little Portugal is here, a culture of Portuguese and Central and South America. I like Portuguese and c and s Americans because they remind me of Spain. Spain next to Portugal, south americans, we both speak Spanish. We have it in out blood. I like these people we are helping, I’ve met some of them on the street.
The other day, I spoke to trustee in a workshop we were giving. I asked him what music he liked. best question ever. He showed me his music, his music was from his culture, he could have been Venezolano. He wanted to listen, so I asked him if he made playlists and he said he didn’t know how to on the computer, but showed me his youtube songs on his phone.
I wondered about this… he was better at using his phone than using his computer because he had a phone! he had a phone before having a computer.
At CTA, we hand out recycled computers, and we clean them inside and out. computers and we teach the community how to use them to bridge the tech gap and help them create their CVs and so they can access jobs and have equal opportunity.
That’s why I need to make an app for CTA.
The phone is where they access the information about the courses we give. How are they gonna know to find the courses on the computer if this is their first computer! This app should make it easier for them. Using their phone is easier for the beneficiaries, so making an app will incite them to join. If people are learning and understanding new things and this app can help them do that, then that is the key!. If we handed them out a laptop and it’s their first laptop, they are not going to understand it!
So we gotta speak in their language. We gotta make an app for them that they actually feel like using. The more fluidity they get from using the app the more they are gonna wanna use it which in turn means they are going to want to join more workshops, which in turn will make them more knowledgeable, and in the end more happy. Isn’t that beautiful
Explain the information in a simple way. So they can access workshops and see what’s on at Community TechAid.
Over the break, I got through 18% of the ios Developer Codecademy career path. It seems like not a lot, but It was around 1 hour per percent. I also started a LinkedIn learning course Learning this has allowed me to understand the swift error messages alongside Ken’s lectures.
Today, I coded the first page of my app. I still need to add a box and more design but it’s a start. This is what I made for next on wednesday’s we make apps
In order to keep each other accountable, Annie (classmate) and I are meeting on Wednesdays and setting each other tasks for the upcoming week. For next week we set the following;
To do – for Wednesday 17th:
App dev:
⁃ Code from what we have learnt from 1.5 lessons – basic shapes/structure of a view. This is on the next post.
⁃ watch last 2x ken’s lectures.
⁃ see where we are at with the app from Linkedin learning – next 2 lessons.
After showing her the Figma, here is the feedback give to me from the Community tech aid CEO :
the yellow and beige contrast colour too low, so I have to check the contrast
Logo: change to a white background instead of turquoise
-CTA has video content available for how to’s, I could add these to the app instead of using text
-Maybe find way around needing google account to access calendar
-They Like that the calendar blocks out a time slot for one person (don’t make it bookable for more than 1 person)
-As long as it connects to google calendar, its ok that its not google calendar. (Can use other apps)
-I need to remember to make the project inheritable, document and comment code very clear so that they can actually use the app if I ever have to leave
Bookings calendar: dates(to add to the calendar design) Mondays: quick start Wed: repair day
Lucky for me, CTA already had a Figma brand guidelines template. I used this design style to design the first version
Below is my first design concept for the app, using the colours and fonts of the CTA Guideline.
FUTURE IMPROVEMENTS: The app logo needs defining, I don’t like the current one too much. I’ll ask Cat from CTA on Monday what ideas she had for the app logo.
Also, maybe the nav buttons could be the red, green, yellow, and blue from the first image, instead of the current turquoise ones. Currently, the nav buttons have pngs from the internet. Maybe worth refining these and maybe making my own designs in Illustrator.
For my project, I have decided to work with a charity I’ve been helping out. It’s called Community Tech Aid. We clean and wipe used devices and hand them to members of the community who are in need. We also give workshops to bridge the bag of media literacy in the community.
I thought it would be great to make an app for them, so I went in today and ask what they thought. CTA is happy to work with me and get the app up and running. Below are some notes I took from the first interview.
The first idea is to make a ”wiki” so beneficiaries can search for help with their phone. The charity mentioned how users usually are fluent with using there phones, but not as much with laptops. The company’s current advice page is online. The ceo mentioned how the beneficiaries find it easier to navigate apps than websites. It will be design focused, and aim to use the least amount of text possible.
I thought that this may be because more people have phones than they do laptops, but after some research it seems 50-50, I’ll ask the ceo why she think this is next week.
The ceo of the charity mentioned how members of the community seem weary of tech, especially of putting in information. The design has to be very easy to understand, and avoid data collection.
Further accessibility ideas:
-Translation (further step, with help from volunteers to translate into their language, as google translate is wobbly).
– Audio notes instead of writing text for help.
-Also, password management: I predicted this would be dangerous for me to implement as it’s sensitive information and would need encrypting.
-Maybe in the future add approved articles from other websites.
ACTION PLAN 1.0.
Action plan 1.x. is to design a working figma app, using the company’s designs. Further development is to add animations, videos, audio, anything to make the amount of text as small as possible. I help out at the charity monday mornings, So each monday will be an opportunity to check in with them.
1.0.: For next monday, I will start to design the figma app using the company’s designs. Let’s see how far I get. Then I will show the charity and decide from there how to move forward.
Welcome to myblog.arts. This is your first post. Edit or delete it, then start blogging!