Redesign weather website - OtagoPolytechnic/Cloudy-with-a-Chance-of-LoRa GitHub Wiki
Front-End Website Re-design
Current State of the Website
The current website serves primarily as a data storage and research platform, presenting raw weather metrics and sensor readings in a structured format. While the website delivers valuable information, it is not optimized for general users, such as students and lecturers, who require a more readable and concise summary rather than an overwhelming display of detailed data. The interface presents all available data at once, which can be difficult to interpret without prior knowledge.
User Stories and Project Focus
To guide the direction of our project and ensure that we meet the needs of our users, we used specific user stories to shape our approach. These user stories helped us prioritize user-centric features and ensure the final product is intuitive and useful. Below are the key user stories that influenced the scope of our redesign:
1. Student - Quick Access to Weather Data
User Story:
As a student wanting to know the weather, I want to easily open and access the data the Polytechnic supplies so that I can quickly decide what to wear and plan my outdoor activities.
Focus:
The design of the interface should be streamlined to ensure quick, easy access to weather data without overwhelming the user. We prioritized simplifying the layout and making data instantly accessible for non-experts, focusing on visual cues and user-friendly summaries rather than raw data.
2. Researcher - Clear Air Quality Data
User Story:
As a researcher analyzing air quality, I want a clear and visually intuitive display of CO₂, dust, and humidity levels so that I can quickly assess environmental conditions without having to interpret raw numbers.
Focus:
We aimed to provide a visually intuitive display that makes complex environmental data easy to analyze and understand. By focusing on clarity and simplicity, we designed a layout that effectively supports researchers by organizing the information in a digestible format and using graphs that are easy to read.
3. Mobile User - Seamless Mobile Experience
User Story:
As a mobile user checking the weather on the go, I want a responsive, fast-loading, and easy-to-navigate interface so that I can get the information I need without unnecessary steps.
Focus:
We recognized the importance of optimizing the interface for mobile use. This led us to prioritize responsiveness, speed, and a streamlined design. The mobile version is now designed to load quickly, be easy to navigate, and deliver relevant weather information with minimal effort on the user’s part.
Conclusion
By using these user stories, we ensured that the project stayed focused on the needs of the actual users. Each story guided decisions on the interface design, data presentation, and overall functionality, helping us prioritize features that would deliver the most value and improve the user experience.
UX Design Research and Courses
-
Building Products with User-Centered Design
- This course emphasizes the importance of creating products with a user-centered design approach. It covers how to research user needs, define product goals, and iterate designs based on user feedback. Understanding users' perspectives is critical to building effective and engaging products.
-
Know Your User: Creating Personas
- Focused on persona creation, this course highlights how to identify user groups and create detailed personas that reflect real-world users. The personas serve as a foundation for making design decisions that resonate with target audiences, ensuring that the product meets user expectations.
-
Prototyping Journey: UX Foundations
- This course expands on prototyping techniques, showcasing how to refine and validate ideas through interactive prototypes. It emphasizes iterative design and how prototyping helps in user testing, ultimately guiding the development of intuitive and user-friendly interfaces.
Heuristic Evaluation
https://docs.google.com/document/d/1H-RV8FgcYxJ-0tk5_16CAPXQ-v6Lmh9Qkc9terJZSmw/edit?usp=sharing
Conclusion:
The website requires significant improvements in terms of usability, design, and error handling. Key areas for redesign include simplifying the interface, improving error messages, enhancing user control, and providing clearer navigation. By focusing on these areas, the site can provide a more user-friendly experience and accommodate a wider range of users.
Wireframing
https://github.com/OtagoPolytechnic/Cloudy-with-a-Chance-of-LoRa/issues/157
: Template work for Prototypes
Uizard - /app.uizard.io
I discovered /app.uizard.io while searching for a tool to streamline the prototyping and design process for web applications. What I found was an intuitive, collaborative platform that allows teams to work together in real-time. It’s especially useful for redesigning and repurposing web apps to meet the specific UX requirements of a project. With its easy-to-use interface and feature-rich environment, Uizard enables rapid prototyping, giving us the ability to quickly draft and iterate on new designs, making it easier to frame and implement the necessary feature improvements. It's become a valuable tool for aligning team members on design goals and quickly bringing ideas to life.
Reconstruction Of Current State
Development Of Current Wireframes
Desktop
Mobile
Redesign Prototype:
https://app.uizard.io/p/5852c437/fullscreen - Mobile
https://app.uizard.io/p/527be66b/fullscreen - Desktop