Weather Underground (WU) is a weather forecasting and reporting source with its weather data powered by a network of +250,000 personal weather stations. The owners of these stations have multiple devices (i.e. weather stations & webcams) associated to our network. However, our users have to navigate between separate pages to go between multiple devices and to add new devices to our network.
To create a centralized hub in which weather station and webcam owners can view all their devices in one place. This hub is also an access point in which users can also add new devices to Weather Underground’s network.
Amy Lindahl (Project Manager), Dan Fein (Senior UX Designer), Kristian Tumangan (Product Designer)
User Interviews and Outreach, Information Architecture, User App Flow, Wireframes, User Testing, and Visual Design
Invision (Prototyping & Usertesting), Sketch (Wireframes and Visual Design)
To answer our assumptions if users wanted a universal hub to allow users to better access all their connected devices and understand their. We also asked about
Array will be a tool developed as a mobile app with the integration to both mobile web browsers and other mobile apps. Not only does this app seamlessly integrate with other apps but it allows for collaboration with companies that allow for user content discovery (i.e. Flipbook, Twitter, Facebook, etc.).
Storyboarding & Information Architecture
Keeping Venessa in mind, I story boarded the user’s behavioral flow from content discovery to topical playlist creation with Array integrated in her behavioral decision making. These flows helped in defining the necessary features required for Venessa to successfully navigate through the app.
By narrowing the features necessary for Array to function through storyboarding, I then created a site map to
organize the pages, information, and navigation of the app.
A progression of key screens from low to high fidelity wireframes with annotations. These iterations were based on feedback received from user testing the low fidelity wireframes.
With defined high fidelity wireframes created based on feedback though the testing of lower fidelity wireframes,
a clickable prototype was then created to further test and gain more accurate feedback.
Goal + Methodology:
Goal: To successfully have the user navigate within the app to their own personal list, create a new list in their collection of lists, add an article to a list, to navigate easily to another user’s list in order to recommend articles , and to upvote an article on another user’s list.
Methodology: The usability test consisted of three users and a set of tasks written out to be followed by the user.
User Testing Tasks:
Task 1: Find a list that you have created and add an article to that list.
Task 2: Search & discover another list that is not your own. Recommend an article to that list.
Task 3: Again, search & discover a list that is not your own. Within the same list upvote an article that is in that list.
Task 4: Create your own new list.
User Testing Tasks Highlight
User completes the process of creating a new list, but the User in the beginning
wants to create the list without adding articles.
Kill your darlings. Sometimes one of the bravest decisions a designer can make during a project cycle is terminating a feature that seems so innovative on a design stand point, but in the end never translates to the user understanding the feature.
1. Development of an Array extension for browsers and integration in other mobile content browsing apps.
2. Design user onboarding screens to familiarize them with features within the app; option to turn on and off app feature guidance.
3. Develop analytics measurements system within the app to help inform the design refinement of Array's features that better serve users needs.