Design Critique: DailyArt (iOS App)

DailyArt is a free educational app that publishes one-piece work of fine art info everyday for its users. Besides getting inspired by reading the art masterpieces’ stories every day, as for its users, they could also explore the digital collection of more than 2500 masterpieces in DailyArt. With its informative contents, DailyArt is widely favored by many art lovers.

This Design critique will mainly focus on DailyArt’s App usability for iOS devices.

After downloading

The initial interface after launching the DailyArt app is the language selection. DailyArt serves up to sixteen different languages (FIG.1). When selecting the language, the original form of each language acts as a user-friendly signifier that even affords people from non-English speaking areas to better access the App at the very start.

Once selected the language, users will be directed to the main interface— Today’s Art (FIG.2-1), and by scrolling left, the users will be able to see the artwork that posted in the past.

This page has two main signifiers at the top; by clicking the menu button (on the left), it will navigate the user to the menu page (FIG.2-2). The mapping of this menu page is pretty clear: every section has a straightforward signifier to represent its function. In this menu page, users could log in or register, or explore more about the digital archive.

FIG. 2-3

In addition to the top-right Shuffle button, it allows the users to “wander through” the digital collection. However, the purpose of shuffling is relatively unclear—it seems to be just for making users see more random artworks. Moreover, since it is a signifier, the Shuffle button does not specify its action; there is another button “GET LUCKY” on the menu page, which functions the same way as shuffling but they are not successfully integrated either.

In order to avoid the potential confusion that this shuffling option might bring to new users, either of the buttons should be removed, and the Shuffle icon could also be replaced as “GET LUCKY” for the purpose of directing more clearly.

Today’s Masterpiece

This interface focuses on promoting artworks for users every day. On this page, it not only contains an intro to the work but also provides bottoms for users to click for additional information. Every masterpiece affords Seen, Liking, and Sharing. The icons below every artwork act as signifiers indicating users to tap. In addition, the Google translate section adds more flexibility to the content.

By long-pressing the painting (FIG. 3-2), users are able to save the picture on their own devices. However, there is no signifier to tell this function (an invisible feature). Therefore, it is better to add a button/icon for signifying this feature along with the Seen, Liking, and Sharing bar.

Searching for Artist or Artwork

The searching bar is easy to locate; it is right next to TODAY’S MASTERPIECE button on the menu page (FIG.2-1). Below the searching bar, there are three main sorts for users to narrow down their searching range: they could search through artwork, artist, or museum.

Seven stages of action that Don Norman proposed are presented by the searching function. Let us try searching “Paul Cezanne” as an example to examine each stage of action (FIG.4-1, 4-2).

Let's try searching "Paul Cezanne" at the point and see what comes out.
FIG. 4-1. Let us try searching “Paul Cezanne” in the search bar and see what comes out.
FIG.4-2.

What’s bothering

DailyArt can be downloaded for free but there is always an advertisement bar at the very bottom of the page (FIG. 5-1) and it is unable to click off (FIG.5-2); every time when trying to click it off, the “Upgrade to DailyArt PRO” notification will instantly pop out. This feature bothers the entire user experience because it is very intense. It is understandable that the App wants its users to pay a little extra fee for unlocking more content, but the ads are somewhat annoying in DailyArt; it is literally “brainwashing” the users to get upgraded.

FIG. 5-3: You cannot get full access to Cezanne’s work unless you upgrade to DailyArt pro

Solution

There is unnecessary to put ads everywhere. Let us take a look at the Cezanne’s masterpieces (FIG. 5-3); the app could remove the ads bar at the bottom and simply remain the “Unlock all feature” for notifying the users: you can get full access to Cezanne’s work if you upgraded to DailyArt Pro. In this way, users could make their own decision on whether to upgrade or not instead of being overwhelmed by the ads.

Conclusion

DailyArt is fundamentally well-designed as an educational App in general. It has sufficient art information for its users and relatively clear navigation of every section. Although there is room for improvement, DailyArt still presents a user-friendly platform for its users and achieves its educational goal.

Design Critique: Capital One Bank – (Website Desktop).

Design Critique: Capital One Bank – (Website Desktop).

Introduction

