User Experience

Robinhood App

One particular user experience/interface I’d like to talk about is with the Robinhood stock-trading app. Robinhood reduces a lot of clutter by simplifying only the necessary things of buying and selling a stock. Right on the home screen, you can see your total account amount, and it also gives you the ability to filter that by day, week, month, and all-time. Just by scrolling down, you can see the stocks or options that you own, followed by your watch-list. Everything is very minimal with Robinhood. Although the graphs aren’t intricate with candles, lines, and other tools, its does provide a clean, simple interface. I also believe this is a con because it doesn’t provide the user enough information to make the best informative decision. The ability to purchase and sell stocks is only a 3 step process; click the stock of your choice, input an amount, and click the CTA.

Breaking down 7 factors that influence user experience:

  1. Useful – Does the app allow users to invest their money, purchase, and sell stocks? From my experience, yes! And it does a good job in organizing all the tax documents together.
  2. Usable – Yes, I can check my total portfolio amount, options, and history, while purchasing a few shares all in the span of less than 20 seconds. It seems pretty usable to me.
  3. Findable – There is a search feature which makes it easy to look up thousands of companies in their database.
  4. Credible – Well, Robinhood was started by two Stanford physics graduates, is regulated by the SEC (Securities and Exchange Commission), and investment accounts are covered by the SIPC ( Securities Investor Protection Corporation).
  5. Desirable – I believe Robinhood’s design is beautiful, simple, and sleek. As far as it’s effectiveness from the minimalistic design, that’s up for debate.
  6. Accessible – The app is accessible for IOS and Android users. It is free to start up so virtually anyone with a SSN can create an account. There is an option for audible charts for users with visual impairments.
  7. Valuable – I believe it does deliver different values to different users in different ways. Users with absolutely zero trading experience to users with decades of experience can both use the app. It does provide zero-commission trading which can be appealing to a lot of traders who don’t like paying commission fees. There is also options trading to users who prefer that. Robinhood also allow users to purchase buying power for those who need to borrow.

Design Thinking

Thoughts on the Design Thinking Process

A benefit of the design thinking process is the stage of defining the problem. This allows designers to really dig deep into understanding the root of the issue instead of rushing immediately into finding a solution. This is ideal for a long-term solution. Behavior modification is only a temporary solution. We can’t just tell an addict to quit their addiction. Rarely does that ever work and it is highly unsustainable. They will just suffer from the same problem that caused them to stumble in the first place. We need to dig deep into the internals, figure out the root cause for their addiction, and help them change from their core. Identifying and modifying the root hopefully leads to long-term solution. This is the importance of defining the problem when it comes to design as well.

Another benefit is the iterative and non-linear process. It leaves the process open-ended where there is no “real” solution, but allows the designer to continue tweaking, understanding, developing, and testing as things adapt over time. Recently, I’ve been given the opportunity to design and develop a website for a start-up related to technology and science. As the company grows, I have to keep in mind that the user may change over time, new problems will arise, and the overall direction of the company will change.

Initially, the audience may be targeted towards investors and people looking to become educated in the product, and over time, the audience may change to a consumer or purchaser of the product. Understanding, redefining, continually tweaking prototypes, and testing will help me come up with best fit solutions for future designs of the website. The world changes, people change, and design changes as well. The non-linear process allows me to go back and forth between all facets of the design process as the company grows.

Interaction Design

Activity-Centered Design

Overview:

I took the time to break down 3 different activities using the activity-centered design process. ACD focuses on identifying and simplifying the tasks users perform with a product. It differs from the user-centered design approach because it only focuses on the specific tasks a user takes rather than focusing on the entire overall user experience and accommodating the user. I mapped each activity out by its tasks, actions, and operations.

Activity 1: Use bluetooth headphones with Spotify on the phone

  • Tasks: Turn the headphones on, connect headphones to device, open app, select a song, select various buttons to modify the sound
  • Actions: (Turn the headphones on) connect to the phone via bluetooth button, open the Spotify app, select a song of choice, use volume buttons to change volume
  • Operations: (Change the volume) press the plus-marked button to increase the volume, press the minus-marked button to decrease the volume, hold the bluetooth button to disconnect headphones from phone

Activity 2: Use a Keurig coffee machine

  • Tasks: Turn machine on, select coffee pod to make, insert cup, dispense the coffee
  • Actions: (Turn machine on), open up pod holder, place pod into machine, place cup underneath the spout, close pod door, press button to dispense coffee
  • Operations: (dispense coffee) press “coffee cup” looking button to make the coffee,

Activity 3: Use Evernote app to write a note

  • Tasks: Open up app, create new note, type note
  • Actions: (Open up app) initiate the Evernote app, create a new note to write in
  • Operations: (Create a new note) press the green button with the plus-sign in the middle to create a new note, select the blank white page, press key board to type

Design Sprints

Why the process might fail?

