Witamy We Wro
Responsive Web Design
Project Overview
Project Duration
May 2024 (1 month)
The Goal
Designing a tool with all necessary information that students need in one place
The Product
Designing a tool to help new students arriving in Wroclaw for the first time to get themselves acquainted with the new city easily - Designing for social good
My Role
UX / UI designer responsible for the entire project.
My Responsibilities
Design Think Process, User research, Wireframing, Prototyping
The Problem
Many international students arrive in Wroclaw for the first time ever and they find it difficult to obtain information on various student related topics and find it difficult to find reputable information. The information is also scattered and not collated in one place making it challenging for students to get acquainted with the city Wroclaw.
Understanding the user
User Pain Points
1
Pain Point
Lack of knowledge of where to find various information
2
Pain Point
Too many sources some are not credible and may be outdated / different
3
Pain Point
Students are not well informed on some important process and procdures
User Research Summary
For this research I conducted qualitative research questionnaire and a SUS. I t was an unmoderated usability study, 5 interviewees who were all international students from different countries who are not Polish aged on average between 18 - 35.
I used the design thinking process, empathizing with the users, researching and learning their problems, needs and wants. During the phase I conducted interviews, created empathy maps and user persona.
Following on from this to analyse the findings from the user research, determining the problems, hows to solve them and why. During the defining phase, I compiled the user stories, journey map and problem statement.
The next stages followed were the ideation process, prototyping & testing identified below.
User Story
As a student, I want to utilise my student status and find out benefits where I can so that I can be able to manage my finances.
Problem statement
Aynura, is a shy student who needs to understand the student benefits she has, to find affordable stores, restaurants, and part time jobs to assist her to navigate expenses as she studies.
Hypothesis Statements
If Aynura understands her student benefits, and finds information on affordable stores, restaurants and a platform to find a part time job then she will be able to manage her finances better as she pursues her studies
Goal statement
Our responsive website will let users search and find relevant related information which will allow students in Wroclaw to find employment opportunities and understand their student benefits by providing them with an information platform that directs them to he right places to look for jobs and explanation of student related benefits. We will measure effectiveness by the user satisfaction, search & navigation, website traffic, app downloads.
User Story
As a student, I want to meet new people so that I can have a social life.
Problem statement
Adebayo, is a an extrovert student who needs information on shopping and social centers, events and boosting his social life so that he can experience the city life.
Hypothesis Statements
If Adebayo can find a sufficient source of information to support his social life then he will be able to study and have a social life.
Goal statement
Our responsive website will let users search and find relevant related information which will allow students living in Wroclaw to establish a social life by providing them with information on events and social activities. We will measure effectiveness by the user satisfaction, search & navigation, website traffic, app downloads.
User Story
As a graduate , I want to find useful information from sites / places that are reputable so that I can Successfully begin my career.
Problem statement
Freya, is a graduate in need of information who needs information on employment opportunities, working rules and regulations and a place to find cheap accommodation so that she can successfully begin her career.
Hypothesis Statements
If Freya finds the relevant information she needs about working rules and regulations, finding accommodation then she will be able to establish her well for her graduate job.
Goal statement
Our responsive website will let users search and find relevant related information which will allow graduates about to begin their careers by providing them with an information platform to allow the graduates to find relevant information to begin their careers. We will measure effectiveness by the user satisfaction, search & navigation, website traffic, app downloads.
User Story
As a new student, I want to find out as much information as I can so that I can be well informed of the crucial services necessary to my stay here and my studies here in Wroclaw..
Problem statement
Tanatswa, is an uniformed student who needs information on transportation, TRC, Pesel, medical care and information on key government buildings because she can be well informed during her studies and be able to carryout all necessary legal requirements..
Hypothesis Statements
If Tanatswa can get information relating to TRC, Pesel, medical care and key governmental buildings then she will be able to successfully complete and process her legal requirement and be able to navigate the medical health system by herself.
Goal statement
Our responsive website will let users search and find relevant related information which will allow new students arriving in Wroclaw for the first time students by providing them with an information platform to allow the students to settle into the new city and be able to navigate their way around. We will measure effectiveness by the user satisfaction, search & navigation, website traffic, app downloads..
Competitve Audit & Report
A competitive audit was done and I compiled an audit report.
Starting the design
Paper & Digital Wireframes
I started the prototyping phase where I drafted a user diagram, sitemap, user stories (big picture & closeup), paper wireframes and digital wireframes.
Low Fidelity Prototype Link:
Link
Computer
Link
Tablet
Link
Mobile
Usability Studies
After conducting the research usability study, I made an affinity map, identified patterns & themes to concluding the insights and prioritizing the insights and successfully implementing them based on the feedback. Iterations were made to the wireframes based on the insights.
- Font needed increasing to improve legibility
- Large text needs to be condensed or paragraphed to avoid clumps of text
- App icons were not visible
- Changing in app wording
- A good colour scheme is needed to support the design.
Refining the design
Mockups
High Fidelity Prototype
The mockups were created. Colour, graphics icons were added.
After implementing the insights the mockup frames were linked creating the Hi-Fi prototypes.
Low Fidelity Prototype Link:
Link
Computer
Link
Tablet
Link
Mobile
Accessibility Considerations
Ensuring UX accessibility involves designing interfaces that are usable by people with a wide range of abilities and disabilities
- Text resizing
- Contrast options
- Language translations
- Alt text
Going forward
Next Steps
After iterations were done, I finalized the design. At this point this is where I would hand over to an engineer. As this is a course project, I did not proceed o this stage.
What I learnt
I got to learn more on the SUS usability test, its calculation and analyzing the results and their meanings. I also learnt to make good use of figjam where I was able to collate all information regarding this project in one place. Great tool to have information in one place.
I am excited to keep enriching my knowledge in UX/UI design.