The website being reviewed for this critique is a Capital One bank website. The bank provides both app and desktop digital platforms for customers. The platform I will be looking at is a personal user account from a desktop computer. For most financial institutions today customer retention is a tough task and converting new users is even harder. So banks must be innovative in what services they provide to gain and retain customers. Most banks try to provide products of value to their customers, these products must be accessible, easy to understand and use. This platform is designed to give Capital One customers, of which I am one, convenient access to their account. As a current user of the website I will be critiquing two areas I frequently interact with, namely the Landing page and Essential Checking Account page. The ideas I will be using to critique the website are concepts from Don Norman’s “The design of Every Day Things” .

 

The Landing page

My Critique of this website comes at an appropriate time, as the website has just been recently redesigned. At a point in mid 2017 I had 2 versions of the website interface appear on my screen, that was a little confusing(Looking back I wish I had taken a screenshot) I now realize they were preparing me for the final transition to this new interface. 

Visibility

The landing page of the current website is free of excess text, a good visibility practice to reduce overwhelming text to the eyes. The page also only reflects my three account areas (Essential Checking Account, Simple Savings Account, Venture One-Credit card). The use of this one page to reflect all three account areas reduces complexity and the potential of visual overload. This immediate access to the main areas also makes for quick discoverability, closing the gulf of execution in comparison to the old webpage process when searching for the other areas of my account. 

Natural Mapping:

To access the website further you hover over one of the boxes of the three account areas (Essential Checking Account, Simple Savings Account, Venture One-Credit card) Once you click on the box you are led to a new page where more information pertaining to the task you are looking to carry out is visible. This reveals a level of progressive disclosure as you only find out that each box is meant to be clicked when you move to click on the pay bill or view account widgets/buttons.

Signifiers:

This current Webpage has more design signifiers to que the user towards the actions that need to be taken, rather than using text to drive the action. For instance the new webpage has a widget that just says “Pay Bill” compared to the old box that explained “If you would like to pay your bill click here”

Essential Checking Account Page

Once you land on the Essential Checking account page the user notices the top banner has arrows that again act as signifiers to guide you forward towards a new page or backwards towards the previous page you came from.

Constraints:

Another area that was updated on the current website was the ability to edit a payment transfer transaction. On the old account you could not edit the transaction once it had been completed which was a frustrating constraint but now on this new website you are given a pop up box after a transaction has been made.

Feedback:

 At the end of each transaction there is text confirmation that the transaction has been carried out so I see this as helpful feedback, which helps in closing previous disparities in the gulf of evaluation on the old website. In the past on the previous website, the action might have happened after I clicked the send button but there was not a clear indicator that the action had worked. I can remember times I logged off worried if I needed to carry out the action again.

Recommendation

In looking to recommendations I can make for the user experience on this new website, it would be along the lines of user action confirmation which can be achieved through sound, Norman also talks about use of sound in his book. Users want to make sure actions they carry out on a page work and they don’t have to repeat an action twice. While a properly functioning website that responds to actions and clicks is the ideal goal, I believe integrating sound into a click action can be a feedback, a type of additional experience that helps the user confirm his action was properly done.

Conclusion

Altogether I believe this new website has taken into consideration a lot of user experience best practices along the lines of Don Norman’s principle  like signifiers, visibility, feedback and other principles like the gulf of execution and evaluation. While the website still has areas one can argue can be improved, I can feel an easier flow of use as I interact and execute different functions on the update website.

 

Design Critique: Venmo (iOS app)

Venmo is a mobile payment sharing application that allows people to transfer money from one user to another  acting like somewhat of a digital wallet. In order send money, users must link their bank to Venmo so to off-load payments. It also acts like a social media platform in which people can ‘like’, ‘friend request’, comment on posts, and additionally, it contains three separate newsfeeds including personal, your network, and global.

 

In my research for this critique I have found that this application has quite the positive response from other users, including myself, which shouldn’t be too surprising since roughly 10 million people have downloaded the app (Venmo doesn’t release numbers of users externally). While overall the the interface is easy to use and look at it there are some flaws in its operational design. These flaws include the cap on the amount of money one can send and labeling/hierarchy issues. Using the design principles and concepts of Don Norman from his book “The Design of Everyday Things,” I will support my claims of design choices that were good and could use improvement.

 

