EXERCISE 1: DETERMINING STRATEGIC VALUE

The product I'll be using for this exercise is the newly launched Groups feature in the Skillshare app. As a TA I've had the opportunity to beta test the feature before it was announced to the general public. I've listed several business opportunities for Skillshare Groups in no particular order.

Next I rated each business opportunity on a scale of 1-5 in two categories: importance and feasibility. I've made an educated guess in terms of the feasibility, as I'm not actually involved with the Skillshare developers.

Exercises + Final Project - image 1 - student project

Using the formula below, I determined my limits:

middle score (3) x number of opportunities (9) = points available (27)

This means I have 27 points available to "spend". But when I add up the importance ratings (25 points) and feasibility ratings (34 points), I don't have enough points to spend on all of the listed opportunities. So let's plot the results and see which ones are worth the effort, shall we?

Exercises + Final Project - image 2 - student project

In my opinion, the two most important opportunities are adding images to comments and seeing which topics have new unread comments. They're relatively low effort to build, but very important to grow the Groups feature. Skillshare is a very visual medium, with lots of people wanting to show off their work or ask for feedback. Adding images to comments would go a long way to increase engagement. Seeing which topics have new comments encourages people to come back and follow up. Currently there is no way to tell if there are new posts other than remembering the time stamps.

Flagging inappropriate comments, follow topics for new comments and edit/delete comments or topics are some other features that should be strongly considered for future versions.

As you can see I don't have any opportunities that fall into the very low end of the spectrum. This is probably because I only listed the opportunities I genuinely thought were interesting to invest in to begin with.

EXERCISE 2: PRODUCT EVOLUTION PLAN

The fictional product I'll be using for this exercise is a mobile app for buying gift cards. There will be 3 major releases for this app, each one delivering increased value to both the users and the business.

Obviously the most important feature of this app is the ability to actually buy the gift cards, so that feature should be included in release 1. But there are a lot more components/opportunities to consider for future releases. I listed all of my ideas and rated the level of value on a scale of 1 to 3 (the latter being the most valuable).

Exercises + Final Project - image 3 - student project

Next I grouped the components into staged offerings to meaningfully increase the product's value with each release. The total points for release increases with each stage and doesn't exceed the maximum of 12 points total that I was allowed to spend across all 3 releases.

Exercises + Final Project - image 4 - student project

EXERCISE 3: INFORMATION ARCHITECTURE

For this exercise I'm assuming I have both an online and a printed hard copy of a newspaper. I'm looking for information on the trial of South African athlete Oscar Pistorius, who is being accused of murdering his girlfriend. The process of finding this information is different for each version of the newspaper:

Online

In case of a significant update, I'm expecting to find news about it on the home page of the newspaper site. So I use my mouse to scroll down and quickly scan the home page.
When I don't find anything, I go to the search bar, type 'Pistorius' and hit enter on my keyboard.
I expect the most recent/relevant results to be at the top of the page. I look at the titles and click the relevant article to read the latest update on the trial.

Hard copy

In case of a significant update, I'm expecting to find news about it on the front page of the newspaper. So I fold open the newspaper and quickly scan the front page.
When I don't find anything, I'm filling through the newspaper to find the sports section. Pistorius is an athlete so it makes sense that news about his trial could be in the sports section.
I realize that it's not really sports related since it is about a murder trial, so when I don't find anything I move on to find news from other places in the world (Africa).
Once again I scan the articles to find the one I'm looking for and read the latest update on the trial.

The online version allowed me to find the information much more easily because all of the articles are indexed and I can quickly find them simply by using keywords. If I had used the search function straight away, I could have even saved myself an extra step, but I always like to take a quick glance at the homepage before I do anything else. In the case of a hard copy newspaper, I didn't know where the article would be located so I had a more difficult time finding it.

Hard copy newspapers lack an index system to quickly and easily find information. This could be improved upon by including some sort of alphabetized keyword index in the back. I could then find the P and locate the section and/or page number of the article on Pistorius.

Another major difference between the two version is the way the information is organized. The hard copy is very hierarchical. Each section of the newspaper contains a certain number of articles. There are no references between articles, nor is there any archive of previous articles on the same subject matter. The online version is much more fluid and allows users to easily navigate to past and related articles. But it can also overwhelm the user when there's too much information in one place. At least with a physical newspaper, there's only so many pages that will fit.

Lastly, there is the way we browse through the paper. For the online version I'm using my mouse and keyboard (or the touch screen of my tablet or phone), whereas a printed hard copy doesn't require any such devices; I only need my hands.

EXERCISE 4: LABELING AND NAVIGATION

The website I'll be using for this exercise is eBay. Since they offer products in almost any category imaginable, I figured the navigation would be complex enough to analyze.

Exercises + Final Project - image 5 - student project

These are the main navigation items:

Exercises + Final Project - image 6 - student project

