Page 1

Ahmed Eleyan

Project Summary: Swedish Council for Higher Education (UHR) wanted to re-design in a different way than is. Because the persona for the International students is totally different than the Swedish students in different aspects from entering the website until getting the admission results. For that reason, ITS, UmeĂĽ University hired me and a college from Germany to re-design using the UX principles and under the new goals and vision for the UHR. Company/Client Name: ITS, UmeĂĽ University. Project Date: June 2018 Major Tasks & Responsibilities: Develop the user journey, user research, information architecture, persona, reversed persona, design lo-fi and hi-fi prototype, usability testing and iterate and daily documenting. Platform: Web Design Tools/ UX Methods: Axure, Balsamiq, Persona, User Journey, Adobe Photoshop for retouch and mockups.

▪ ▪ ▪ ▪ ▪ ▪

The current website doesn’t give the feel that this is the official website to apply to any university in Sweden. There is no direct impression shows that the international student can study in English in Sweden. The important information such as the required documents needed from a student from a specific country needs 5 clicks to reach and leads sometimes to unqualified the application. There is no effective help path for the students who are not sure about what they want to study. The filter system for the search results is complicated (hard to navigate and update the preferences). The admission process has a new goal from UHR which is let student verify by themselves the required credits from their transcript to qualify the programs they’re applying to. This will save time for the people behind the admissions. Current Uploading system for the required documents is confusing, and from my user research found that this led to unqualified applications for students and they didn’t know that they did something wrong.

Re-design the website completely to give the feel of the official website and take care for each student visit the website by customizing the information based on his initial input and make the search and admission process easy rather than the current complicated one.

The UHR asked to study by doing user research and find the pain and confused points that the international students suffered from while they applied to study in Sweden. After that by using the UX principles we’ve to re-design the website and provide a complete functioned hi-fi prototype using Axure.

There were initial inputs from the UX manager such as a persona he worked with it and identified some pain points. However, for the limited time, we’ve decided to create a user journey for myself from the time I start thinking to study in Sweden until being accepted. Also, we created another User Journey for my German colleague and start to find the common pain points. My User Journey was already complex as it represents a student out of EU and this category going through addition phases than EU and Swedish students. After that we created a User Scenario in a timeline frame for the current situation to understand the system and the behaviour precisely.

I’ve created a User Journey from the intention time to study until getting acceptance in both the Master program and scholarship. The journey above represents the time frame and consumption, emotions and screenshots for the websites visited during the process.

After studying the current information architecture map and how usually the student goes from a page to a page, we decided to create a checklist for the functions and elements that each page should have. The list organized based on the research study. For example, the front page should have: ▪ ▪ ▪ ▪ ▪ ▪ ▪ ▪

Logo Sweden Official feeling One application for all Swedish universities Have English programs Timeline / process Customized for nationality and education Explore programs

▪ ▪

Header Footer

User Goals • To get accepted to a scholarship • To get accepted to a Master

Background • Hosam finished his

Motivation •

Hosam is very

bachelor and wants to do

motivated to do his

his masters abroad.

master and he is prepared to invest a

• He does not know much about the education

lot of time to

system and processes in


different countries. • He has a friend studies in Sweden.

Hosam began researching on master programmes in the middle of his bachelor.

Based on the user research, these were main questions Hosam had during the process: ▪ ▪ ▪ ▪

How do I get a scholarship? What are the English requirements? How do I apply and what happens next? Do I apply to all universities I am interested in?

▪ ▪ ▪ ▪

Do I need to study Swedish first before the master's programme? Why did I not get accepted to all my choices? Where do I live? Can I learn Swedish while I am there?

We went through different websites in the educational field and to different Swedish official websites to check out some design patterns followed and inspiration, so we can make sure the end design will be familiar to the students who go to these websites while searching and applying. Sample of the websites: | | | | | | | | |

The design process went through 3 main stages, scribbles, mockups and prototype using Axure.

We start sketching on papers initially how the screens will be, and it was quick as the focus was on the next step which is mockups.

Balsamiq application was used for designing mockups for interfaces.