1. Intuitive Payment Process

Upon downloading and creating an account the home screen already provides where two options for send money. In the top right corner there is a ‘pen’ and ‘dollar’ sign icon that signifies that this is where the user should tap so to transfers cash. It notes that one can add recipients by name, username, phone, or email. This is an affordance for different options to add people. Additionally by tapping the menu button they can also search for people so there are two ways they can add a user. Feedback is measured by the payment being immediately posted in the personal newsfeed as well as in the network newsfeed. The gulfs of execution and evaluation in tapping the ‘pen and dollar sign’ button, filling out the form (complete with recipient, payment amount, ‘what’s it for’), and then pressing ‘Pay’ or ‘Request’ are easy to execute as well as provide a good evaluation of that action by it popping up in the newsfeeds.

 

 

 

2. Social Sharing

The social aspect of the design is represented by post descriptions allowing emojis, ‘like’ and comments buttons on posts, friends requests and groups.These elements have a clear enough visibility that invites users to participate. It makes paying people fun and you get to see who your friends are hanging out with. The mapping of the newsfeed is designed so that the newest payments appear on top and older ones at the bottom making it easy to find a past payment just by scrolling.

 

 

 

 

 

3. Constraints on Money Transfers

The biggest constraint is that a user is only allowed to send $299.99 a week unless they take extra action to verify their identity then the user is only allowed $2,999.99 a week. Another limit set on users is unless they want to pay an extra twenty-five cents for an immediate bank transfer they have to wait one to two days for money to show up in their bank.

 

 

 

4. Hierarchy and Labeling

The menu offers many options but the order seems out of order and mislabeled. While the menu was easily discoverable, there are issues in the discoverability of some labels.Upon seeing first glance, I remember I couldn’t find the correct label to pay someone which is “Search for people.” I believe I was searching for something like ‘Send Money’ or ‘Make a Payment’, something directly related to money.  And secondly, there are labels like “Scan Code” and “Invite Friends’ that I believe are less important than ‘Transfer to bank.’ It takes a couple seconds too long to find ‘Transfer to Bank’. Additionally, there is consistency in the labeling of clickable links such as those in the menu and payment form (‘Request’ and ‘Pay’) are in white.

 

 

 

Design Story: Queens Historical Society

Queens Historical Society

 

About the Project

At the beginning of the semester we were broken up into groups and asked to tackle redesigning the Queens Historical Society website. In my group, each of us identify key issues within the website, these key issues helped us design a more friendly website using the following procedure.

 

Current Design

        

 

Upon looking at the Queens Historical Society website some of the key issues are the double navigation bars, the non-interactive slider, the follow of content and the heavy text content located on the first page.

Understanding the User:

The step of our progresses was identifying our individual user groups. I decided to focus on pre-professionals, meaning students that are finishing their degrees or recently graduated individuals. During the testing of my user group I conducted two interviews and two observations. Both of these tested revolved around the usage of cultural institutions websites and how often they visit these websites. 

The observations and interviews lead me to the following information that they deemed most important about websites.

Discoveries:

  • Content
  • Structure
  • Images

These discovers lead me to create a persona, that would signify one of the many users of this website.

 

 

In this section we all learned that each user is different and we cannot assume they contain the same perspective as us. During my testing I discovered that something logical to me is not the same to other users. As a group we discovered that most of our users were very keen on the navigation, content and images of the website.

 

Content Construction:

In learning what are users are general looking for within websites we proceeded to the next step.

 

The card sorting and tree testing helped us understand and see how our users go about locating information within the website. It was interesting to learn that most of our users had completely different ways of sorting the cards and completing the tasks. The card sorting gave us insightful information on how to go about designing our site map. It also provide us with insight on how others process and look for information.

 

Site Map:

 

 

The site map along with the competitive analysis helped us design the paper prototype that would lead to the final product. The site map was created from the card sorting data and the tree testing. Both of these resources helped us learning the best way to group and range labels. We also realized that language is really important, common phrases to us do not mean the same to others.

Competitive Analysis:

 

The competitive analysis helped us with:

  •  Creating a better navigation
  • Better arrangement of content
  • The overall appearance of the website

Prototype:

 

 

