Concept One
A Social Media Management Widget
Research
There were no social media widgets currently available, so research was conducted into tools such as web applications and smartphone apps. Overall, they were relatively complex and most allowed the user to perform a variety of tasks.
The Social Scheduler was designed with digital marketers in mind. The concept is a slimmed down version of common social media managers. It aims to allow users to post across multiple accounts, quickly and effectively, without the need to open full apps or websites.
The feedback received was that the widget was too “app like”. Since the Social Scheduler has already eliminated most of the functionality of regular social media managers, it was back to the drawing board.
Concept Two
Productivity Widget
Research
Stay Focused
Helps the user stay focused on work by restricting the amount of time allowed on time-wasting websites. Once the allotted time has been used up, the blocked sites are inaccessible for the rest of the day.
Strict Workflow
Enforces a work-flow ratio selected by the user. The default setting is 25 minutes of distraction-free work, followed by 5 minutes of break.
Website Blocker
Blocks problem websites during a specified time of day or night.
I Am Studying
Blocks problem websites and requires the user to answer a question in order to unlock. Includes analytics of browsing habits.
Although powerful for their purpose, the existing market of productivity extensions are visually inadequate. Some also have too many options to navigate when simply wanting to block a problem website.
Sketches
With the purpose of creating a greater user experience, the proposed solution aims to reduce the number of clicks needed and time taken to block a problem website. The URL of the website the user is currently viewing will be pre-loaded into the widget text field. This will allow the user to block the website with one click of the ‘Block’ button. Visual design will be greatly enhanced in an effort to supersede market competitors.
Wire Frames
When the user opens the Dashboard, the widget displays the URL for the website tab in focus. With one click, the problem website is blocked. The ‘Block’ button then changes to an ‘Unblock’ button.
All blocked websites appear on the settings page. The user can use this page to delete or add new sites. Scroll bar is visible once there are more than four blocked sites.
Scroll bar is visible once there are more than four blocked sites.
Application
A modern color palette was chosen and applied using flat design. The typeface, Ubuntu, was selected for its legibility and clarity on screen and mobile devices.
Feedback
Flat design doesn’t have enough depth to work with the OS X Dashboard. The widget needs to inherit the characteristics of existing widgets. Branding should be more refined and the widget’s name ‘InFocus’ should be revised to give more meaning.
First Iteration
The tab the user is viewing in their browser is loaded into the widget. While is provides instant recognition of the site to be blocked, it makes the widget appear too cluttered.
Second Iteration
Icons for ‘Block’ and ‘Unblock’ replaced the browser screenshots. This solution and color scheme was more visually appealing. Users block websites because they don’t have the self-control not to visit them. It is too easy for a user to unblock a site with this solution.
Third Iteration
This iteration introduced the idea of blocking the problem websites for a set period of time. The user enters the amount of time in the first screen, then clicks ‘Block’. The timer then counts down the minutes until the website can be used again. There was not enough information for the user to know how to use this widget.
Fourth Iteration
Instructions and feedback were added in this iteration. The user now has a clearer idea of how to use the widget. The boxes where the user inputs the time were designed to look similar to the website input box. In doing so, the design became inconsistent with the countdown screen.
Settings
The settings page was redesigned to match the fourth iteration styling. The user can add extra sites to be blocked but they cannot delete websites as in much earlier iterations.
This is to ensure the widget meets its purpose:
to block time-wasting sites. The remaining block time is displayed for the selected list item.
High Fidelity Prototype
Blocking a Website
When the user opens the Dashboard and views the widget for the first time, it displays the last viewed browser tab. By default, the block time is set as 60 minutes. The user can either adjust this or click ‘Block’.
Countdown Begins
Once the user clicks ‘Block’, the countdown timer begins. The website can not be unblocked until the time is up. This enforcement is necessary in order for the widget to achieve the goal of increased productivity.
Access Denied
If the user attempts to visit the blocked website, they will be presented with a countdown screen. The screen will display the time remaining until the website is unblocked.
