Week 3 Tasks

Sunday 8th October – Week 3 Tasks

  • In agreement with your tutor, choose a UI design pattern category and conduct research into as broad a range of approaches to the pattern as possible. Collate a number of examples, ideally at least 10, that demonstrate the varying ways the pattern can be constructed and applied. You should take into account design principles such as ‘affordance’ and ‘flow’ while remembering that you are comparing function and form rather than visual styling or art direction. Write a concise reflective journal entry that reflects upon and summarises your findings, suggested word count 500 – 1000.


Dashboards, 10 examples of functional/task-based design

1: Sales (1)

This is a user dashboard monitoring statistical information to do with sales, user visits, and tasks. You can see current tasks which help the user be reminded off what they need to do and make sure they get done. A calendar that also effectively helps you to plan for the upcoming days. As well an overview of the user’s account with visual steps showing what’s coming next. You can see this dashboard is purely based on the tasks and the functionality of monitoring sales and viewing reports. Including projects and invoices as seen in the navigation bar.

2: Sales (2)

Based on the designer of this dashboard, this is a Sales Management platform.  The goal of this platform is to manage and motivate the sales team in an effective way. Revenue graphs are being presented with the option to see the sales of the current week and the week before. Top products are being shown which is important information, the orders, the calls, and the deals. All in all, this is a great sales dashboard that delivers functionality.

3: Meetings Dashboard

A dashboard dedicated to scheduling meetings and managing them. You can also track what meetings you have today and the upcoming days. It’s also great to see statistics such as the number of meetings you have. Notice how each meeting has it’s own title as well, so in case you forget what the meeting is about, you will be able to remember through the title.

4: Stocks

Straight up next is a stocks based dashboard. Users can view and manage their own portfolios, see the latest prices of the stocks they purchased and how their prices have fluctuated through the visual presentation of data and graphs. You can also see the popular stocks and the less popular. Simple yet functional design and the tasks are aimed at purchasing and selling stocks.

5: Social

A community and a social activity based dashboard/UI concept. This design/system allows you to see upcoming events and explore them as well. You can message and communicate with other users. Stored photos and videos can also be accessed to. In other words, the functionality and tasks of this design are dedicated for social purposes and events. Overall, great concept.

6: Schedule

The minimalistic approach to being able to manage your time effectively and thoroughly. You can even set workouts and exercises, as well as set meals and programs. Including communication via messages. This dashboard concept has clearly been made with the intention of dieting or changing your lifestyle to something better than what it currently is.

7: Plans Meals

If you are having trouble planning and setting appropriate meals for your dietary needs, then this is a great solution. The goal of this dashboard is to allow you to task yourself with exercises, meals, and track your overall performance to see how well you’re doing.

8: Fitness Club Management

Not only fitness classes should be fun, but also their internal management. With busy class schedules and a wide variety of instructors, the administration is always a big deal. The redesign challenge was to make manager life easier. A calendar is provided so that managers can have an easy and rapid access to instructor schedule.

9: Health

A dashboard system dedicated to health and body management. You are able to track your weight, age, height, BMI, pulse rate, and blood pressure. You are also able to take a look data visualization of your weight loss statistically and see how well you are performing.

10: Fitness

A personal calendar app for young business professionals, specifically tailored towards personal use without any distraction from work.

Whether it’s a fitness or relationship achievement, the app is designed to leverage AI technology in the backend to better understand and track your life events for constant improvements.


It is important to consider and realize how the design and the construction of an interface would affect the functionality and the importance of the tasks that the users need to perform, so it matches their needs and what they actually want to do. The dashboard systems above are aesthetically pleasing, but what about the user flow and the execution in terms of functionality? does it actually perform well? is it supporting what the users actually need to do? does it work?

The interfaces above are in different categories. In other words, there are dashboards designed for the purpose of Fitness, while other dashboards have been designed for other purposes such as Food Planning, Time Management, Meetings, Business Sales, and much more.

Different categories mean you are designing for different users, different users have different needs.  The target audience is the keyword here, depending on who you are designing for, that will automatically affect how the functionality and the tasks your system needs to execute. Therefore affecting affordance and flow.

What is affordance? “Affordances provide strong clues to the operations of things. Knobs are for turning. Slots are for inserting things into. Balls are for throwing or bouncing. When affordances are taken advantage of, the user knows what to do just by looking: no picture, no label or instruction needed.” – Don Norman

