(Visual and UX Designer)
Enactus SFU
Young leaders everywhere use innovation and business skills to ensure that all people thrive in a sustainable world.
Introduction
(Context)
Enactus is a network of leaders committed to using business as a catalyst for positive social and environmental impact. With an active member base across multiple concentrations and faculties, Enactus SFU continues to grow and expand its sustainable projects into the community each year. They help students develop new innovative and entrepreneurial skills, while empowering them to take initiative and become the future leaders that our communities need. Due to the global pandemic, Enactus became less active at SFU. After 3 years, an ambitious team sought to revitalize this club and bring it back to it's status pre covid-19.
(Goal)
As Co-director of Media and Design at Enactus SFU, I was tasked to re-establish the club branding to ensure that the design remains consistent for future years. While performing this task, I aimed to highlight a refreshing and clean branding that invites people into the lively atmosphere of Enactus SFU.
Understanding the Problem Space
(Problem)
The current Float House website usability and accessibility issues make it difficult for a first time user to navigate and properly digest the information they need to understand the company's services.
Process
(Heuristic Evaluation)
To familiarize ourselves with the Float House website, the team did a heuristic evaluation for a first time user. We outlined a series of tasks and goals for each member to accomplish for an overview of the entire website and listed out pain-points along the way.
(Heuristic Tasks)
(Key Findings)
As we finished all the set tasks, we found 4 major issues while using the website.
(Heuristic Recommendations)
Based off these high-severity issues we came across, we determined 3 main heuristic recommendations that would improve the usability of the website.
(Think-Aloud Testing)
To validate our findings, we conducted 7 think aloud test for the original float house website so that we could gain a better understanding of the users thoughts while navigating the website. During the test, participants were asked to explore the services offered as well as the booking and cancellation process to gain more insights on the first-timer user flow.
(Synthesizing the data)
After gathering the data, we identified issues during the User-Testing along with quotes and observations from the think-alouds in an affinity map to identify common themes where the site could improve.
Main Themes/Issues:
Main Themes/Issues:
(Think-Aloud Insights)
From these interviews, we were able to both re-affirm the data we gained from our own heuristic evaluation and also discover new issues that would lead us to these 4 main insights:
Prototyping
(User Flow)
By narrowing down our insights, The purpose of the first-timer button on the current site is to get first-timer users to sign the waiver and book a session. However, this does not align with how first-timers typically interact with sites. So, we decided to change the user flow of this process so it would align with our research.
1. Consolidating information to the services page
Before users decide to book, they look at the service and want to see what it offers.
2. Task for the first time users are completed after they book
The difference between a first-timer and an existing user is that first-timers need to sign a waiver form.
1. Consolidating information to the services page
Before users decide to book, they look at the service and want to see what it offers.
2. Task for the first time users are completed after they book
The difference between a first-timer and an existing user is that first-timers need to sign a waiver form.
(Wireframing)
Once the user flow was properly mapped out, we created low fidelity wireframes, keeping in mind the branding of Float House.
(Breakdown of the Prototype)
Once the user flow For the prototype, we prioritized on improving the navigation to the account details, making detailed information consolidated and accessible on the service pages, and simplified the booking process.
This is achieved by enhancing the contrast of the buttons and text to ensure easy reading. We also reformatted and adjusted the copy of pages that were deemed too long or required lots of scrolling.
This is achieved by enhancing the contrast of the buttons and text to ensure easy reading. We also reformatted and adjusted the copy of pages that were deemed too long or required lots of scrolling.
Before:
After:
Conclusion
(User Testing Results)
After conducting another think-aloud test for the prototype with a new user group, we gathered our data and synthesized again our key takeaways for this new version. From this feedback, we found that users liked our layout of the information and felt well-informed while looking through the services page. Users also found the booking and cancellation processes were straightforward and easy to understand.
(Reflection and Things to Work on)
What I learned:
Effective user-testing From this project, I learned the importance of ensuring user-testing is well organized and prepared before going into these sessions. By having pre-test questions, post-test questions, and specific tasks outlined, it provided an easier experience for the user to speak freely with their concerns while additionally avoiding confusion. Moreover, I gained the experience of A/B testing and I definitely now understand how effective it can be to test and compare different website versions,After conducting another think-aloud test for the prototype with a new user group, we gathered our data and synthesized again our key takeaways for this new version. From this feedback, we found that users liked our layout of the information and felt well-informed while looking through the services page. Users also found the booking and cancellation processes were straightforward and easy to understand.
Things to work on:
While the FAQ page in the services tab allowed users to feel more informed, it also made the users looking at this page wonder if they have already read the questions before. Thus it could use more refining. Another thing that could be improved is the usage of pictures. The first-time users who tested the prototype expressed want for more pictures to help them understand the establishment and services better.
Effective user-testing From this project, I learned the importance of ensuring user-testing is well organized and prepared before going into these sessions. By having pre-test questions, post-test questions, and specific tasks outlined, it provided an easier experience for the user to speak freely with their concerns while additionally avoiding confusion. Moreover, I gained the experience of A/B testing and I definitely now understand how effective it can be to test and compare different website versions,After conducting another think-aloud test for the prototype with a new user group, we gathered our data and synthesized again our key takeaways for this new version. From this feedback, we found that users liked our layout of the information and felt well-informed while looking through the services page. Users also found the booking and cancellation processes were straightforward and easy to understand.
Things to work on:
While the FAQ page in the services tab allowed users to feel more informed, it also made the users looking at this page wonder if they have already read the questions before. Thus it could use more refining. Another thing that could be improved is the usage of pictures. The first-time users who tested the prototype expressed want for more pictures to help them understand the establishment and services better.
(Next Project)
CaseIt 2022
