Tag: interaction design

Posted on

Wireframes For Insured Dashboard Redesign (2014)

Developed concepts to modernize and expand features on a customer portal.

Problem

The original dashboard (which I cannot share) was missing a lot of key details. There were lots of links and generic info. I wanted to give the user a summary of their account and emphasize actionable items, such as access policy documents or payment history. As a team, we captured several business priorities, like reducing paper documents, more self-serve options to free up call center, etc.

User Profiles and Use Cases

After talking with the project owner and interviewing a business subject matter expert, I captured several light personas defined by use cases:

My personas are defined by WHAT a user intends to do. A persona or use case becomes a trigger for a wireframe flow that meets one or more requirements.

Wireframes

I created detailed wireframes like this. Their function was “proof of concept” and exploration of other potential features. Clients need to see something to be able to better understand what they need:

I usually encourage clients to build components as needed, to think in Agile terms and embrace rapid iteration over perfection. As a result, wireframes for each screen are more detailed in key area and less in others.

Solutions on the dashboard above included:

  • Holistic view: I summarized all aspects of the user’s interaction with the company and categorized them into 3 columns with subsections. I also added a global summary info bar at the top (e.g., “You have 6 unread docs”)
  • Hierarchy: I showed content in order of importance/relevence, from top to bottom, left to right. Older and secondary content was concealed behind summary links.
  • Consistent Clickable Styles: I exposed the key actions as buttons or links. For example, under Payment, I added a prominent Pay Now button and a secondary link to View Invoice.
  • Relevance & Quick access: New and unread items highlighted. I exposed some key actions. For example, I added a pull-down to quickly switch the policy holder for those account that have multiple people on them.
  • Surfaced Meta-Data: To increase the relevance of each link, I tried to surface the key metadata from the item being linked to. For example, a document link came with a concise description showing document data, policy number, expiry date, etc. For the View Invoice link, I showed how much they saved on that invoice, due date, etc.

Ideation & Storyboarding

I developed a layout for the dashboard to standardize existing pages. Based on this layout standard, I explored various areas of functionality. The client didn’t know what exactly they wanted. They wanted to see options and get advice on what their client might be interested in seeing and how.

Most interactions dealt with looking up the right documents, managing access, and sending documents:

I mapped out user actions and screen transitions by connecting various wireframes, like this:

The client and I went through multiple iterations of each screen. I would start by making suggesting of what might be useful features. They would give me feedback on what they thought would work for their clients. I would make revisions and so on.

Prototyping

Even a rough functional prototype can help better “feel out” a solution than a static representation. Here’s a simple HTML prototype that the user could click through to test the overall flow. I also mocked up an alert email, which triggers the process. This way the client could start seeing the full story of how a user will to log into their dashboard:

The client would then take my concepts to his team for testing and further elaboration. My objective was to quickly concept and prototype UI ideas for them.

Posted on

UX Audit of a Facebook Game (2018)

Farmville is a farm simulator for Facebook from 2009.

Original Home

Redesigned UI (Rough Mock)

Theme Problem Solution
Neighbours Greatest real estate to empty slots for Facebook friends Simplified Neighbors pane and surfaced stats (level and cash), can grow as more social features are used (progressive disclosure)
Action menu Buried actions requiring multiple clicks Exposed action menu with animated transition to avoid loss of context (view prototype)
Key Stats Key Stats are scatteredDifference between “Cash” and “FVO” Farm Cash is unclear Compact Key Stats, together on the leftFarm Cash deleted
Levels Unclear “level” system Explicit level labelLevels are now goal-driven, so it’s clearer what to do and what the constraint/deadline is (added Time Remaining to the stats)
Selected States No selected states for tools, selected seed, etc. Clear selected style for actions (e.g,. in my mockup, the Plow is selected in nav and mouse cursor looks like plow)
Plot labels Easy to miss wilted plots Clearer labeling of plot status (Ready, Wilted tags)Status summary on the side (when plot clicked, map pans the screen to the plot)
Cash Two types of cash (confusing) Simplified “cash” concept (removed Farm cash)
Inventory No buildings by default.Unclear where my inventory is. Created default building (how can you have a farm without buildings?)This building doubles as the inventory (you can click the barn to see what you own so far)
Settings Full screen mode not discoverable. Full screen icon in standard bottom right location.

Original Product List

Redesigned Product List Concept

Theme Problem Solution
Costs / Layout Low contrast on costsUnclear prices (two prices shown: cost to buy and eventual profit; unclear which is which) Cleaner, standard layout for all “costs”Can’t confuse cost and profit (using price look for cost and “earn” label on profit)
Action Small BUY buttons and unclear that BUY means Plant Now Entire item card is clickable
Scrolling Horizontal navigation via arrows is awkward Standard, faster scrollbar navigation
Transition Loss of context when menu opens and covers up game Animated slide out attached to main menu, less jarring (See Adobe XD Prototype video)

Top Usability Lessons

Avoid Competing Concepts

It was unclear why I was seeing a “you’re out of cash” message when I had tons of cash.

In my mockup, I removed Farm Cash, leaving money and water as the two main constraints. Users would buy regular cash or other perks.

Free Should Be Playable

I ran out of “Farm Cash” too fast, without knowing what it is, leaving few things left to do in the game. A game should still be playable and fun for all, not only paid players. A user could still make upgrades later. Otherwise, they will just spread the word that the game is not fun, hurting adoption.

User Research Question: At what point would players be ready to invite friends? Would they do so right away to say “Hey, I’ve just started this game” or would they do it later to say “Hey, I’ve played this game already and it’s great”.

Reward Every Session