We first designed the desktop paper prototype and modeled it after the Cooper Hewitt and the Museum of New York City, we then designed the mobile site. We chose these websites because they had the best appearance, content and navigation. As a group we tested the paper prototype on eight individuals, our first round of testing came back helpful information.

Overall are design was good but it had some minor issues:

  • Language – meaning some terms were confusing
  • Label Arrangement – this had to do with the desktop version and what was found on top and bottom of the page
  • It also helped us realize we need to put the title of the page and not assume users know what page it is

Wire Framing:

 

The next step of our process was designing the wire frame, as a group we decided to use sketch to bring our paper prototype to life. We divided the work into sections, I and my follow group member took the mobile site and the other two members took the desktop version.

  • First we made the necessary changes to the paper prototype to incorporate into the wire frame.
  • Second we meet as a group with our first designs, which lead to revisions because of the inconsistence between the mobile and desktop.
  • Lastly we used InVision to create an interactive wire frame.

Final Product:

Overall I am very happy with the redesign of the Queens Historical Society website. The user testing was a great help in obtaining insight on what users general want from websites, as well as the overall design.

As a group we decided to go with a more image heavy site because we believe images speak louder than words. It is also more visually appealing than text heavy pages. Our second accomplishment is the reorganizing of the navigation bar and adding filters to the exhibition and event pages. Also with the help of my teammates: Paige, Harry and Mia, we were able to bring different perspectives to help create a more user friend website.

Mobile

Desktop

 

 

Design Story: Intreprid Sea, Air & Space Museum Website

Design Story for the Intrepid Sea, Air & Space Museum

 

Group: Arushi, Julie, Alexa, Krissy.

The Challenge:

Our group had the opportunity to reimagine a new website for the Intrepid Sea, Air & Space Museum Complex. The goal was to research users and analyze content to create a prototype we feel best serves the Intrepid mission while giving users a flawless and consistent experience.

Identifying Concerns:

Arushi, Alexa, Julie and myself quickly did a review of the existing site and gave our first impressions. We all felt the colors were too brash and there was way too much information on the home page. We also determined too many categories were presented on the side bar creating clutter and confusion.  We concluded that what would best serve this website was to simplify the content and organize it to be more user friendly. Before we began it was important to conduct research on who exactly the users are.

Understanding Users:

For my portion, I decided to focus on parents as they are a key demographic for the Intrepid. I designed a questionnaire and conducted in-person interviews. I found the in-person interviews to be helpful in that I could converse with the subject in a casual manner instead of getting fixed, formula like responses. The questionnaire proved to be very effective in getting many people to participate. Some key findings were:

  • Over half of parents surveyed research a museum before visiting.
  • Parents are concerned with travel time and hours involved in visiting so logistical information should be easily accessible.
  • Parents care about price and look for deals so details like membership information should be easy to locate.

The Content:

Once we gathered data about our users our next objective was to start working with the content. Using the card sorting method, test subjects organized topics into categories by using the program Optimal. Afterward we reviewed the data.  My role involved looking at Optimal’s analytic tools and relaying the information to the group. Some tools we found useful were the similarity matrix and the dendrogram. They allowed us to visually identify what users grouped together and we could see patterns emerge.

 

              

It was apparent there were major connections among categories like events, exhibitions, and visitor information, but there were also many smaller topics that had no strong links. We used the tree testing method to test these lone topics like ‘food’ or ‘how to honor a veteran.’ After looking at these results we quickly set to organizing the content.

 

Another method that proved helpful was the comparative analysis. Our group decided to analyze similar cultural institutions where the website conveyed a cleaner, more concise message to users. We chose:

  • Smithsonian Air and Space Museum
  • USS Missouri
  • Exploratorium
  • The Faraday Museum.

My job was to examine the label and navigational features of these websites. A key component I discovered was all four websites use a scroll over menu. Users can see a drop down menu over main buttons without having to click anything. We also discovered a ‘Buy Tickets’ button was always prominently displayed. I found this analysis to be very effective in determining what features we should incorporate into our design.

The Design:

Our main vision was to create a simple design where users could easily navigate to the information they needed without getting lost or bombarded with unnecessary information. We had an idea of our categories and main page headings, but not the layout. I used Microsoft OneNote to create very simple wireframes.

       

 

