Værklar

An idea was born

The idea for "Værklar" came about during our very first group meeting. As we gathered to discuss potential project ideas, we noticed that each of us was dressed quite differently. Some were prepared for rain, others for sunshine, and a few were dressed for the chilly Norwegian wind. This difference in our outfits, despite having access to the same weather forecast, started a conversation about the challenges of accurately interpreting weather conditions and dressing appropriately. We thought that many people face this daily struggle and decided to create a solution that would help users choose the right clothing based on real-time weather data.

‍

First we adopted a scrumban approach, combining scrum and kanban methodologies to leverage visual task management and structured sprint planning. This hybrid approach facilitated a flexible yet organized workflow, allowing team members to contribute across different roles and tasks effectively.

We divided our development into two-week sprints. At the beginning of each sprint, we held planning meetings to assign tasks based on our progress and upcoming goals. GitHub’s project board helped us track task progress, categorized into “to do,” “in progress,” and “done.”

‍

‍Gathering data, wireframing and prototyping:

After compiling our lists, we categorized and sorted the features based on their desirability. To ensure our app would meet users' needs and expectations, we also sent out a survey to gather input from potential users. We chose a survey because it allowed us to reach a large audience with minimal resources, and since our target group was primarily younger people, we were able to easily share the survey in a popular Facebook group for UiO students. This survey asked respondents to rate the importance of various features and provide feedback on their own needs and preferences. Combining our internal brainstorming with external feedback allowed us to prioritize the most wanted features while aligning them with user expectations. This also confirmed a need for many of the features and the app in general.

Using pen and paper and Figma, we created multiple wireframes to explore different design possibilities. Each team member contributed their unique ideas, resulting in a variety of concepts. One produced the first wireframe, setting the foundation for our design discussions. My low-fidelity prototype included a weather summary with detailed tiles for daily and weekly forecasts. And a last one focused on the visual representation of the avatar and weather conditions, ensuring the avatar remained gender-neutral to be inclusive for all users.

After reviewing and discussing each wireframe, we decided to merge the best elements from all designs. We kept the main avatar concept, aiming to create a friendly and gender-neutral figure that could represent clothing suggestions effectively. To gather further input, we walked around the hallway of IFI, explaining the concept and asking people which combination of wireframe elements they thought worked best. Most explained that if they were to use a weather app it should somehow associate them with the other popular weather apps like YR.

‍

‍

‍

‍Implementation and MVP:

The app was programmed in Kotlin, enabling integration between the frontend and backend components. Frontend development involved using Jetpack Compose to build a modular and reusable UI. The tile system was a central part of our design, allowing users to see weather information in a concise, customizable format. Each tile displayed different weather-related data, ensuring that users had all the necessary information.

For the backend, we integrated several APIs to fetch real-time weather data. Normalizing and interpreting this data to provide accurate clothing recommendations was a significant challenge, but we built a robust system to handle it efficiently.

‍

Testing and Iteration:

User testing ensured key functionalities were covered by tests by the end of the project. During the testing phase, we invited around 8 people for a think-aloud test, where they navigated the app while sharing their first impressions. Afterward, we asked them to complete specific tasks and answer targeted questions. We rotated between two testers, with one conducting the test when the user was known to the other, ensuring unbiased feedback. This setup allowed us to gather a little bit of a wider range of insights efficiently.

During testing, two main pain points emerged: users didn't realize they could click on a specific tile to get the clothing recommendation for a particular time or day, and many struggled to interpret the avatar. To address these issues, we implemented clearer visual cues and instructions to guide users through the app more intuitively.

Additionally, we discovered that some users found the interface confusing. To address this, we introduced an onboarding process and redesigned the layout to be more intuitive. We valued universal design, ensuring the app was accessible and easy to use for everyone, regardless of their technological background. Lastly, we added a feature where clicking on the avatar would bring up a popup with both the avatar and a textual description of what to wear, making it easier for users to follow the clothing recommendations.

‍

‍

My biggest takeaway:

My biggest takeaway from this project was just how critical user testing is. Our group was initially very happy with the product we developed, and we got tunnel visioned into thinking it was super user-friendly. But when we started user testing, we quickly realized it wasn't as intuitive as we thought. The feedback from these tests were super important and showed us exactly where we needed to improve. By iterating on the design based on user feedback, we were able to make the app much more accessible. This experience taught me that no matter how confident you are in your design, user testing is essential to truly understand how people will interact with your product.

‍

‍

‍