Final wireframes
Role: UI/UX Designer, Interaction Design
Tools: Figma
Team: Team of 2
Context:
SFU Pet Therapy is a mobile and desktop application that helps users to connect with trained animals that encourage in elevating their moods and assisting with their health and mental problems. SFU Pet Therapy was a three-week long assignment that included researching, ideating and the creation of an application that can be used on both, a mobile and a desktop.The work in building the application was panned out in the following manner:
W1 - Research
W2 - Wireframes + process
W3 - Mockups and Final design
Week 1 - Research
The initial stage was for us to understand the purpose behind pet therapy and how we, as a team, can make an accessible app for the users wanting to book an appointment. We took a look at applications available in the market and realized that there is not much context provided for a user to allow them to book an appointment, and hence, we were able to start brainstorming the process of the layout of the application.
Through our brainstorming session, we understood we wanted to create an interactive application that allows the provision of booking an appointment to be easier, as well as provide all the information needed without overcrowding the interface.
Week 2 - Wireframes + Process
Based on our research, we created low-fidelity wireframes that accumulated our standard idea of what we want the application to look like. We followed a gray background with a complementary color-scheme, allowing the users to be able to distinguish between the icons present and the buttons that can be used. As I was responsible for building the mobile-version of the application, I focused on the aim of presenting all the kinds of therapy-trained animals available, whilst allowing the interface to not look overcrowded.
Medium-fidelity wireframes
Week 3 - Mockups and Final design
Based on the feedback and critique received after providing the wireframes, we were presented with the challenge of previewing the animals available in a different layout as it was perceived as ‘crowded’ and ‘too much information’ present. Through this feedback, I chose to perform an extensive research, to understand different ways of presenting options, and that's when I decided on a carousel layout. The layout not only solves the pain point of crowding the interface, but further allows more interaction between the user and the interface. From then on,I began to polish the workflow, ensure the layout does not have any complications, and solidify the features of the application to allow the users to make independent decisions while viewing the application.
Final wireframe prototype
The concept of using a carousel layout for the application helped improve its overall design and functionality as the user’s did not feel overwhelmed with the options provided and were further able to better understand the process of booking an appointment, without getting confused and agitated. The final wireframes are provided in the slide deck below.
Animation of designed wireframes
Reflection:
Through this assignment, I was introduced to using figma and learned how to create low-fidelity wireframes to functioning applications without the use of code. It allowed me to strengthen my skills as a designer as well as understanding the perspective of a user through successful and informative feedback.
