Summary
Hotspot App is a Progressive Web App (PWA) built with React, Express and SCSS to transform the annual job fair experience at Karlstad University. With over 8,000 students and 130 companies participating a 5.5-hour event, traditional maps and fragmented information were inefficient. I co-developed a digital solution that consolidates essential details into one intuitive platform, helping students find suitable employers. This case study details my journey through the design, development, and testing, highlighting problem-solving challenges, and lessons learned.
Background
Hotspot is an organization that hosts Sweden's largest annual job fair at Karlstad University. Founded by students in 1998, the event has consistently attracted over 130 companies and sees more than 8000 student visitors each year.
As Hotspot grew in popularity, they were faced with new challenges: Students found it difficult to navigate the event, struggling with confusing maps and a lack of company information they had to look up themselves. Companies voiced concerns about their booth visibility, as those farther from the event's center received less attention. The Hotspot team faced increasing logistical strain, from handling event planning to addressing unauthorized acces by non-university students.
To summarize, we see clear problems from three sides:
| Hotspot | Students | Companies |
|---|---|---|
| Resource-intensive logistics | Confusing navigation with printed maps | Booths in less visible areas recieved fewer visitors |
| Unauthorized students attending | Lack of company information | Struggled to attract the right students |
To address these concerns, Hotspot needed an innovative matchmaking solution that could bridge the gap between students and companies. They invited Karlstad University web dev students to design and develop a digital solution for the event.
In 2023, I joined the Hotspot project team during my studies, leading planning and development with a team of three: two developers and one designer.
Objectives
The Hotspot app aims to solve the challenges faced by students, companies, and the Hotspot team:
- Match students with suitable companies.
- Ensure companies receive recognition, regardless of booth placement.
- Provide a smooth, intuitive event navigation system.
- Reduce logistical strain on the Hotspot team.
Understanding User Needs
Before development began, we focused on understanding the problem itself, what students were looking for, what companies had to offer, and how we could bridge the gap effectively. Rather than conducting formal studies, we relied on firsthand experience and available data to identify pain points and inform our technical decisions.
Challenges
- Limited event duration (5.5 hours)
- Existing solutions were confusing and inefficient.
- A lot of students navigated the event at random.
Event Offerings
To understand the range of opportunities available for students, we consolidated what companies offered:
| Industries | Roles |
|---|---|
| Economics and law | Employment |
| Healthcare and social work | Trainee |
| Engineering | Extra job |
| IT | Thesis work |
| Teacher training | Summer job |
| Music, dance and culture | Internship |
| Social sciences and humanities | Membership |
Addtionally, we looked at other data points such as:
- Company locations
- Additional information companies provided
- Booth location at the event
These points shaped the core functionality of the Hotspot app, to directly address the root problems and help students find the right companies.
Design and Development Process
The app's development incorprated some Agile elements, planned by me to ensure timely delivery with the intended features and a polished end product.
Planning
During planning phase, we evaluated frameworks, divided tasks, and distinguished between 'core' vs 'ideal' features.
Core Feature: Essential functionality for achieving the app’s goals, backed by reasoning and careful consideration.
Ideal Feature: Desirable functionality that enhances the app but isn't strictly necessary.
Project Management Tools
Notion– Used for tracking progress, meetings, and app development. Also used for documentation for future Hotspot devs.Podio– Used for management by the rest of Hotspot team (see how utilized this under Development section below).
Technology Considerations
We experimented with various technologies, including Capacitor with Ionic and Expo for React Native (for native-like features on mobile), but ultimately landed on React for the frontend and Express for the backend.
Our decision was based on:
- Ease of use – Developer-friendly framework.
- Learning curve – Minimal learning curve for quicker development.
- Maintainability – Easily maintainable for future developers.
- Modularity – Modular and expandable, having both scalabilty and flexibility in mind.
- Device support – Consistent performance and predictable behavior across iOS, Android, and other devices.
- Resource usage – Efficient in battery, bandwidth, and overall performance.
Design
The visual design was created by our UI/UX designer through brainstorming workshops with the dev team. The user interface revised and prototyped with the Hotspot team before landing on the final design.
Final revisions of the app design proposed by our designer.
Development
We held several workshops with our designer to finalize the design and ensure it was achievable in code. We used Github for version control, and set up standardized procedures for naming, documentation, and code practices.
Tech Stack
React- For frontend. Chosen for its flexibility and future-proofing of the app. We were already familiar with React so it was easier to get started.Express- For backend and server side of things. Managing data retrieval from external sources (like Podio), caching images, and serving data to the frontend.Podio API- We integrated Podio into our backend server for easy access to company data to be displayed in the app, while still maintaining the same workflow for other team members when updating this data.JSON- Used as a local database to consolidate data from different sources into one accessible format, generated at build time by the backend, with scheduled updates to receive the latest data.SCSS- For easier development and maintainance of design code in the future, enabling us to implement our own design system which we used across the entire app.
Challenges Faced
- JavaScript Stability: The dynamic nature of JavaScript led to unexpected bugs. We had to explicitly set data types and closely trace the data lifecycle to resolve these issues.
- File Access: We encountered difficulties accessing backend files (images) from the frontend during JSON updates.
Testing
We set an initial deadline for the app to reach a state ready for testing. Early tests within the Hotspot team revealed several issues:
- UX Problems: Some team members experienced unresponsive interactivity and navigation issues. Particularly with search and filtering functionality on iOS devices.
- Crashes: For some team members, the "Favorites" pages caused a complete app crash, which was a critical red flag.
We took note of all the bugs encountered and told the team to write "mini bug reports" that included:
- The device and browser used.
- Steps to reproduce the bug.
- Screenshots and additional context.
With a 1-week window to fix these issues, we managed to address minor bugs immediately and conducted further investigations on more significant problems—particularly a persistent issue with company logos not displaying on the frontend.
Launch
After resolving most of the bugs, we launched the app on schedule. With assistance from an IT consultant, we deployed the app on our university servers. The marketing team then had approximately 1 week to promote the app and attract users.
Note: We had plans to set up usage statistics trackers for further user research but didn't have time to implement this feature.
Key Features and Functionality
The Hotspot app is packed with features designed to streamline the job fair experience for both students and companies.
Quick and Easy Access
The app is PWA and engineered for immediate use. Its responsive and efficient design ensures that students can quickly open the app and access event information without delay, a crucial benefit during the fast-paced 5.5-hour job fair. Launch it from any browser on various operating systems or save it to your homepage for quicker access.
Onboarding and Recommendations
Upon launching the app, students are guided through an onboarding process that helps them get started quickly. This process not only introduces key features but also offers tailored recommendations, ensuring that students are directed toward companies that match their interests from the outset.
Information at a Glance
The app presents company information in a concise, glanceable format. Key details such as company name, description, tags, and an option to favorite allow students to quickly determine which companies align with their interests. This is especially important during the event, where students have only 5.5 hours to navigate through 130 company booths. Given that interactions at each booth can last anywhere from 15 minutes to 1 hour, quick access to essential details is critical.
Ability to Favorite Companies
Students can save companies in a Favorites list and view them at any time. The Favorites list has the same advanced searching and filtering options as the main page, and the student can search, sort and filter as they like within this list. The student then can click on the card to reveal more information about the company.
This is helpful when students want to do research about the companies prior to the main event day.
Advanced Search, Sort and Filtering Options
To further enhance usability, the app provides advanced options for searching, sorting, and filtering company listings. Students have the option to; filter by industy and/or role, sort in alphabetical, reverse-alphabetical or recommended order, or search specific keywords. These tools empower students to tailor their exploration based on specific criteria, ensuring they can quickly identify opportunities that best fit their career interests.
Results
While we didn’t conduct a formal empirical study, and the marketing team had limited time to attract a large user base, the early anecdotal feedback has been overwhelmingly positive.
Despite the limited data, both students and team members have found the app incredibly useful. The seamless UX and glanceable company details made navigating the event much easier. The app’s advanced search and filtering features was particularly helpful in quickly finding the companies students were looking for, regardless of booth placement.
On a personal note, I found the app so effective and intuitive that I kept coming back to it. Its seamless functionality truly underscored the purpose it was designed to serve.
Room for Future Enhancements
While the feedback was positive and there was no stability issues, we faced a major problem with updating images in the frontend. Due to limited time for testing and marketing, the app couldn't reach a large enough user base. This is the first iteration, and there will be more future updates. These experiences have provided valuable insights for me and future vision of Hotspot.
Conclusion
The Hotspot app streamlines the annual job fair at Karlstad University by connecting students with companies and reducing logistical burdens. Despite limited marketing and a small user base, early feedback confirmed its effectiveness. I found the app compelling and continued using it during the event.
Developed from scratch, the project showcased
Developed from scratch using an agile approach, the project showcased careful planning, strategic technology choices, and close collaboration between us developers and the team members. This process not only met immediate needs but also laid the groundwork for future enhancements.
In summary, the Hotspot app stands as a successful example of how targeted digital innovation can transform traditional events, delivering meaningful improvements for students, companies, and event organizers alike.
Parting Words
This project has been more than just a technical challenge, it’s been a journey of learning, problem-solving, and personal growth. Building the Hotspot app allowed me to dive deep into real-world issues and explore how digital solutions can make a tangible difference, even within the tight constraints of an annual event. I hope this case study offers you a window into my thought process and the creative decisions that guided this project.
Thank you for joining me on this journey. I look forward to future challenges and opportunities, hope our paths cross again in the world of tech. Until then, happy coding!