Once you plant a lot of  stuff, there’s not much to do. It teaches users not to expect much. Delayed gratification and long feedback loops are always weaker motivators. One factor aggrevating this is that interesting Actions are burried inside the Market dialogue:

Even if the game could support short play times (plant now and harvest tomorrow), it should also be playable during longer sessions. In my mockup, I exposed some of the actions, so it looks like there is more stuff to do. I would also unlock more of the categories, so users could play around. For example, they could buy 1 cow and maybe do something with that cow (feed it, tickle it). This would provide a simple experience with immediate feedback, while the longer feedback loop of growing/harvesting is ongoing.

User research question: What are some contexts in which users will play the game? For example, user plays for 1 min while waiting for a bus or for 15 minutes while riding the bus. Will there be lots of distractions? How long should the typical session be to fit the constraints? What are the user’s most satisfying moments?

Avoid Interrupting The User

There are lots of pop-ups and early upgrades that happen at the wrong time or interrupt another process.  For example, I was trying to plow but found a box. This popped up a new screen and another about the box, completely interrupting my task. Often dialogues pop up one over the other. It’s better to show messages when they are relevant. When I’m planting is not a good time to suggest that I customize my character. Detect the “end” of a process or task and show relevant messages then.

User research question: What are natural pauses in the user’s game play where a general message could be shown? What are key problem moments when a contextual message could help? Which things do users enjoy figuring out for themselves and which things are frustrating?

Enable Wayfinding

There are many screen orphans: they pop up, you close them, and later don’t know how to go back to them. For example, when you click a plot of land with the default Multi-tool, you get a pop-up with seed choices to plant. There’s no direct link to this screen. There’s no headline to explain whether this is an inventory of seeds I own or stats on what I’ve planted. Also, there is no selected state although you can choose your seed.

User Research Question: What are most common and enjoyable tasks? How long do users spend on a task e.g., planting crops? What categories of items do users care about? What do they want to do with those items? How much choice is too much?

Clearly Label What Is Selected

There is no selected state on tools, which makes it unclear what mode I’m in or what to do (especially if I clicked something just exploring early on). In the screenshot below, my mouse pointer shows no clue as to what tool is selected and what will happen if I click the ground. The plow tool has no selected state. It’s also unclear how to exit plow mode.

In my mockup, I labeled the selected states and the tool clearly.

Create Explicit Rules And Constraints

Some of my crops wilted, and it was unclear by looking at them that they wilted. When I clicked them, I just plowed over them, because I didn’t know what “unwilting” means.

In my mockup, I labeled “wilted” plants more explicitly. I would also show some kind of message, perhaps along with the “Ready” status updates on the side.

User Research Question: What do users want to do while things are growing? Are they receptive to, say, email notification when their crop is ready or wilting?

Product Recommendations for the Future

Keeping It Fresh

  • Daily opportunities + challenges:
    • Extra rain causes crops to mature faster, BUT you have to harvest quickly
    • Drought is causing wilting, you have to water your crop immediately
    • Phone call from a vendor who wants to arrange an ongoing bulk order and pay your extra (if you grab the deal, you make extra for every sale and you get free shipment of resources like fertilizer)
  • Material upgrades:
    • A barn upgrade, so you can store more stuff
    • Better rake that can plow faster and cheaper
    • A plot size upgrade, so you plant more and earn more per plot
    • You discover an old well that gives you extra water
    • You receive sample bags of fertilizer so your next 10 crops will grow faster
  • Environmental challenges and opportunities:
    • Storm endangers your crop so you have to build greenhouse to protect your crops, or fix damage before your crops fail
    • A tornado destroys your barn so you need to recruit neighbours to help you rebuild it
  • Surprise new characters:
    • A part-time helper shows up to pick crops before they wilt (your cousin who’s come to stay for a week and help for free or a part-time employee who requires minimum payment)
    • A feral dog comes wandering onto your property, and you can tame it (it then keep badgers away)
    • A new neighbour moves in: if you get on bad terms, they can drive you out of business, but if you get on good terms, they can help you
    • Compete with AI neighbors for business
  • Mini games
    • Add some RPG elements (e.g., ride a tractor), so there is a purpose to controlling the avatar
    • Combine big picture activities and specific farming tasks: zoom on crop plots and do something detailed (e.g., a mini bug spraying game like Whack-a-Mole or Candy Crush)

Characters

  • Invite friends to visit farm. They can water crops or pick ready crops when I’m not available. If they want to do more, they need to get their own farm next door.
  • Users get different perks and can share props e.g., “Can I borrow your tractor? I’ll pay you 50 coins for a day” You get rewarded for sharing.
  • Auction where you can get items cheaper (tractor, animals, tools)
  • Invite friends as helpers (e.g., “A drought destroyed my farm. I need 2 people to sign up to help me rebuild. I need someone to play carpenter to rebuild the barn and someone to dig a new well”)
  • AI neighbours whom you can borrow things from
  • Multiplayer-like features and co-ownership of items:
    • Start a farm together with friend, spouse, etc.
    • The more people, the larger the default farm and more cool farm props (e.g., a farm with 3 people gets a tractor by default)

Chat features

  • Game posts friend updates automatically (e.g., “John just got a larger shed”); users can then like an update or reply with text
  • Team chat for multi-player farm g., User 1 asks User 2: “Hey, I just sold a large harvest. Should we buy a tractor or buy more land?”
  • Chatbot: you can talk to your avatar or AI neighbour e.g., “How are you? Go plant some carrots”
  • Integration with Messenger for chat with avatar e.g., “Something’s happened. Come right away.” or “Crops ready. Should I harvest?”)