A design sprint consists of multiple components and if one component is lacking, this can cause a sprint to fail. Three points of failure for a design sprint are:

  1. Lack of Team: having the right team is important in bringing different qualities and leadership abilities together in a cohesive manner. The lack of chemistry can be detrimental in having a consistent vision of the sprint and can create boundaries in creating a comfortable environment where people can share.
  2. Having a storyboard that doesn’t flow: it’s important to create a storyboard that is fluid and flows from step to step. This creates direction for the user and leads them to the main goal. If the user cannot reach the main goal, something is broken in the storyboard. The storyboard is also important because its sets the precedent for the next step: creating a prototype.
  3. Lack of planning: Its important to come prepared with an informative brief, user research, team, environment, supplies, and vision for the sprint. Time is valuable and it is important that the team is well-informed for Day 1 of the sprint. The lack of planning can have a snowball effect on the rest of the week causing the sprint to fail. If the team feels unprepared, this can lead to emotional factors of overwhelmingness, stress, and overcompensation in other areas that may not be as important.

User Experience

Bad User Experience…

Reflecting back as a UC Irvine alumnus, I experienced this poorly designed page for five years of my life. Every time we registered for new classes, we had to go through this webpage. Upon entering the page, you can see a main navigation menu on the top followed by a different lengthy side navigational menu on the left side and another “Helpful Tools” option list on the right side. The problem with this is that it gives an overwhelming amount of options for the user. Some of the options are repeated which creates unnecessary options for the user. If users were seeking to visit the website mainly to access the registration portal, this design offers a poor design because most of the page is littered with plain text, followed by the main CTA in the top right corner. It might be better to place the main CTA in the center of the page signifying the importance of it rather than stashing it in the right-hand column. In addition, because of the amount of text, users must scroll from top to bottom to find the content they are looking for. There is no easy way of finding exactly what they are looking for without scrolling and sifting, using the “Control F” find function, or search navigation at the top of the page.

Visual Hierarchy

ESPN Homepage Breakdown

I decided to outline the visual hierarchy of the ESPN site (as of Sept. 19, 2018) by asking the questions ‘Where am I?’, ‘What’s here?’, and ‘Where can I go?’.

The elements that are near the top of the visual hierarchy are the Nav Bar which clearly shows the “ESPN” logo which is surrounded by a red color that contrasts well with the black nav bar. Another thing that is very prominent is the Red Sox vs Yankees image/video which is made larger and centered between the rest of the content.

Another element in the middle of the hierarchy is the score board/schedule above the nav bar. It gives enough information to distinguish what kind of site I am on, and what kind of information I can search for on the site. If looking at the home page from left to right, the user can see another navigation list of different options of where to go. The other element that sticks out is the “Top Headlines” section on the right side. Its visible and is at the top of the page.

There are various blue CTAS on the page which stick out as well. They are more towards the bottom of the page which may make them less important.

User Experience

Twitter Homepage Breakdown

I decided to analyze the page structure characteristics of Twitter’s homepage (as of Sept. 9, 2018), in which I believe has been optimal to their user experience.

Starting from the top of the page, there is a visible standard navigation bar. The white color nav bar allows the grey text and highlighted blue text to contrast well and stand out to the user. This allows the user to easily distinguish the various links, search bar, and “Tweet” CTA from each other.

The framework is very simple. Elements are aligned in three organized columns. When scanning from left to right, I can instantly see my profile on the top left followed by the news trend below (text only). This allows me to find what information I could be interested in instantly and conveniently. Once again, the blue and grey text colors are contrasted with the white background making it easy to read.

The middle section is more prominent and sticks out because it is the largest column. There is where the bulk of the information comes from. It’s displayed in chronological order starting with the most recent first. It’s easy to see which account displayed each post by showcasing it’s profile pic and title in the top left corner of each post. Each post also includes the “Tweet” and image/video that is attached.

The right section gives the appearance of being the ‘least’ important column. It does provide suggestions on additional accounts to follow and the option to “Follow” them in real-time.

Breaking down the design pattern:

When to use it: This design pattern is good when having a site that the user needs to find the latest news efficiently and effectively. The multiple columns (left and center) can be appealing to user groups who receive their information in different ways; it can be appealing to those who just want headlines and text, and to those who want excerpts and images/videos.

How to use it: Implementing it by using multiple columns and blocks help visualize where to look and where to find the information. Keeping the text short also prevents clutter and excess information.

Pitfalls: Things to watch out for would be where to place the “What’s Happening” Tweet bar vs. the “Search Twitter” bar. That could confuse some users. Users may type into the “What’s happening?” bar thinking it’s a search bar since it’s directly above the news feed.

Questions to ask: What is the ideal user of Twitter?…Is it someone who uses the platform for just news? Or is it someone who uses the platform to just express their mind via Tweets? Or if it’s both, how do we create a balance that’s appealing, effective, and efficient for both parties?