The front page: We did the sketch based on the user research and found out that some students don’t know exactly what they’d like to study, so we create explore section (inspired from More info at the hi-fi part.

The search results: The current search result page filter is not easy to update. Also, quick scanning and comparing between programs need 2-3 clicks to do. So, I make a new design that takes into consideration these problems. More info at the hi-fi section.

My Page: The page that the student sees after submitting his application. I’ll explain it more in the Hi-fi section.

We’ve used Axure RP 8 to design a Hi-fi prototype. To see the differences, you’ve to visit and see the current version.


Front page

We made the design to be focused on the search bar for students who know what they’ll study exactly, and for whom not sure, we made explore section for them for the top 5 categories.

If the student not sure about what to study, he/she can select one category and read about it, then explore different programs related. 6 main categories are presented, and the other categories available when you click on Explore more as space is limited. The 6 categories can be random or show the top 6 categories that are related to the 2030 sustainable development goals for Sweden and the United Nations.

It answers the 2 main questions (Can I study in English? Can I apply to any Swedish University from here?)

The second section is for showing the requirements for a specified country

[The country auto-detected from the IP].

• • •

As the applicant choose/confirm his nationality, the system will present the important requirements based on his/her country. Doing this will help the student to know what he/she has to do as the requirements differ from a country to another. The Journey dates are customized also, as for example, the dates differ from the EU and outside of EU.

The third section is for showing the time frame and it’s customized for the selected country. That’s to save time for the student and show only the relevant information.

Search results:

I’ve updated the search result in a way that shows all the filters on the left-hand side in a vertical way, so it can be easy to navigate and update. The Active filter shows what has been selected from each filters’ section. The program/course results show the summary for each program and could be favorite or add to the basket. The way I show the boxes of programs makes it easy to quickly compare between different programs.

My page

The new Mypages site consists of three big elements: •

• •

The menu on the left helps to navigate and inform. Users can access messages, see the closest deadline, access documents, rankings, etc and add/edit/delete things. They can also have a look at the calendar and at account settings. The area in the top is there to inform the user what’s going on with the application right now. In this case, it’s a text, that tells him what he has to do next. The biggest element in the bottom contains the tasks the user has to fulfil, in order to complete his application. He can click through the different tabs and basically do it in the order he likes, besides the verification of requirements, that obviously can only happen, if documents have been uploaded.

Uploading documents

We’re asked to allow students to have the option to upload all their documents (passport, transcript, diploma, English test) in one PDF file. That was challenging as we want to make it easy for both the student and the administrator to classify the pages into the different categories. So, after uploading his ONE PDF file, he will be forward to the classify page

At the classifying page, he has to choose which document would like to index, for example, ID.

Verify the requirements

Another requirement we’d is to find a solution to save time for the program managers at verifying the required credits from the previous studies to qualify the student to study specific program. We did the solution as the following -

After classifying the transcript, he will be allowed to go to verify the requirements page. He will select the first program and see what is required On the left-hand side, he can write the course name and the number of credit that he had taken at the previous studies, and at the right-hand side, he will see his transcript. After writing the course name, he has to click on verify and mark the course name from the transcript, then confirm the snipping.


A screenshot will be taken and save. The program manager will check the input from the student and the screenshot, and he has only to confirm that what the student provided is right, instead of going manually through all the transcript and verify the courses which takes time.

Here you can check out the full Hi-fi prototype [make sure to collapse the left menu and refresh the page]:

Female, 25

Female, 24

OnBoarding Page

Has no problem to share the nationality. Better to show the reason for asking this information

Understand why asked onboarding questions

Front Page

She didn't notice the filters (Programs,Courses | Bachelor, Master)


Search results

She didn't notice the active filter at the upper part. - She didn't understand the cart - When asked to select the project management program, she clicked on the title.

My Page welcome

She clicked on the circles beside the ID document, she thought that she needs to click the circle then click on Upload

Upload page

She didn’t understand that the upload system by drag and drop

• • • • • •

Add the reason for why we’re asking for nationality and type of study at the onboarding page Change the background color for the specific information from yellow to grey as the yellow were too strong and makes them focus on that part at the beginning and we’d like them to focus on the search bar and explore section. Re-design the active filter elements in a circle rather than rectangle button as the circled shape makes attention to what is inside. Doing that solve the problem of not having attention to the active filter part. We changed the cart icon to basket as the cart gives the commercial feel. We changed the circle icon beside the required steps at my page into text (ex. Step 1: Ranking, Step 2: Documents, etc..). We did this to avoid confusion as both candidates clicked on the circle and it’s just an icon. At Uploading document: we added more description for each category as it wasn’t clear for the candidates what they’ve to upload exactly.

• • • • •

We change the drag & drop method to upload into the classic one as it’ll be hard to do that for the disabilities. Add navigation between the pages. Delete the progress bar at my pages because it’s not clear and replaced it with the current state of the application (qualified/unqualified – admitted/not admitted). At the verification process, we divided the requirements to show them under each related program. Doing that makes it clear that each program handled individually. Delete the compare icon from the search result, as the student can do quick comparing by reading the heads from each search box.

Ahmed Eleyan

Project Summary: Balancify is an application that helps the users to balance their life by getting the daily activities the user does such as working hours, doing sports, drinking and eating. Company/Client Name: Umeå University – Designing for User Experience course – Group Project Project Date: 9/2017 – 11/2017 Major Tasks & Responsibilities: Identify the key user groups, identify the key tasks, set usability goals, develop a prototype and run a usability test before iterating on the design. Platform: Android mobiles Design Tools/ UX Methods: Axure, Persona, storyboarding, Balsamiq, Adobe Photoshop for retouch and mockups.

Balancing between the work and other life criteria such as sports activities, eating, drinking and sleeping is hard to achieve these days due to the multiple factors needed to be in the balance. The Factors includes the time for each activity, the healthy consumption for food and drinks.

Design an application that helps in balance the life for the user, and it will personalize the recommendations based on his initial input data. The recommendations include what to eat when to have a break when to drink, when to do sports activities and how and finally the intelligent wake-up feature that helps in sleeping in a well time. All come with a calendar that schedules all the activities automatically.

The professor asked to design and evaluate a phone app using the "designing with blends" approach. The aim is to help the user achieve balance in their lives – personal balance.

The app/service will help users track, understand, and gain control over the target, through experiences that allow them to recalibrate some aspect of their behaviour, to improve their lives.

We started by thinking of different ideas to apply the balance idea, one of the balance ideas was in sporting activities, so it tracks only the sport, another idea is a balance in food so the application will focus only on the food fat, carbs, protein, sugar, etc.. When we spread the ideas, we decided to combine all of them in one application that helps in balancing most the activities the normal user do in his day.

3 Personas were developed with 3 different scenarios.

Lars works as a manager, he has 45 years old and lives in Umea. He is a hard worker, usually more than 8 hours and the junk food is his favourite food as it saves him time. He is travelling regularly by car and sometimes by train and his free time is very limited. His frustration points are not sleeping enough, no time to spend with family which leads to bad social life and health problems such as high pressure and body fat. His goals are to have extra spare time for family and different sports activities, eat healthily and lose weight gradually to reach the fit weight. Lars is scared of a heart attack because of the unhealthy food, and he drinks beer regularly to forget about the pressure that he usually has from work. He is responsible for a family and likes to get the newest technology stuff such as mobile & laptops

Lars wakes up at 6:30 am on Monday. Takes a quick shower and drives to work by car. He stopped at Espresso house for breakfast and bought three sandwiches and one dessert, and he eats it while he’s driving to the job. It takes about 1.5 hours to get in the job which is in the downtown. Then he has several meetings and reading papers which makes him nervous & stressed.

Then he has very limited time for lunch, so he gets some fast food from a local fastfood restaurant. After that, he goes quickly to the airport to catch a flight to Oslo for a business meeting with a client. He slept on the plane because he didn’t sleep enough time on the last night. He arrives at the business meeting at about 4 pm, and the business meeting lasts for 4 hours. After that, he goes to the airport and eats some sausages for dinner before going back to Umea. He arrives at 9 pm. There he has a brief discussion, but because he is too tired, he just drinks a beer and watches a basketball game on TV. After a third beer, he falls to sleep.

Zahra is a student; she has 23 years old and from Nordin. She does sports, study and party. Her frustration points are: doing massive work at the end of the course, failed in balancing between the studying and sports activities, eating too much/too little depends on the free time, and she drinks alcohol too much even before the important tasks. Her targets are to have good and managed time for studying, partying and sporting. Also, to have a good amount of eating, making the studying time shorter before the exam, control her alcohol drink and sleep enough before important events.

Zahra starts her day with getting up and is trying to be balanced in this day between studying, partying and sporting. She also wants to eat an ideal meal, and for this, she starts to write down, when and what she is eating. She studies the minimum from what the teachers required, but want to do more this week, so that she has to make less effort at the end of the course.

Sport is also a significant part of her life, so she writes down what she is doing, being able to schedule the balance between sport, eating, and study. She wants to be able to party at the weekend and wake up early next day, also, wants to know a better time to sleep and wake up. She would like to be able to stay healthy

Towe is a retired lady, she has 72 years old and lives in Linkรถpping Widow. She goes to church every Sunday, drinking fika in a daily base, chatting with young and old people frequently and taking care of her garden. Her frustration points are: the screen of the smartphones is tiny and include small text which makes hard to read. She forgets to take her drugs at the correct time. Drinking water is less than the required (2L). However, she drinks much fika and feels lonely from time to time. Her goals are to meet more people as she feels isolated because of her husband passed away, and her children grow up and have their responsibilities out of her town. She would like to have a good sleep and healthy balance, get fun activities and instructions for a better life for her age.

As a cardiac patient, it is important for Towe to take their drugs at the right time. Almost when she is in haste, she forgets to take the required drugs and get health problems. Considering the heart issues, she also should drink the ideal amount of water. She needs a System that reminds her to take her medicine and where she also can track their consumption of different liquids such as water and coffee.

Usually, Towe has a daily routine, an also go to sleep at fixed times and usually wake up before the alarm clock rings due to sleep disorders. However, on Sunday morning she has to wake up earlier because she helps to prepare the worship in church. She needs a system, that combined with a calendar which reminds her to sleep and wake up for special events. There are few days where Towe has nothing to do. That’s why she is sitting in her chair all day; this has a negative effect on her back complaints. In contrast, she does much more work without a break, and this affects her heart.

The metaphor consists of four inputs, three generic space and from it, we’ve generated our blend that will be a base for the application’s functions.

In our metaphor, we’ve four inputs • • • •

Balance Personal Health Personal Assistant 100m Race Meditation

Therefore, our metaphors are • • •

Balance Personal Health is Personal Assistant (Siri) Balance Personal Health is a 100m Race Balance Personal Health is Meditation

Generic Space: • • •

Time management, managing life between a personal assistant and personal balance health. Health, sports between 100-meter race and balance personal health. Feeling, Power recovery from balance personal health and meditation.

Blend help us to think of the functions that will serve our users better. The main functions are: • • • • •

• • •

Track drinking: track the amount of water, coffee, alcohol and make sure it’s within the limit. Track Eating: based on the meal, the app will measure proteins, fats, etc.. Activities: Provide an easy way to do different activities such as walking, yoga and track the process. Calendar: Will add different suggestions and recommendations to the user’s calendar to be in the balance, for example, take a break for 15 minutes after 2 hours work. Track sleeping: the app will track the user’s sleep automatically. o I went through the sensors that can use in Android devices and came up with the following idea to keep track the sleeping: If there is no light in the room for more than 20 minutes after 10 PM without any physical movement, then the sleeping recorder starts. Sleeping recorder stops when there is light + physical movement. After waking up, the app will show the user if he slept within the suggested sleeping period. Badges: an awarding system for achieving some goals such as walking 30 minutes daily for one week continuously. Security: make sure that the data secured and can be exported using only the PIN code Work – Life balance: present a graph that updates instantly when doing one of the balance factors such as doing sports activity or drinking.

The other functions can be included • •

Eating recommendation: suggest meals that help in filling the gap in specific factor such as protein. Compare the data for different factors with others’ data anonymously.

We made quick sketches for how the design will be; we’ve sketched the screens for login, signup, calendar, hamburger menu, sleeping intelligence, activities and settings. For this purpose, we’ve printed several papers that include the Android mobile screen to have the feel of mobile application when we design and make an evaluation. For pop-ups and notes, we used small sticky notes.

✓ ✓ ✓

     

After getting feedback from paper scribble’s evaluation, we start designing mockups using Balsamiq software. We’ve designed 38 interfaces and make them clickable for transferring between the different screens.

We’ve interviewed five students, semi-structured. We used this type as in this phase we have general guidelines for how the design should be like and need to ask a specific question and give a space of freedom for the users to say their opinion to consider it. Questions were like, please log in, can you describe what you see on the dashboard screen, you’re now seeing the calendar – can you see which date right now and so on.

✓ ✓ ✓ ✓

    

Axure software used for designing the hi-fi prototype, the material design rules from Google followed as the application will be for Android devices.

Interact with the prototype and enjoy balancing your life in a new way: (password:ahmed7)

We’ve interviewed three students and one old man by a structured interview. We used this type of interview to get accurate feedback as our questions were designed based on the experience we gained through the phases before. We get started by letting them know that they’re here to help us, and they should think loudly and not being shy about any comment. The interview time was 25 minutes on average, and we’ve recorded the screen for further analysis.

✓ ✓ ✓ ✓ ✓

   

Reach me out via:

+46 70 797 31 48

User Experience Portfolio - Ahmed Eleyan  

This portfolio includes 2 UX projects. The first one was for to redesign and the second one was for the final...

User Experience Portfolio - Ahmed Eleyan  

This portfolio includes 2 UX projects. The first one was for to redesign and the second one was for the final...