In general, I think the categories are labeled quite well. There's very little overlap between the navigation items. Perhaps Collectibles and Art could be separate categories, but even if they're not, it's clear what I will find here. I feel like Deals is kind of out of place and could be moved to the left side of the navigation, along with Home and Following, or even be removed completely and simply feature deals on the home page.

For most items it's easy to remember and predict where items are in the navigation. If I'm looking for a vacuum cleaner, I know it should be under Home & Garden. If I hover over that item I see Housekeeping & Organisation. I should be able to find a vacuum cleaner there (and in fact I did.)

Exercises + Final Project - image 7 - student project

But if I was looking for pet or baby related items, I'm not sure I would have clicked on Home & Garden to find them. Then again, I can't really think of a better label to use for these items either.

eBay uses breadcrumbs, so I always know where I am in the page hierarchy.

Exercises + Final Project - image 8 - student project

The page titles don't always match the navigation labels. When I clicked Housekeeping & Organisation, I apparently navigated to a page called Household & Cleaning supplies. They both roughly mean the same thing, but I think it would be better if they used the same text for both.

On a side note, I actually rarely use the main navigation on eBay at all. I generally jump straight to the search field to find what I'm looking for and use the filter options if needed.

EXERCISE 5: UI AUDIT

Maryland MVA (http://www.mva.maryland.gov/)
Exercises + Final Project - image 9 - student project

Perspective and behavior of intended users

The website belongs to the Maryland department of transportation and focuses on Motor Vehicle Administration (MVA). Users come here to register vehicles, renew licenses, schedule appointments and look up information. The website caters to all of these needs. There's a top activities section providing quick links to the most sought after information/forms, and users can drill down using the navigation menu to find what they're looking for. There's also a search bar, but it's more focused on finding services and agencies than it is about searching within the MVA website. Below the 'fold' there's a dropdown menu 'how do I?' with some other quick links.

Images and icons

The images and icons look like something out of the nineties, back when I experimented with Word art and Comic Sans. They're of poor quality and very outdated. Which I guess in a way makes them appropriate because that's how I view the government most of the time.

Visual grouping

Different parts of the website are separated by vertical 1 pixel bars. It's fairly clear what belongs together, although it could be presented more elegantly.

Information presentation

The information seems to be presented in a somewhat random order. I would think announcements would be closer to the top of the page. The slider is currently way too prominent and irrelevant to be demanding all of the user's attention. They did place the most important call to action ('start here') near the top left.

Colors

The website uses a neutral color base (white, grey, black) with a decent amount of contrast, but then completely messes up with the use of accent colors. They didn't choose just one or two, but there is blue, green, yellow and red fighting for my attention. I don't know which is more important and so my eye darts across the screen not really seeing anything at all.

Fonts

The MVA website uses a lot of different fonts and font styles. Unfortunately not all of them are easy to read. The font of the site utilities bar is quite small, and so is the capitalized text in the header image.

The body text of the website has a heavier font weight than the headings, and so the information hierarchy is a little lost here.

There's also poor contrast between the red text and the blue header. Frankly it's hurting my eyes just to look at it.

The images in the slider ('breaking news') use fonts that are completely different from the rest of the website. Even worse, every slide looks like it came from a different corner of the internet. They look more like gigantic ads than a container of useful information.

Geico Insurance (https://www.geico.com/)

Exercises + Final Project - image 10 - student project

Perspective and behavior of intended users

The website belongs to GEICO, an insurance company for anything such as cars, boats, homes, life- and travel insurance. Users come here to access their policy, report incidents, view claims and ask for quotes. The site's mascot takes up the most space on the screen, with the request a quote module coming second. There are also some quick links on the bottom of the screen and a login window to quickly access your policy. The site doesn't rely for the user to scroll on the page to read the content. Only a very small portion (the footer) is below the fold on my screen.

Images and icons

Overall the images and icons look cohesive and modern, perhaps even a little bit playful with the big green gecko. It leaves the impression that the site and GEICO's services are easy to use.

Visual grouping

The visual grouping is very clear due to the amount of white space that is used between groups. The sections are also clearly separated with various colored backgrounds.

Information presentation

The website loses a lot of valuable 'screen real estate' to the gecko. One could argue that this space could be better used. But I think it actually helps the user focus on what is most important: getting an insurance quote. If this space was filled with other links it would divide the user's attention.

Another clever part of the design is the login module. When you click the text field to enter your User ID, Email or Policy Number, the fields actually expand, asking you for your password etc. That way it only takes up room on the screen when it's actually being used.

Colors

The colors reinforce the hierarchy of information. The blue color from the header is reused in the icons and calls to action. It is used most heavily in the quote module and more sparingly in the login window. Color use is functional more than it is decorative. All of the colors from the gecko image are reused throughout the site's design, giving it a cohesive look.

Fonts

GEICO only uses a single font on their homepage (Lato), but uses various sizes and weights. The font is easy to read, not too big or too small. Headings are larger than the body text and hyperlinks are clearly underlined.

AARP (http://www.aarp.org/)

Exercises + Final Project - image 11 - student project

Perspective and behavior of intended users

Perhaps it is due to the fact I'm not an American, but even after scrolling down the homepage, I have no idea what AARP is. The layout looks like it is a news site, but the slogan 'real possibilities' doesn't really make sense in that context.

It was only after consulting the About page that I realized AARP is a social welfare organisation for people ages 50 and up. AARP users are probably curious about what they could do for them, so I would expect more of a focus on their membership and their recent accomplishments rather than what seems like generic news. I don't think it matches very well with the intended behavior of their users.

Images and icons

All of the news articles have images associated with them. They make the content easier to scan and visually more interesting. Some of the images do look a lot like they came from a stock photo website. The site barely uses any icons, which I think makes sense given the fact that their target users are over 50. They're not as familiar with the conventions on the web as younger people are.

Visual grouping

It's very clear which information belongs together. Not only are sections separated by big titles, but they also use thick horizontal lines to separate content.

Information presentation

As I mentioned before, I think the way the information is presented is all wrong. There is a too heavy focus on the general news and their HUGE footer isn't helping either. I think they just put the entire sitemap in their footer, which hardly seems like the place for it. There should be a bigger focus on membership and its benefits.

There are a few very prominent ads on the homepage, which I think is risky with elderly users. They generally have a much harder time recognizing the difference between advertisements and actual content. The fact that the ads sometimes use the same color scheme doesn't help with that either.

Colors

Red is the most dominant color of the website, with yellow as a secondary color. It is most heavily used in the navigation bar, but can also be seen throughout the website's headers, hyperlinks and buttons. In some occasions the red color use does seem more decorative than functional. Some titles are in red, while others are not. There doesn't really seem to be a good reason for this difference.

Fonts

AARP only uses one font, but heavily varies the weight and size. The font is very easy to read. The headlines are big and there's plenty of spacing between letters and lines. The font use reinforces the content hierarchy. Section titles are largest, article titles second with content coming in third.

FINAL PROJECT: UX EVALUTION

For my UX evalution project I chose Trello (www.trello.com). For those unfamiliar with it, Trello lets you organize your projects in boards, lists and cards. You can easily collaborate online with others, and simply put, get more done.

Exercises + Final Project - image 12 - student project

(image by Melanie Pinola)

I'm an avid list maker and I love the feeling of completing to do items. A succesful experience with Trello should therefore make me feel like I have a complete overview of everything that I need/want to do, that I'm in control of my planning, that I've made progress throughout the day and got things done in the end.
This definition of success does not really change for me. But there are times when progress is more important than completion, especially when I'm working on a mammoth sized project.
Something Trello does really well is that it allows you to create a 'card' with just a title ("do laundry"), or make it more complex (e.g. adding a description, labels, comments, checklists, due date, attachments and members) depending on my needs. When I need to feel like I'm making progress, I break up large tasks into smaller subtasks that I organize in checklists. I've actually put this into practice when I started this Skillshare class.
Not applicable.
There are several reasons why I continue to use Trello vs. a competing product. First, for a free product, you get a lot of functionality. Trello doesn't impose any limits on the number of boards, lists, members or attachments you can have (only Power-Ups). You can attach files of up to 10 MB, which is usually large enough for me anyway. Second, it's a very visual way of organizing your tasks. You can actually drag cards (tasks) around to different lists and use images as covers. I'll often create a Done list on my board where I drag all the cards that I've completed. I then archive the cards in the Done list by the end of the day. It's a powerful and elegant user interface that I love to interact with. Last but not least, it works everywhere. Whether I'm on my desktop, phone or tablet, I can always access my boards. When I come across something interesting, my Trello extension for Chrome allows me to quickly make a card out of it. When I'm surfing on my phone, I simply click share to Trello to put it on the board. It gives me peace of mind knowing I'm not forgetting anything that needs to get done.
Before I started using Trello, I would use iDoneThis to keep track of my work tasks. The site might work for very simple to do lists, but did very little to facilitate organization or collaboration. At home I tried using Todoist and Wunderlist (free versions), but I found myself creating endless lists without actually getting anything done. I still use Wunderlist to 'collaborate' on my grocery shopping list, but that's basically it. I much prefer the easy to use platform and clean aesthetic over other apps or sites.
There are only a few minor pet peeves I have with Trello. One of them is that the option to repeat cards is not included by default. Trello solves this by offering it as a Power-Up (add-on), but the number of simultaneous add-ons you can have in the free version is limited, so it sucks that I have to use it for something that should have been included as a main feature. Another minor issue is that Trello doesn't display label names on the card, only the label colors. If you remember the colors by heart, I guess this could work, but since there are only limited colors, you could end up with multiple labels of the same color. I've solved this by installing the Stylish extension for Chrome that makes some minor visual changes to the way my board looks, including the labels. Overall I'm still very happy with Trello and see myself using it for a very long time.

Exercises + Final Project - image 13 - student project

(Stylish extension for Chrome)

Esther Van der Drift

Fashion & Beauty Illustrator

117

40