Student app

For the User Experience and Prototyping courses together with a team, we designed a mobile application.

​User-Centered Design has been a benchmark for the whole design process. The design process followed iterative steps including User Study, Research Analysis, Low-fi Design, High-fi Design, Usability Testing, Redesign. The solution was developed with the involvement of the end-user perspective in all steps.

Our target group is international students who have come to Finland to earn a degree at one of the Finnish universities. The level of prior knowledge about the country can be quite diverse. Our goal was to create an app that appeals to as large an international audience as possible and provides all necessary information in one place.

User study

​

For user study, we conducted an online survey via Google Forms among international students. We collected the results and turned them into a user profile which helped us to find the pains and gains of our potential users. I conducted an interview with a potential app user, transcribed and coded it.

Research analysis

​

After together with the team we gathered data and identified common requirements for app features into the Task Matrix table. If 2 users responded to a feature with high importance, that feature was taken into the official requirements. I wrote a section for a scenario of how a user can use one of the app features. A combined scenario was sent to users. After users' feedback, we rewrote the initial scenario.

Ideation / prototyping / testing

​

The next step was a paper prototype. I contributed to the team' paper prototype creation. After I shared our paper prototype with the user and asked to perform the tasks. According to the feedback I made corrections in the prototype. I wrote to the common document on how my user performed the task and his evaluation of our prototype. The paper prototype was tested in total with 5 people. After users’ feedback "Feedback & Help", "Forgot the password", "Chat" pages were added. Shortcuts menu is added under the app logo. The app does not require the user to login every time unless after the user signs out.

​

The high-fidelity prototype was designed in Figma. The design idea has been based on the research’s insights to make sure that the user’s needs are met.

Usability testing

​

The usability testing was conducted remotely via Lookback online platform. The usability test agenda and instructions, as well as the app prototype link, were available in Lookback. I sent the link to the user. He performed the tasks independently at his convenient time. He shared his screen, spoke out loud, and had his camera on. The recording of his actions is stored on the Lookback platform. He had some technical issues, so he had to start testing several times. On the 3rd time, he could perform and record all the tasks successfully. When I watched the recording, I could hear him, follow his facial emotions, and look at his actions on the screen. It helped me to analyze the result of usability testing. Overall, he understood the tasks and performed them as well as the application functionality allowed him. He commented on what he liked in our app and gave valuable feedback on the app failures which we used for our re-design. To calculate a successful completion rate we evaluated with a pass/fail scale if the user could perform each step of the task. It is reflected on the graph below.

Redesign

​

After usability testing we redesigned some features according to the users' feedback.

Redesign 1: Functionality is provided to open Profile by taping on the profile picture. Redesign 2: The content of the “Checklist” screens is fixed. Additionally, “Edit” button is added to each item to enable user to edit the item. Redesign 3: “Done” button Is added to checklist feature. The user can save the action after marking to the item in checklist. Confirmation message is shown up when the user saves the action.

Redesign 4: Links were added to the Transportation-section that will redirect the user to their corresponding places. Redesign 5: Added screens to search with key words and type a message. If found, the key words are highlighted.

Redesign 6: Links were added to the Accommodation page that will redirect the user to their corresponding places. Additional redesign: • To reduce the amount of clicks the user can access chats by clicking “Chat with students” from the Menu screen. • On the Profile screen we added a drop-down menu “More” where the user can send feedback, access “Help & Support” and Log out. • Links were added to the General Tips-section that will redirect the user to their cor-responding places. • Links were added to the Jobs-section that will redirect the user to their correspond-ing places. Redesign 7: Redirecting screen is added to ask users for their confirmation of switching to the links. (Redesign after receiving feedback from teachers and classmates in the final presentation)

Description of a prototype objective

Personalization in the design is expressed through some features as follows. The app has a personal greeting message when the user enters the app again (Loading screen). The user can customize their profile information and profile picture (Profile screen).

​

The security of the user’s privacy is a focused aspect of this design. For example, the password of the user is hidden by dots unless the user wants to see it semantically and turn off the hidden feature.

The design has a clear hierarchy for the features on the home screen. The most important features are placed in the middle of the screen in an important hierarchy order. The most needed place such as the home screen, profile and notifications are placed on the navigation bar where the user can access with just one click.

​

Effectiveness was put into account during the design process. The user is not further than “one click away from the function they want to use” (as an example Home screen). In the low-fi prototype phase, the design took more clicks for the user to navigate to the needed function. After taking the feedback, the design has been changed to make it faster and easier to navigate through every function of the application.

​

Minimalism is the goal of this design’s UI. With good use of negative space, the design is expected to be as simple as possible not to make a user think when using, but still have all the functions that the user needs.

The design idea is to provide the user with as much adjustability as possible. Users were put in control of the content of some features. For example, users can customize their checklist with their content (Checklist screen 2-4). The app can provide users with more specified content based on their location.

​

The design was also applied to the user experience principle about error prevention. The design alerts the user before taking any actions that may cause the information to be lost. For example, when the user deletes an item from the checklist or marks a checklist’s item as finished, a confirmation message shows up (Checklist screen 4).

These screens are designed by me.

​

On the "Chat" screen (Chats' screen) a user can send a message to other students privately or in the group chat. From the navigation bar, the user can access the Home screen with menu, Profile or check received notifications. There is a search icon at the top-right corner that the user can type text into and all the results appear on the screen (Chat search screen).

The design also has applied color theory in choosing the most suitable primary color. The target user of this design is a student. Blue color and its variations, which intentionally are used to create a feeling of reliability to make a user feel trusted when using the app. A lighter variation of blue color is expected to create more enjoyment and relaxation when using the application.