Design Graduate

On Site/ Off Campus
2020
On Site Off/Campus is a mobile application, designed as a group project in the 2nd year of our degree during our module, human interaction design. This involved a myriad of user tests, information architecture , user flows, wireframes, low and high fidelity prototyping. This project was a group assignment of 4 and we shared each aspect evenly throughout.
%20(1).png)
For our project, we decided to make an interactive app regarding accommodation. Our initial idea was that this app would be a contact book as such, a place to contact landlords in different areas surrounding the University
​We began by creating a mood board for inspiration on the direction we wished to take and brand ideas we enjoyed from similar applications.
.png)
.png)
Flow Chart
We then created a basic flowchart detailing the most important aspects of our design and its functionalities and how we initially would like for the concept to flow
Paper Prototype
After evaluating our user flows, we then moved onto our ideation, taking into consideration our flow charts and example applications that we drew inspiration from.
The paper prototypes also allowed for us to conduct early stage user testing in order to move forward with any edits we felt necessary depending on the users interaction.
.png)
.png)
.png)
User Journey
We conducted user tests on our medium fidelity prototype and created a user journey map in order to identify any pain points or gain points the user may experience whilst completing certain tasks
Heuristic Evaluation
​We then developed a heuristic evaluation to have an adequate understanding of the data collected and to have an in-depth evaluation on the users experience
.png)
.png)
.png)
User Journey
We conducted user tests on our medium fidelity prototype and created a user journey map in order to identify any pain points or gain points the user may experience whilst completing certain tasks
Annotated Wireframes
This moved us forward with our design to creating a detailed, annotated wireframe to view how our application would function between pages.
.png)
Site Flow
With this information as just a small picture of our work, we then moved onto the development of our site flow and high fidelity prototype
.png)
High Fidelity Prototype



-1.png)
-4.png)
-6.png)