As you can see, affordance is being able to work something without any guidance.

Meanwhile, flow means guiding the viewer through visual movements.  Lines, shapes, color, depth, and hierarchy can all be used to guide the viewer from one point to the next – at a glance. Visual movement is more commonly known as ‘flow’.

Combining affordance and flow together when constructing an interface is one of the keys to designing something functional that matches the tasks that users need to complete. It is crucial to recognize these principles, otherwise what you are trying to accomplish will not be accomplished.

It is also important to make elements that offer functionality have more visual weight than the rest. If that function isn’t seen as easy as other elements, then that makes it pointless and obstructs the objectives of the interface.

Here’s a good example:

Notice how the “+” button isn’t that easy to see and has a less ranking in the visual hierarchy. Including the “view” button as highlighted in the image below. “View” is necessary to the viewers, so they can view their classes or tasks that they have set. It’s barely visible and that really does obstructs the interface from its objectives.

However, other than those two issues that I have mentioned, the general affordance and flow of this system is great and I know where to look.


The concepts of the dashboard systems and designs above are aesthetically pleasing to me and I like them. As a Designer myself I am fond of them and how they work. They are up to modern visual design standards and even more. They deliver the necessary functionalities, they have small flows here and there, but that is just my opinion and is a matter of speculation.

In the design world, there is no right and wrong answer, you may come up with a solution that is not ONLY that one solution to the problem that you are trying to solve. This applies to all specializations in the industry. Branding Design, UI Design, Interaction Design, and all other professions in the design field. There could 500 solutions to a problem, it’s a matter of research, iteration, and discovery.

I find myself to revise something over, over, and over again till I feel it works. Iteration is part of the process of building a successful product, as well as perfecting it.

My Own Approach

This is a simple and a clean dashboard design with a minimalistic approach applying modern and visual design standards. This is a concept designed for users who sell online products and want an efficient way to monitor the performance of their products in the market.

I laid out 3 data-based design charts with a clock switch that goes around the circle to give a value of the sales, revenue, and profit. Upon clicking “read more” users would be able to obtain a lot more details of these categories.

What was I thinking when I designed this concept? I was simply thinking outside the box. It is very common for designers and developers to visualize data with simple bar charts and graphs, and that isn’t challenging and is rather becoming a mediocre and a generic piece of design. My target was to think of delivering a unique user experience with high standards of aesthetics.

With new designs comes new experiences, and only with testing, testing, and testing we can find out if the experience is positive rather than negative.

Read More button animationhttps://drive.google.com/file/d/1-HMtb0l4HMTKOxhxvHGfOLAdT1hb_k_l/view

The animation above is the transition that takes place when a user wants to read more information about the category they clicked on. While this is all purely experimentation and an exploration relevant to the task, I also think of it as a personal exploration to develop and practice my design skills further.

I think most UI/UX designers who stick to traditional and the general principles of design limit themselves to be creative, and that is one of the main disadvantages of the so-called design rules that have been constructed in the design world. It’s very important to allow yourself to explore, test, and re-itterate to make your creations even better and unique compared to what’s existing.


Cox, P., Cox, P. and Cox, P. (2018). Visual Movement – Flow in Web Design. [online] Codrops. Available at: https://tympanus.net/codrops/2011/01/14/visual-movement-flow/ [Accessed 6 Oct. 2018].

Hiemstra, M. (2018). Affordance: Effective Use of This Principle on Landing Pages. [online] Unbounce. Available at: https://unbounce.com/design/affordance-design-principle-landing-pages/ [Accessed 7 Oct. 2018].

Lifewire. (2018). Visual Design Flow: Layout and Artwork that Conveys Motion. [online] Available at: https://www.lifewire.com/flow-in-design-3470061 [Accessed 8 Oct. 2018].

Bradley, S. (2018). Does Your Design Flow? – Vanseo Design. [online] Vanseo Design. Available at: https://vanseodesign.com/web-design/does-your-design-flow/ [Accessed 8 Oct. 2018].

The Interaction Design Foundation. (2018). What are Affordances?. [online] Available at: https://www.interaction-design.org/literature/topics/affordances [Accessed 8 Oct. 2018].