What We Did
The project aimed to create a mobile app for Buff Portal to improve student accessibility. We identified the challenge of using Buff Portal on mobile browsers and proposed a dedicated app to alleviate these issues. We conducted comprehensive research, including surveys, interviews, and contextual inquiries with CU Boulder students and Buff Portal team members. Our team developed personas, scenarios, sketches, and three prototype iterations (low, mid, and high fidelity) for the Buff Portal app. While focusing on key features like the home screen, profile menu, classes, and advising due to time constraints, we recognized the need for further refinement based on user testing feedback. The project emphasized iterative design processes and provided insights into the development of an official university Buff Portal app. Our whole process was documented through a Design Journal which can be find by clicking the button below.
Motivation
The three of us have all been using Buff Portal since it came out and we all prefer to use it on a web browser on our computers. Whenever we have tried to use the buff portal on our mobile browsers, it has never worked very well, is more challenging, and causes more frustrations than it should be.
When taking a first glance at the buff portal website, it feels like it is mobile app-ready. Since an app does not exist, people would expect it to at least work well on a mobile browser, but it does not. When new students come to the campus for their first time and are trying to learn everything for their first semester, having to run everything off of a desktop or laptop web browser rather than a cell phone can be a challenge.
Every semester, during the first week of class, everyone can tell who the freshmen are because they are always looking at their phones, following Google/Apple Maps, and constantly checking Buff Portal on their phones, and getting a “Stale Request”.
Having a Buff Portal mobile app would allow students to have easier access to Buff Portal. By this, students would be able to check their grades more easily, book advising appointments, pay campus bills, get notifications about upcoming classes and events, and even have widgets to be able to access stuff without even needing to open the app.
Technology is already a major part of everyone's lives and pretty much everything has an app now. The campus has become more and more mobile-centric. We need the “B-Cycle” app to be able to rent bikes. There is also the “Get Mobile'' app that allows students to be able to use their meal swipes from their phones.
We also have a lot of apps that are based on websites that every student uses, for school and not for school. Canvas (https://canvas.colorado.edu/) is one example of that where how the web version of Canvas is built would not work very well on a mobile browser, however, there is the mobile app that is optimized for mobile devices so students can track their progress in their classes and receive notifications about grades and assignments. Instagram (https://www.instagram.com/) is another example of this where there is a website for Instagram that is optimized for a web browser, while the Instagram app is very clearly optimized for mobile devices.
Overview
Research Methods
Key Takeaways from Research
Meeting with Buff Portal Team
Personas
Timeline
We used Three different research methods to conduct our research
-
Contextual Inquiry
-
Surveys
-
Interviews
Through this research we found our key takeaways to be
-
Buff portal was originally going to be designed as an app, however, with covid, it was transitioned into a website
-
Most students that we interviewed and that took our survey would like an app for buff portal due to the amount of problems students encounter on the mobile version of the website
-
People find the structure and UI of the mobile website hard to navigate and unnecessarily confusing.
When we met with the Buff Portal team we learned a lot into what goes into Buff Portal and how the structure was built. We also learned about why an app hasn't already been built and reasons why they haven't moved towards making one.
-
Buff Portal was originally made to replace MyCuInfo and was meant to be a portal for easy access to everything online that students would need over the course of their time at CU.
-
Buff Portal was meant to be an app originally, however, the Covid Pandemic changed how people accessed online University Services and it was transitioned to be Web-based only.
-
A big goal with Buff Portal was it was designed to also be very accessible for students with disabilities.
-
App development has not been a thought for the Buff Portal development team due to many factors. One being the need to almost double the team size to be able to support Android and IOS versions of the app. Another reason is legal issues with app stores and protecting privacy of students downloading the app through FERPA.
-
When changing Buff Portal, the development team really looks at what feedback has been provided and they update the website every 2 weeks.
We made three personas from our research that also guided us throughout the rest of the project.
-
Billy Buffalo
-
Ralph Chiptopher
-
Alyssa
These Personas can be viewed by clicking the button below.
We created a few timelines to keep us on track with the project and the class schedule. Since the course doesn't have any due dates to keep us on track, we created some timelines to keep us on on track for the showcase. These timelines can be seen by clicking the button below.
Prototyping
Flow Diagram
We made a flow diagram as a way to see all of the possible ways someone could navigate the app and get from page to page
Initial Sketches & Wireframe
We made sketches that turned into wireframes that would be the beginning prototype for how the app would look and feel to do initial testing. This way people would feel like they could give more feedback since the design was in early stages.
Refinied Prototype
We made a refined prototype that looked a lot more complete and in the final stages of prototyping. This final prototype is our final deliverable and what we are presenting today. It has also been sent to the Buff Portal development team.
Next Steps
Moving forward, additional steps would involve refining the high-fidelity prototype based on the feedback gathered from user testing. Incorporating user insights would be crucial in further enhancing the app's usability and addressing any identified pain points. Additionally, with more time and resources, expanding the prototype's scope to encompass a broader range of Buff Portal functions beyond the selected few—such as integrating student advisory portals or health portals—would be a priority. Conducting more extensive user testing with diverse user groups, including both undergraduate and graduate students, could provide a more comprehensive understanding of user needs and preferences.
Future Advice
For future INFO seniors undertaking this class, emphasizing effective communication from the project's outset is crucial. Establishing clear expectations, roles, and responsibilities among team members helps streamline workflow and avoids misunderstandings. Utilize project management tools or platforms to track progress, deadlines, and tasks to ensure alignment and accountability within the team. Flexibility and adaptability are key; remain open to adjusting project scopes or timelines as needed to accommodate unforeseen challenges. Lastly, prioritize user feedback and iterative design processes, as they are fundamental in crafting user-centric solutions.
These reflections and insights provide a foundation for future INFO seniors to approach their projects with a structured yet adaptable mindset, fostering effective team dynamics and project execution.