Application Design I Task 3 & Final Task: Lo-Fi Prototype & Hi-Fi Prototype

19/10/2023 - 8/12/2023
Edwin Choo Quan Rong / 0348305 / Bachelor of Design (Hons) In Creative Media
DST 60504 / Application Design I
Task 3 & Final Task: Low Fidelity and High Fidelity Prototypes

---

INSTRUCTIONS

---

Task 3: Low Fidelity Prototype

This task is the process of creating the proposed app re-design from Task 1 Proposal, while utilizing user experience data gathered from Task 2: UI/UX Design Document to develop the low-fidelity wireframes of the re-designed application.

Firstly, I began referencing various design choices from multiple different sources as well as conducting research into layout ideas. After considering considering the aesthetic and layout of the app, I decided on a color palette, typeface and iconography choice. 

As for layout consideration, it was constructed based on the Organized Information Architecture after conducting user testing survey from Task 2. However the details were altered and changed to fit the final iteration of the lo-fi prototype. 

Fig 1.0 - Chosen Color Palette

As it is a weather app, having blue colors with different shades would be on theme with a light red color to contrast the blue shade, which can also represent a ladybug in WeatherBug. 

Fig 1.1 -Chosen font: Roboto

I chose this font due to its san-serif design being simple and easy to read. The font is non-distracting which is good for users to quickly and smoothly check details in the app with ease.

---

Wireframes in Figma

Here is the Lo-Fi Prototype Figma Link for viewing. Best recommended to be viewed on PC.

One error I noticed was the phone size screen not fitting for other people's phones when conducting user testing as the frame size I used followed Android Large 360x800. Thus, a documentation below to showcase the prototype while explaining its features.

Fig 1.2 - Home Screen Layout (MVP)

The development of the wireframes started with the main MVP of the app: to showcase the current weather condition, temperature, location, and date in one compact setting. This was the planned layout in the end, showcasing the key weather info as well as some important details such as UV Index, stating when it is a good time to go out despite it being sunny without clouds. 

A scrollable view is located to browse through hours, weather condition as well as temperature in a compact manner. 

Fig 1.3 - Pin Forecast Option

As an additional option outside of the original app as well as the information architecture, I added a pin option as I believe it would be useful for people who are checking a specific day's weather condition. People who plan outdoor sports can use this feature to keep track of important dates such as hiking on weekends, another use-case is for outdoor event organizers to keep track of the weather to avoid rainy days. It is designed for general usage as well for any reason of pinning key dates. 

Fig 1.4 - Weather Alert Option

This is supposed to act as a "pop-up" that happens randomly, but in Figma, I applied the interaction on the cloud symbol in the home menu to trigger the Weather Alert scenario. When this screen comes, users are prevented to do any action other than being redirected to view the weather alert notice.

Fig 1.5 - Weather Alert Notice

After closing the big alert, a small one that remains on the top of the home screen section is displayed to remind the user about the weather condition. Users can dismiss it, however error prevention is used in the form of a "Are you sure?" pop-up to provide options of re-considering. The dismiss button and "I understand" button to close the alert window is purposefully greyed out and positioned to make it harder to find so that users won't get rid of it too easily. 

Fig 1.6 - Calendar Forecast Feature

This was an idea developed from the user testing done in Task 2: UI/UX Design Document, where an interviewee mentioned the use of using calendars to browse dates instead of scrolling a long list of one. The calendar feature has selected and hover status (dark blue = selected, light blue = hovered), and users can search the location they want for weather status on that area as well. The pin feature can be used here to pinpoint specific days and location to check their weather condition in the home menu.

Fig 1.7 - Map Features (Zoom + Pinpoint Location)

In the map, users have two ways of accessing locations of areas of interest. One is to search it up which re-directs the map to their location, while the other is to pinpoint it. After pinpointing a location, users can check the current weather condition in that area. Only key information is displayed which includes: 1) Weather condition, 2) Temperature, and 3) Current Time

Fig 1.8 - Map Features (Weather Layers)

Clicking the weather layer button will lead users to the chosen weather layer, in this case the precipitation layer. The user can scroll to check multiple locations of the map while the color code of the map is displayed down below to present info on a scale. However, due to the feedback from user testing in Task 2, colorblind users find it difficult to read the data on a color scale accurately.

To address this issue, users can click on a specific spot on the map which will apply a pop-up that indicates the definitive percentage of the precipitation in the layer.

Fig 1.9 - Weather Widgets

In the settings menu, users can apply a compact version of the weather app onto their home screen in the form of a widget. This feature is inspired from the user testing during Task 2 where participants would rather reduce the time needed to check specific weather when they can just pin it to their phone. 

Fig 2.0 - Unit change

A temperature unit change is added into the settings section to accommodate to user preferences. 

---

User Testing on Lo-Fi Wireframes

The user testing was conducted on 5 participants that tested the Figma lo-fi prototype. 

Participant 1

"Is the settings screen complete? looks empty. could add language option or smtg idk
"the 3 bars for the side menu also don't serve a function rn"

"could have languages, maybe metric system or imperial system for the other weather factors"

"or font sizes as well for like poor eyesight etc"
"setting for 24hr clock or 12hr clock can also be added"