These simple designs helped our group form opinions and ideas on how to move forward with a new design. A crucial change was incorporating the address and hours on the top of the home page. Based off our research, this was one thing that many users seek and we felt it was important give immediate access to. We all agreed that the tours page would work in a grid pattern to limit users from having to scroll too much. After the initial sketches were finalized, the prototype was ready to be implemented using InVision.

 

The Initial Prototype:

Our first prototype test gave us good insights into the overall effectiveness of our design and also a few problem areas.

  • Test subjects liked the ease of using the events calendar and the option to shift from day, weekly, or monthly views.
  • They also liked the immediate access to current exhibitions when clicking the exhibitions button.
  • ‘Get Involved’ button was not inclusive of membership and users found it confusing.
  • Users needed more information about guided tours to know what the specific tours were about.

             

 

Final Phase Prototype:

After making changes to our initial prototype, we feel our final prototype improves upon the existing website greatly by providing content in a clearly organized, more refined layout. The site’s easy to use navigation will give visitors a more seamless, enjoyable experience.

Mobile

Web

Design Critique: FreshDirect

Fresh Direct is an online retailer that allows customers to order food (meat, vegetables, fish), party platters, and household items (trash bags, dish soap, and so on) for next day delivery to their residence or business in the New York metropolitan area.

The website is the primary (for purposes of this critique) interface for the retailer. Mobile app versions exist for Android and IOS platforms, but are not addressed here.

Plus: Discoverability and Natural Mapping

At first glance, the site’s discoverability makes it relatively simple to understand what one can do – select and purchase food/other things for next day delivery. The menu at the top displays various categories of food and other items, grouped by category, making it easier for customers to find their desired product(s). The top-level menu layout generally mirrors the layout of a physical grocery store. Sub-menus for categories aid in locating certain types of items, such as apples or citrus fruit. This structure is followed for other areas, such as meat and seafood.

The site’s menu acts as a natural mapping, by connecting an action to its result. Selecting the top level category, then selecting the specific type of fruit (action) from the drop-down menu displays the various types of citrus available for sale (result). Most categories follow this mapping consistently.

Minus: Sub-Menus and A Mental Model Disconnect

However, the ‘grocery’ category requires two additional steps, requiring users to select a sub-category (pantry, beverages…), a sub-sub category (‘snacks’), then the desired product(s) from the selected category. Additional clicking and menus add complexity to the process, and may slow down the completion of the tasks forming the basis of the activity.

Also, the menu of items under ‘pantry’ may not correlate with the customer’s mental model of a physical grocery store. Cereal will most likely be in an aisle different than where one would find the oil and vinegar, and so on. A possible solution would be to add a second level of categories that more closely align with a traditional grocery store aisle format under the first level categories (meat, fruit, and so on). For example, ‘snacks’ could be renamed ‘Chips/Condiments’, with spices and baking needs in a ‘Baking/Spices/Oil’ category.

Snacks selection, as presented on FreshDirect site.

Positive: Clear Feedback

The site provides feedback when an action is taken, such as placing an item in the cart, assuming it is in stock. The quantity of the selected item will be displayed in the cart, ready for purchase, along with other items.

If the selected item is not available, it will be grayed out, and marked ‘unavailable’. The item then cannot be selected, or placed in the cart, making use of a logical constraint. Fresh Direct cannot sell something it does not have. The customer may then choose a similar product, abandon the idea of buying fresh sardines, or look elsewhere for the desired product.

Positive: Use of Activity Centered Design and Focus on Task Completion

The site makes also makes use of activity-centered design by decomposing the activity of shopping into discrete tasks: determining availability of items, selecting the items, placing them in the cart, keeping a running total, and selecting a convenient time for delivery, albeit from a computer. Additionally, repetition of the tasks shortens the time to complete them, as the customer is familiar with checkout procedures and can easily access past orders to purchase the same items again, without having to look for a specific thing.

Overall, Fresh Direct does a very good job of getting the activity and associated tasks of grocery shopping done. By using natural mapping, discoverability, and providing clear, immediate feedback, the site is successful in providing a positive shopping experience. The sub-menus for harder-to-categorize areas, such as ‘grocery’ provide an opportunity for refinement, with the goal of more closely aligning with the grocery store mental model.