Saying “CYA” to Brain Drain
By Kathryn Nguyen, Jess Chen, Landon Fraser, Nicholle Grunsky, and Chaoyi Wang.
Despite the growing number of people settling in Calgary, the city has seen an influx of young adults leaving to different cities for years. The key question is, why?
Calgary is seeing many young people leave the city for better economic opportunities, causing brain drain otherwise, known as lack of local talent. Young adults are seeking jobs that better fit with their education and passions, as well as environments that can provide them with exciting lifestyles, increased work/life balance, and chances to integrate these aspects to achieve a happier life both inside and outside of work. Despite the current economic downturn in Calgary, the city does have several benefits that need to be communicated more clearly and through channels that young people use. For example, Calgary is well-respected globally and was ranked the fifth most livable in the world in 2019 (White, 2019). It has also been designated the number one city for driving and transportation in the world and was ranked the number one city to live in North America (Weeks, 2019; White, 2019). These rankings show Calgary is a high-class city, but young people are often left out of the conversation. With economic opportunities disappearing, Calgary needs to incentivize young people to stay in other ways.
To tackle this problem, we proposed a new committee and platform called CYA for Calgary Young Adults.
What is CYA?
CYA is made for and run by young adults between the ages of 18–35 in Calgary. It is run by a committee of elected young adults, each representing different areas of interest to young adults who wish to establish foundations in a career, education, and social life in Calgary. CYA aims to bring concerns, suggestions, feedback, and ideas to Calgary’s municipal government to prevent brain drain and make Calgary a city that young adults choose to stay in.
To make things as accessible as possible, we created both a website and an app. The website was one of the beginning steps of our five-year innovative action plan for our stakeholders. Below is a brief overview of the five-year plan:
The website was implemented first since it was quicker to establish, easily accessible on different platforms, and has sufficient functionality for CYA’s first year as the committee gets implemented.
Using Weebly, the website has both web and mobile functionality on iPhone and Androids. Weebly also includes widgets, contact forms, and newsletter functionality that can flesh out the website. However, there are downsides to only using a website, especially on a third-party hosting platform: users cannot sign up on the website, and Weebly lacks a system to notify users on either web or mobile. For these functions, we looked towards creating an application to supplement the information on the website.
The app is a subsequent initiative on behalf of the committee, which will allow for enough time to research, plan for optimal user interface and experience, and develop the app. It is made for young adults and ran by young adults.
The app is linked to your personal profile on MyAlberta Digital ID to help ensure proper verification and one-time voting for committee representation. The app includes a variety of functions — meeting mentors online, finding job ads that specifically target young adults, giving direct feedback to your representatives, receiving updates on the latest news or events happening, and so much more. The app is meant to be interactive and used on the go, in the palm of your hand.
CYA App and Website work simultaneously together to create a hub for young adults in the long run.
Tools We Used
To get started, we first started exploring a variety of different app makers. This list includes AppyPie, ProtoPie, Proto.io, Honeycomb, Flutter, and more. Eventually, we settled on the following tools because:
1. They were accessible to us and did not require extensive computing power. (This was critical since some of us had older computers and could not run heavy applications.)
2. They had many tutorials online, which made it perfect for us to learn from scratch, especially within the short timeframe we had.
3. They enabled us to play around with some other technology tools such as plugins and widgets, as outlined below.
Tool #1: Adobe XD
Adobe XD is Adobe’s UI/UX design tool that allows users to create prototypes for different applications on mobile and web devices. It enables you to do various prototyping and has many videos and plugins that help make the learning process faster and easier!
Step 1: Getting Started
Upon downloading Adobe XD, you are greeted with the classic create a new document screen. Here you can choose the type of size you want to start working with or even check out the links for some extra resources to help you get started. For us, we went with the iPhone 12 Pro Max since it was the first option. Looking back, we may have wanted to start with a smaller version to ensure readability and prime viewing for all users.
Step 2: Learning the Tools
Here you will use artboards to create different screens for your prototype. You can use a toolkit to navigate the program, create buttons, add artboards, add text boxes, and so much more. Additionally, each tool comes with a variety of options that will appear in the right panel. For example, the text tool will appear with the following options: the typeface, the size, the font, the kerning, the indentation, the positioning, and so much more.
By learning these tools and their possibilities, you can create some beautiful, user-friendly layouts. Adobe XD also is quite content-aware and will show you spacing when placing objects down to help keep things consistent and on the “layout grid.” According to Nich Babich, “Grids help designers build better products by tying different design elements together to achieve effective hierarchy, alignment and consistency, with little effort (2017).”
Another tip I have is to look up templates for standard screen types. For example, Adobe released some handy templates for web and mobile wiring here. They included ones for a profile, messaging, menus, popovers, and more. You can download these and copy the ones you like over to your file to begin customizing them.
Step 3: Prototyping and Wiring
This is where the magic happens. You can finally start wiring your artboards together. Adobe has implemented some cool transitions that allow you to imitate a swiping feature, pop-ups, and more. For example, on our mentors page, I was able to implement a swiping transition with the help of YouTube and Adobe’s Auto-Animate feature.
Additionally, you can also create pop-ups and overlays. This is a fun way to increase the app’s usability and add extra features like a logout confirmation and a sliding menu.
A final tip I would give in prototyping is to stay as organized as possible. If you have an intensive prototype with many links, your screen will eventually end up looking like ours. Here we have a navigation bar at the bottom that has five links alone. It is important to name your artboards and layers and to group them together if applicable. Despite how messy it looks, we can easily click on a link and know exactly where it leads because of our naming and overall organization.
Step 4: Exploring a Little Further
Lastly, you can use some extra tools known as plugins. You can think of these as a Google Chrome Extension but for Adobe XD. They have a variety of functions and ultimately make your life easier as a designer. Here is a brief overview of the ones I used and for what purpose:
Step 5: Sharing your Prototype!
Now that you have done all the hard (or fun) stuff, you can finally get to sharing your prototype! Adobe XD makes it quick and straightforward by navigating to the share tab in the top left corner. Here, you can choose to share a link in five different modes suitable for your needs. These are shown in the image below. You can also add a password or make it invite-only. Here is an adobe article that provides some extra details on how to properly share your prototypes.
Tool #2: Coolors
Coolors is another tool we used to determine a bright and exciting colour scheme for the app. It is a colour scheme generator that is super fast and easy to use. To begin, you first navigate to your website: www.coolors.com
You can click start the generator, and immediately you are surprised with a five-colour scheme. For example, the first one I got was a delightful array of pinks with a pop of green — great for a floral or spring-themed company!
As shown in the picture, you are also provided with the HEX codes and a name. You can click on the HEX code to choose another colour code for your convenience. Additionally, you can also type in your own colour code or use the picker to lock in a colour of your own choice. This can be especially helpful for those who have a few colours in mind but want to find some accents. Additionally, say you like one of the colours but want to see what else matches it — you can choose to lock that colour in and continue generating more schemes around that.
Overall, Coolors is super helpful and highly recommended for anyone working with branding or design.
“As someone who works with a lot of branding, I love Coolors because when I’m feeling less inspired or do not know what special colour I am looking for, I can turn to it and rely on it. I actually bought the premium package to support the creator of Coolors. From this, I can add it to a majority of my Adobe apps, save colours palettes, and also get the Adobe extension for my graphic design work.” — Kathryn Nguyen
Tool #3: Weebly
Weebly, which has been integrated with Squarespace, is a website platform often used by businesses due to its apparent ease of use and integration with the Square payment application — this may come in handy if CYA ever wants to use their website as an online store.
Weebly allows users to choose from a set of pre-made themes or import their own theme. After selecting a theme, users can then customize fonts, colours, images and add different elements to the website through their website builder. Experienced users can even edit the webpage’s HTML/CSS stylesheets if they wish to change elements that are not customizable from Weebly’s user-friendly website builder.
Weebly allows a variety of customization options, all of which are done through the website builder. Here, users can customize their theme, fonts and sizes, colours, and titles. Elements can also be customized: Weebly includes an image editor. Elements that would otherwise require the user to have JavaScript knowledge, like a contact form, can be easily dragged and dropped into the website with data from the form e-mailed to the owner and stored within the servers.
The HTML/CSS editor colour-codes its elements, making building a website more user-friendly for those who do have some knowledge of coding and web design. Weebly simplifies website-building in a way that looks great without having to worry about learning in-depth coding and web design skills.
Weebly also contains various applications, both its own and third-party, that users can import onto their website. These applications include marketing tools like SEO analysis, design tools like colour blocking and accordion dividers, and productivity tools like PDF displays and job boards. On our website, we used Google Calendar as well as a scrolling RSS feed.
Google Calendar Integration
One application allowed users to integrate events with Google Calendar, which was perfect for our events calendar.
Through the application, users can input events into Google Calendar and sync them automatically with the Weebly application. With extended use of Google Suite, it may be possible for businesses to submit events directly to the Google Calendar, making publication of a rolling events calendar simple for website administrators — all they would have to do is approve the publication of the event.
Scrolling RSS Feed
A second application allows users to connect to an RSS feed, displayed in a scrolling format on the website. We used this to display local news headlines from CTV News. This is also incredibly simple to implement as long as the user has access to a working RSS feed.
Final Reflection and Thoughts
Kathryn’s Reflection:
Learning Adobe XD seemed super daunting at first. “I’ve never made an app or a prototype.” “How are we going to do this?” These were all thoughts that ran through my head. Looking back, I wish I had started earlier and just thrown myself in there. Playing with the tools, getting accustomed to the workspace, and looking up templates are great ways to get you more familiar and comfortable with the app.
Additionally, using Youtube and other resources online to get inspiration from or learn from was super helpful. I would highly recommend doing so whenever learning a new program in general. If I could spend more time on the project or had to take it even further, I would also go into depth in exploring the Anima plugin. It allows you to prototype with links and enables users to fill in forms.
For future opportunities, I may also consider using Figma. It seems user-friendly and has tons of resources online as well. Additionally, you can work with others which could have been a massive help for this project. Down the road, I am sure I will look into Figma for other projects I am working on
Jess’s Reflection:
As a website builder, I was disappointed with Weebly’s user interface, which I found clunky and challenging to use — particularly the drag-and-drop features. I considered using WordPress but chose Weebly because I am aware it’s popular with small businesses. Also, I’ve maintained a website on the free version of WordPress for a personal project and was continually disappointed with the lack of customization options, while I knew that Weebly had more flexibility with colours and design, as well as the ability to edit HTML/CSS on its free version — which WordPress lacks.
For beginners to web design, Weebly is a useful tool, which is what makes it popular. No knowledge of coding is needed to create a website, as Weebly relies on drag-and-drop functionality and accessible pop-up options to change the web page elements. However, in turn, the user sacrifices precision and customization options. Inexplicably, Weebly also lacks a feature to copy and paste elements or set up templates, meaning that the user has to drag and drop each element individually and cannot re-adjust two images to the same width unless it was adjusted from the HTML menu. This made Weebly significantly more frustrating and time-consuming than it should have been, even for someone with rudimentary skills in web design.
Ultimately, though, using Weebly was a good experience — I think it’s always good to become acquainted with different platforms as each has its pros and cons.
References
Babich, N. (2017, December 20). Building Better UI Design with Layout Grids. Retrieved from Smashing Magazine: https://www.smashingmagazine.com/2017/12/building-better-ui-designs-layout-grids/
Bianchi, F. (2021, 04 22). Coolors. Retrieved 04 16, 2021, from https://coolors.co/
Kingston, C. (2020, December 18). Presenting and sharing designs with clients using Adobe XD. Retrieved from Adobe: https://www.adobe.com/products/xd/learn/collaborate/stakeholder-review/presenting-sharing-with-clients.html
Weekes, S. (2019, November 15). Calgary ranked best city for driving. SmartCitiesWorld. https://www.smartcitiesworld.net/news/news/calgary-ranked-best-city-for-driving-4786
White, R. (2019, February 15). Is Calgary really the 5th best liveable city in the world? Calgary Herald. https://calgaryherald.com/life/homes/condos/white-is-calgary-really-the-fifth-most-livable-city-in-the-world
