CON-ACTION Website & Application
Hello digital creators!
We are a team of four people, George, Anna, Evangelia and Voula and we are called. “BrandNew”. While we were studying the course “Digital Creativity: Apps, Games & coding” of #AdandPRLab of Panteion University, we were asked to compose a team and come up with an innovative prototype for an app and website. Our project is called “CON-ACTION”, a name that is based on the idea of connecting and informing people and especially the youth, about actions they could take in order to improve. Our main idea is to achieve this by providing an App and a website that will be updated with new job positions, events, seminars etc regarding many different fields of interest. Those opportunities can help the users to broaden their knowledge and their spiritual horizons.
Specifically, the audience we want to reach through our application is from 18 to 30 years old. People, who are students in university, TEI, college and ΙΕΚ looking for internships and graduates looking for work. Of course, the users are going to have the option to communicate with us for further information and questions.
So, after defining our goal, we wanted to learn more about our audience and our prospect users. That’s the reason why we decided to conduct some interviews, in order to get some useful insights for our Project. After the data that we collected, we created 2 possible personas; the student and the graduate.
Persona 1
“His name is John, he is 22 years old and studies Greek philosophy. He is at his senior year of University and right now he is very interesting into practicing all the knowledge that he gained through all of these years of studying. Hence he needs to find an internship, but he has no idea how he is going to search for a proper internship. He would really need some advice in order to find information and make a careful choice.”
Persona 2
“Her name is Mary, she is 27 years old and she has just moved in Athens. In order to build her life in a new city, she needs a job. She has a University degree on accounting and she has a five years experience, since she has a job at his hometown on this field. She needs advice and information, in order to find a proper job based on his degree in a city that she doesn’t know very well.”
Let’s move on at the presentation of our application.
1st screen: Sign up/Log in
This is the very first screen of our app. It is common of course for everyone. The user has to type his email address and his password. If he doesn’t have a profile, he has to click on the “Sign up” button. If he has, he can click on the “Log in”.
2nd screen: About you
The second screen is also a common field for our users, if they use the app for the first time. So, after typing their email and password at the previous screen, they click “Sign up” and they are moved at this specific screen where they have to put some basic information from themselves.
A very important tool: Slide in menu
Before we move on at the next screens, we need to clarify that (whether you have done the basic steps when you are creating an account, or you have already a profile, so you are familiar with the app) as a user you are going to find at each screen, top and left, the slide in icon. This is a very important app pattern that many apps use in order to help the user have easy access at every possible screen of an app without any difficulties. So, at the slide in menu you can find all on the apps fields:1) Home, 2) Profile, 3) Internships, 4) Job positions, 5) Volunteering, 6) Events, 7) Workshops and seminars, 8)Contact us, 9) Settings and 10) Sign out.
4th screen: Home page
The 4th screen is the home page and again each of our users has his home page, in order to see profiles of other users, comments, posts, re-posts. The user has the ability to publish a post and also to search whatever he wants at the “search bar”, such as other users, posts, events, seminars etc.
5th screen: Profile
Each user will have a profile. Here they have gathered very important information about themselves that are very useful. More specifically their profile screen works as their CV.
6th screen: Internships
When the student visits this screen, he is able to see internships that are based on his studies and interests. Students can pick whatever post they are interested in. Let’s see an example…
7th screen: An internship add
Hypothetically a student picks the first internship post. He is able to see through a new screen (the one above) with the whole post. The post contains the location, the date publishes, the company that offers the position, the number of the free positions, the intern’s tasks and responsibilities and of course the contact info. Each add has the same form.
8th screen: Job Positions
When the persona visits this screen, he is able to see employment adds that are based on his degree, interest and possible his career. Let’s see an example…
9th screen: An employment add
Hypothetically, he picks the second employment post. He is able to see through a new screen (the one above) the whole post. The post contains the location, the date publishes, the company that offers the position, the number of the free positions, the intern’s tasks and responsibilities and of course the contact info. Each add has the same form.
10th screen: Volunteering
This screen has to do with the volunteering part of the app. The app recommends volunteering events to every user. You can see that there is series of post on volunteering events and actions. Let’s choose one and see how it is formed.
11th screen: A volunteering event
Over here we have a screen of a volunteering organization. This could be the choice of both of our personas. As you can see at the post we have the title of the organization and a short description. The other posts have the same form as this screen.
12th screen: Events
This specific screen is very useful , since it offers a lot of information for a variety of cultural events. Our users can click on whatever post they find attractive and find out more details about the event.
13th screen: Event description
The user clicked on the first event in order get more information. He is able to see the whole event name, the exact date, cost and duration of the event and of course a more detailed description. The rest of the event screens have the same form.
14th screen: Workshops and Seminars
A lot of users are interested into developing new skills and to broaden their knowledge and their spiritual horizons. Hence they want to attend at seminars and workshops. In this screen there are available posts about the latest workshops and seminars.
15th screen: Workshop or seminar description.
When our personas click on a post, they have the ability to see more details about the workshop and seminar. More specifically the users can see the date, the duration, the cost, the location and a description of what the events offer.
16th screen: Contact us/ Info
This is a screen of viable importance. Users have the ability to contact with us, the creators of the app in order to give them more info if they need it.
17th screen: Settings
This is the last screen of the app. It is the last option of the slide menu were the users can make profile changes that have to do with the privacy policy.
Our website has the same philosophy. The biggest differences are that our home screen has some information about our Project and also, before all the adds and the activities there is block with the title of the tab and a few words about it.
So, let’s see some screenshots of our Digital Platform.
We tried to make our app and our website as user friendly as possible, using the heuristics as much as we could. We chose white and black color for the pages with big texts, because those colors are easy on the eye. Also, we used a gradient overlay layer at our photo-blocks in the website with blue and red. Blue shows the credibility and red is connected with the intensity. In addition, near the menu we put our logo that links to the home page. Specifically, we put it in the center, because the human eye tracks firstly the messages that exists in the center. Moreover, the menu is available in every page. So, the users can explore easily our application and our platform. Also, we tried to use symbols that nowadays everyone recognizes and have a minimalist point of view in our project. We have to mention that there is match between system and the real world, because our information are real. Furthermore, there is a sign that the action is loading and our application and website support undo and redo.
While we were creating our project, we kept in mind everything theUXProdigy and Magy Kontou told us at their sessions. Still we faced a basic difficulty… because of the fact that we don’t know coding, we didn’t know how to make a data base to actually collect the user information as we wanted. For this reason, we gave to our users 3 opportunities for every category.
This experience gave us some new soft skills, like organizational skills and knowledge of two important digital tools. We learned how to cooperate in something that was different from every project that we have done as a team. Additionally, we exercised our ability to underline key words and state clear messages briefly. We also understood the importance of making something that could benefit a lot of people with the same worries with us.
Through this project we learned by actions what theUXProdigy and our professors have already told us; “There should be no deadlock at any page”, “the less click the better” and “the user should NOT feel tired due to our application and website”. This is something that should keep in mind anyone who’s interested in making an app or a platform. Finally, we want to suggest the watching of some tutorials about proto.io and tilda, because there are so many abilities that you can take advantage of.
Thank you for this journey!