Participant 2

Fig A - Participant 2 User Testing Feedback (Lo-Fi)

Additional comments:

"in weather layers, the font is kinda thin? maybe it's because im in desktop view for a mobile app but maybe can be bolded"
"i like the icon design tho, consistent"
"add location features?"

Participant 3

"The app is easy to use and understand. The use of icons is clear and doesn't give any sort of confusion. The pin date feature is interesting and useful, especially when it comes to plan event and activity planning. I think it would be cool to add a planner feature along with it since it goes along well. The calendar feature needs some work done since there were no indication on today's date.

The icons, functions, and overall use of it is easy to understand. There are some improvements that could be done however to perfect the app even further."

Participant 4

"u shud put the "hurricane warning" under the warning sign tho then only ppl press the warning sign to get more details abt it cuz itd make ppl panic for unknown reason having that thing suddenly pop up on the screen as a warning"

"Warning sign kinda blends in w the bg, maybe make it a solid then lower the opacity abit, drop shadow could be an option tho idk how itd look"

"The icons part under the “Today” in home page; to make it more obvious maybe at that specific time of the day that one icon could be in inverted colour so ppl would immediately kno the upcoming weather"

"Settings shud have more features too maybe for language and location, etc so widgets option could be under that since its not the priority"

"maybe culd add a notif setting as well"

Participant 5

"design looks consistent overall"
"menu bar is not messed up"

Summary of user testing feedback:

The feedback for the weather app suggests some enhancements for the settings screen, like adding language options, weather unit preferences, font size adjustments, and clock format settings. The overall user-friendly interface of the app is praised, especially the clear icons and the handy pin date feature. However, there are suggestions for improving the calendar display. Some recommendations include moving the "hurricane warning" under the warning sign to prevent panic and making adjustments to the warning sign's appearance for better visibility. It's also proposed to use inverted colors for specific icons to indicate upcoming weather. Students also suggest expanding settings to include language, location, and notification options. The app's consistent design and well-organized menu bar receive positive comments.

---

Final Task:

Here is the Hi-Fi Prototype Figma Link for viewing. 

Based on the user feedback from lo-fi prototype, font size, color, alignment and sequence are adjusted to better suit usability functions.

Updates on Hi-Fi prototype:

Fig 2.1 - Map Search and Locate feature

The map now properly displays the searched location as well as a "locate current spot" feature to pinpoint exactly where the user currently is. 

Fig 2.2 & 2.3 - Alert Pop-Up Feature Amendments

The pop-up now displays as intended by darkening the visibility of the background to enhance the focus on the main alert feature. Users also cannot interact with any other button including menu buttons until they got rid of the pop-up, which by then they would have been notified about the weather condition.

Fig 2.4 - Weather Layers Feature

As per previous user testing feedback, the font size and arrangement were adjusted for better viewing.

---

User Testing on Hi-Fi Wireframes

The user testing was conducted on 5 participants that tested the Figma Hi-fi prototype. 

Participant 1

"the design is good, love the warning about the huricane. instruction is clear. only that 1 part where the calander date, where u press 26th and it was suppose to show the information about it, but when i click, it does appear but the screen wont go down to let me know it appears. overall app is clean, smooth easy to understand. no complications."

Participant 2

Fig B & C - Participant 2 User Testing Feedback (Hi-Fi)

Participant 3

"I had a nice experience using the app! The visual design is appealing and cohesive throughout the prototype. The feature where you can pin a certain date for the weather prediction is useful as well for event and activity planning. I think it would be cool to add a planner function along with it since it goes along the the pin idea. Although I admit that it was a little confusing what the functions were supposed to be, it'd be nice of the pinned weather prediction can be separated from today's weather prediction to lessen the confusion. The calendar was confusing as well as there were no indication on today's date. Aside from that, I liked the feature in the maps section where you can pinpoint a location to check the weather at that area, a very useful feature! Overall, the app is visually appealing and easy to navigate through!"

Participant 4

"i think having a feature under settings where u could change ur location n itll auto set the langiuage for u would be cool, n have a settings for notiications etc"

"for the location thing maybe when they change location the farenheit n celcius thing could adjust according to the location the user pick"

"i like the design of the sunset sunrise feature but would be cool if as the icons move, that rectangle bg thing could fade into diff colours according to the time so ex sunset would be vermillion colour n night could be indigo"

Participant 5

"menu bar is a bit fked Cuz i didnt know there was going to be the menu on the bottom for every page"

"there is no obvious go back option when u click on the feature" 

Summary of user testing feedback:

The feedback from users indicates positive impressions of the app's design, particularly praising its visual appeal and cohesiveness. Users appreciate the usefulness of the pinning feature for weather predictions but express concerns about the calendar's functionality and suggest clearer distinctions between pinned and current weather predictions to reduce confusion. Some propose the addition of a planner function and improvements to highlight today's date. Practical features, like an auto-language setting based on location and location-based adjustments for temperature units, are recommended. Users also suggest enhancing the sunset and sunrise feature by incorporating color changes corresponding to different times of the day. Criticisms include issues with the menu bar layout and the absence of an apparent "go back" option within certain features. Overall, users find the app clean, smooth, and easy to understand.