TOPSPOT
Roles
Service design
User Experience Designer
User Interface Designer
Content creator
Low-code development
Tools & Knowledge
Figma
UX/UI practices
HTML
CSS
WordPress
Introduction
Top-Spot is a cutting-edge mobile application designed to flexworkers, professionals, and companies discover the perfect place to study or work in Amsterdam. With an extensive database of work spots, we offer a comprehensive overview of available locations throughout the city. Whether you’re in search of a quiet corner to focus on your assignments or a collaborative space for productive meetings, Top-Spot has got you covered.
Top-Spot is not just about listing places; we’re here to help you find the perfect spot tailored to your needs. Our app provides detailed information about the characteristics of each location. Want a spot with ample natural light, free Wi-Fi, or a serene atmosphere? Top-Spot will help you discover the spots that align with your requirements.
The Opportunity
The COVID-19 pandemic has reshaped the way we work, making remote work more possible and prevalent than ever before. Companies and employees alike have discovered the advantages of flexible work arrangements, leading to a reduction in occupancy within traditional office buildings.
As working from home gains traction, we find a unique opportunity to bridge the gap between available workspace and the increasing demand for flexible, convenient work environments. This is where TopSpot steps in.
Figuring out the touchpoints online and offline
Creating TopSpot was an exciting endeavor, and I faced several challenges throughout the process.
One of the primary hurdles I needed to overcome was understanding and optimizing the user journey for our app. I recognized that for TopSpot to be truly valuable, I had to ensure that every step, from the initial discovery of workspaces to the seamless booking process, would be intuitive and efficient for our users.
Through careful research, user feedback, and continuous testing, I dedicated significant efforts to perfecting the user experience, making it as user-friendly as possible.
My commitment to crafting a well-defined user journey was instrumental in bringing TopSpot to life as a trusted and indispensable tool for professionals and companies seeking flexible workspace solutions
Defining different Fases
Building the TopSpot app in phases involves a strategic approach to gradually develop and enhance its functionalities while ensuring usability and scalability. Here’s a breakdown of how we approached this
Onboarding companies
At TopSpot, we’re focused on turning underused spaces in buildings into thriving hubs for freelancers and businesses. Recognizing the vital role companies with available space play in this mission, we’ve developed a streamlined onboarding process tailored specifically for them. Our goal is to make it easy for these companies to list and manage their spaces on our platform, unlocking new opportunities while contributing to our shared space community’s growth. This is how we get them on our platform. We also collaborated with Facilitylinq.
UX/UI designs
These are the most important screen designs of Top-spot. For a full experience you can use the prototype!
Technology
The biggest question was how can the app show students the occupation of buildings. For this we needed to do technology research. A harris profile made the choice. To show students how busy a place is the app will get it’s information from People Count sensors (see video). These are sensors that count how many people enter and leave a room.
We also designed a back-end database. This database makes sure the studentes can use all the functions and see all the information the app uses.
Feel free to ask me more information about the technology we use!
Concept
The information from the students helped sketch different solutions. The sketch results you see here are the ones that made it to the final stage and are implemented in the app.
– Menu
– Maps
– Filters
– Information about the location
– List off al the locations
– Rankings en reviews
Research/problem validation
During the proces I asked students some important questions. You can find them here. If you would like to see the results send me a message!
The results helped my gather information about the things that makes a spot a good place to study, but most important it validated the problem: students have trouble finding the right place to study (in Amsterdam). This helped me with the beginning of the concept
Rapid sketching
I chose to incorporate rapid sketching into my UX/UI design process to streamline the ideation and early concept development stages. Rapid sketching allowed me to quickly generate and explore multiple design ideas and user interface layouts, helping me to uncover potential issues and opportunities early on. This approach not only saved time but also fostered creativity by encouraging experimentation without the constraints of digital tools. Ultimately, rapid sketching in the TopSpot project was a valuable technique for generating innovative and user-centered design solutions efficiently.
Designing the app in High-Fidelity
Creating high-fidelity mockups was a pivotal step in my app development journey. I made them to:
1. Visualize the User Experience: High-fidelity mockups allowed me to see how the app would look and feel, ensuring user-friendliness and aesthetics.
2. Facilitate Feedback: They enabled better communication with stakeholders and served as a reference point for design discussions and feedback collection.
3. Test Interactions: I used them to test user interactions and refine the app’s flow for a seamless user experience.
Challenges:
1. Design Consistency: I had to ensure a consistent design across different screens and elements.
2. Iterative Process: Balancing perfection with time constraints during multiple iterations was a challenge.
3. Integration of Features: Incorporating all intended features seamlessly required thoughtful consideration.
4. Compatibility: Ensuring compatibility across various devices and screen sizes added complexity, necessitating responsive design principles.
In summary, high-fidelity mockups played a crucial role in shaping the user-friendly and visually appealing app, despite the challenges encountered along the way.
Lessons learned
Creating and developing TopSpot has been an enlightening journey, particularly in the areas of user journey, UX (User Experience), and UI (User Interface) design. Here are some key lessons learned during this process:
User-Centric Focus: Prioritizing user needs and feedback is vital for a user-friendly app.
Simplicity: A clear and intuitive interface is key; simplicity improves navigation.
Consistency: Maintaining design coherence across the app enhances the user journey.
Iterative Design: Perfection is a process; iterative design refines the user experience.
Accessibility: Ensure the app is accessible to all users, including those with disabilities.
Cross-Platform Consistency: Provide a consistent experience across different devices.
User Feedback: User input is invaluable; regularly incorporate feedback for improvement.
Usability Testing: Regular testing with actual users identifies and resolves issues.
Adaptability: Be open to adapting the app to meet evolving user expectations.
Effective Collaboration: A collaborative team of designers, developers, and stakeholders is crucial for success.
These lessons guide us to deliver a user-friendly, adaptable, and continually improving experience for our users.