Categories
Case Studies

Case study: Designing a pet adoption app

View the original post

Exploring ways to make it easier to find your life Pawtner, through mobile pet adoption.

đŸ’» Figma File

Why

The problem:
Faced with an overflow of abandoned pets and extreme lack of resources to find every pet a forever home, there was a need for innovative solutions to encourage pet adoption.

💡 6–8 million animals end up in shelters each year, half of which will
probably not be adopted.

-The Humane Society of the United States | HumaneSociety.org

The goal:
With these pain points in mind, our goal was to expand reach, encourage and simplify the journey of adopting a furry friend.

This is a conceptual project produced in partnership with a volunteer from the Humane Society of Northeast Arkansas.

Who We’re Design For

Eco-Conscious

People who have an extra interest in the adopt don’t shop mentality.

True Companion Seekers
People who value the bond of pet adoption. Just any pet won’t do. They want a good match for their lifestyle & preferences.

User Story Brittany is a young successful copywriter for a fast paced ad agency. She doesn’t have a lot of space in her downtown apartment but she rarely spends time indoors anyway. When she’s not taking long walks through the downtown community, she enjoys outdoor activities & spontaneous road trips. She’s hoping to find a furry companion that will be happy to share in her wonderlust. Pet adoption is new for her but has heard great things from her coworkers about the priceless bon

Needs

  • An on the go tool that can help her locate & keep track of available pets.
  • Help finding a pet to match her personality & lifestyle.
  • A support system to help her learn how to best care for her adopted pet.

Frustrations

  • The animal shelters are too far from her home for her to check regularly
  • The websites available are hard to navigate
  • She doesn’t know much about breeds & personality types

Research & Competitive Analysis

As much as we’d like to say we were original in our idea to digitize the adoption process into a mobile application, we weren’t. So of course we had to scope out the competition. One great thing about not being the 1st in the market, you can learn from others wins & shortcomings (Even if it takes a few tries 😉).

Key Findings:

Options for easy pet adoption are limited. We came across many apps & websites that offer the ability for users to search adoption databases but found that many of them lacked in key areas: usability, navigation & personalization.

  • Many of the applications architecture & navigation structure were complex and difficult to parse. Actions often led the user out of the app to a web view.
  • Most leaned on the side complexity for the sake of filler content. Lots of rabbit holes that lead the user away from the original goal.
  • Personalization or sorting was offset to very robust filtering options but once the user closed the application all of those settings were lost.

Little bit of this, little bit of that, none of that, this was the beginning of what we hoped would be a winning recipe. It was during this process that we likened the experience of adopting a pet to finding a mate and thus was born the concept, the dating app
to find a pet
.a furry friend
.a pawwtner😆.

Feature Definition

Of course all of the research got our brains overly stimulated. The ideas came in abundance and we found ourselves with a pile of potential features and directions.

Truth: in Round 1 of our concept this was our demise, we shot for the moon and missed by a mile. Here lies the beauty of growth via iterations:

Round 2 = Priorities
After a 2 year break, some self reflection & a little more research, we learned the error of our ways. Using our user journey as a guiding star, we put on our adulting pants and reigned in the wish list. The goal: defining a realistic MVP without sacrificing the usability or quality of our product.

Execution: Design

With round 2 of the feature set came round 2 of design and this time with purpose. Pet adoption isn’t just about the process, it’s a decision between head & heart. Our experience should encompass that, so we took another go at it with these 3 principles in mind:

☝Essential
Everything they need and nothing that they don’t, lose all the fluff & puff. Every element & decision should contribute to the experience.

✌Conversational
Not just user-centered, but human centered. The product should have life, capture the passion & care of the societies volunteers. We know pet adoption can be daunting, time consuming & complicated, let’s walk them through it.

👌 Inclusive

Good design is design for everyone, our product should invite & cater to users just as diverse our pets.

Reflection

This project over the years has become one of my favorites (which is surprising because it was also one of my first) I keep it around, not because its ground breaking or super cool but because it acts as a marker for my personal development. Though it remains just a concept, the process & the iterations have contributed so much.

Oh the joys of learning & growth.🌿

It’s taught me the importance of going beyond aesthetics, thinking critically & designing experiences with purpose, for people. A lesson I actively work to carry into every product I touch.

Thanks for reading! See you in year or two for round 3 (Maybe 😉).

Have questions, comments, or just want to chat? Feel free to reach out on Twitter, Instagram or send me an email. For more of my work checkout my portfolio


Case study: Designing a pet adoption app was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Categories
Case Studies research

FinDeck — A UX Research Case Study

View the original post

FinDeck — A UX Research Case Study

As a new member of the workforce, I was curious about building wealth. The interest remained imminent while the ways to do it remain elusive. Financial literacy is not mainstream and the implications of the same are seen in my circle and throughout society. There is growing evidence that financial literacy affects financial decision making which in turn determines the well-being of an individual in this economy driven by capitalism.

Knowing what to find, finding the right resources, finding the right mentorship, the right advice, knowing what is right, and knowing what is right for you is a daunting task even for experts, let alone a novice. Having no idea where to turn to amidst the plethora of information irrespective of its credibility was the stimulus for the ignition of this project.

Introduction

Personal finance and financial literacy

Financial literacy in a layman’s term is knowing how to handle money. To be more specific, it is knowing the concepts required to understand the abstractions of financial services. OECD defines financial literacy as “a combination of awareness, knowledge, skill, attitude and behaviour necessary to make sound financial decisions and ultimately achieve individual well being”.

“Financial literacy is a combination of awareness, knowledge, skill, attitude and behaviour necessary to make sound financial decisions and ultimately achieve individual well being”

Personal finance is an umbrella term encompassing saving, budgeting, debts, wealth planning, banking, investing and so on.

“Personal finance is an umbrella term encompassing of saving, budgeting, debts, wealth planning, banking, investing and so on”

Now that the meaning of financial literacy and personal finance has been established which begs the question “How are they related?”.

Implications of financial illiteracy on Personal finance

There are 15000+ financial products and services available in the market. An average individual who considers his retirement and wants to get involved in building wealth is expected to have enough knowledge about various concepts of finance to sail through the vast ocean and find products suitable for him and his lifestyle. And, this is where the problem begins as discovered via desk research. The findings are stated below:

  1. Various previous research suggests that people with low levels of financial literacy find it difficult to manage savings, borrowing, investments etc not only during work life but also during retirement.
  2. A simulation run in the United States from a life-cycle model which incorporates financial literacy shows that the same can explain more than half of the observed wealth inequality.
  3. In a similar vein, another research conducted by Blackrock to determine the relationship between wealth and well-being suggests that amongst those who invest, 43% are more positive about their financial future but even with financial confidence and optimism on the upswing, 57% of people aren’t investing(holds no stocks or bonds).

There is a positive relationship between wealth and well-being of an individual and yet one doesn’t participate due to the complexity of the financial world and inadequacy of financial knowledge.

But how inadequate is the financial knowledge amongst the ones around us?

In-depth Research

1. Survey

Although a lot of research has already been done to understand the level of financial literacy amongst the world, there wasn’t much data available for a developing country such as India. To gauge the same for a population sample around me, I decided to go forward with a survey.

Participants

The team(N=1), after thorough secondary research drafted survey questions based on the research to consult with participants(N=381) consisting of working professionals, students, and self-employed individuals who fall in different places in the spectrum of financial literacy. Participants consist of all genders with age ranging between 15–45 years.

Procedure

Goal: To measure the financial literacy rate of my first and second circle.

Platform: Google forms

When it comes to measuring financial literacy, a lot of work has already been done on the same as to how to go about it. For the research to be of help, we mustn’t only measure what the participants already know but also what they need to know to evaluate the gap. In light of this, the participants were tested on fundamental concepts such as:

  • Chances
  • Numeracy in Investment
  • Division
  • Compound Interest
  • Inflation
  • Risk Diversification

These concepts are universal and form the base for multiple financial decisions in everyday life. These questions were devised by Prof Lusardi and Prof Mitchel and are widely used across the globe to measure financial literacy.

Questions used in the Financial Literacy Survey

Here’s the link to the financial literacy survey: https://forms.gle/Rck6Ak8FayLc9As19

Observations

Financial literacy stands at 14.7%

Only 14.7% of the respondents got all the answers right.

Observations from the survey

This survey laid the base for further research into the behaviour of the respondents.

2. Expert Interview

On gauging the rate of financial literacy amongst people around us, I set forward to interview a wealth manager to further understand the ‘why, what and how’ of personal finance and its relationship with financial literacy.

I was able to uncover how a wealth management firm decides on a portfolio for a client who approaches them, and the mindset of their clients.

Observations

  1. The investment portfolio is tailored based on the risk appetite of the individual which is determined through profiling of the user.
  2. The company has an analytical wing that assesses each product to come up with a risk: reward ratio. This risk/reward ratio is made use of in parallel with the risk appetite to decide on the bespoke portfolio
  3. The younger generation(Gen Z and Gen Y), having born in the information age, although financially illiterate, prefer DIY and don’t often seek out help.

3. User Interview

Post validating the problem of low financial literacy via survey and the interview with an expert, I moved forward with user interviews to understand how participants set financial goals and went about their plan of action and how participants consume information on finance

Participants

Participants(N=14) were grouped based on the following criteria:

  1. Level of financial literacy
  2. Level of experience with financial products and service

Procedure

Research Questions:

How do individuals consume information on finance?

How do individuals set financial goals and plan their course of action?

The participants were recruited through a screener which was shared on social media platforms.

In light of the ongoing pandemic, all the interviews were conducted via zoom. The participants were asked to briefly describe their experience with investments, how they learnt to handle money — the pros and cons and their habit of information consumption.

Here’s the link to the Screener and Discussion Guide:

Screener: https://forms.gle/9g1etenuRKUaxNeB8

Discussion Guide: https://docs.google.com/document/d/1ggD5aQ2gNh5ejyg_XT9ytI9bZZajbDG2krYOmeuMadc/edit?usp=sharing

4. Analysis

Once the interviews were done, it was time to get started with the analysis.

Procedure

Few of the interviews were transcribed and for the rest, notes were taken making use of the recording. Post which, thematic analysis was done to form mental models.

Screenshot of the mental model

Initial Observations

  1. Almost every participant who did not have an early influence(a mentor figure early on in life) finds it hard to learn, and maintain their investment.
  2. For most of the participants, the early influence was their parent or a relative.
  3. Most of the participants have an aversion towards consuming information on finance as video. They do not find it trustworthy
  4. Participants without a mentor figure shied away from finance for as long as possible until compelled to take action through a major event in life.

Here’s the link to viewing the mental model: https://docs.google.com/spreadsheets/d/13GrhzvUJ71UHjNktVGJZVHbSCSiJCgRj_z46yyg4Pcw/edit?usp=sharing

5. User Persona

After careful consideration of the qualities and needs of users who were interviewed, these user personas were created.

Mike — The hustler
Rachel — The Beginner

Insight Generation

After rigorous research and analysis, the following insights were generated

1. Digestible Information

  • Most of the participants who did not have a mentor to guide them in their initial journey had trouble understanding content on finance and still so because of jargons and knowledge gaps
  • This lead them to shy away from learning since a lot of time is required for the same and time is a scarce resource

2. Proactive curated suggestions

“I want the app to suggest content for me.”

“I want the app to suggest content for me.” said a participant during the interview. This was in the mind of almost all the participants as it is becoming increasingly difficult to find a way in the plethora of resources available.

3. Community

“I miss not having peers to give suggestions”

When we do not know how to solve something, we look around for help or look around to see how individuals solve similar problems. When both aren’t available, it becomes frustrating and that is the case of multiple participants as they do not have anyone to rely on for discussion or advice

4. Guided Mentorship

“I get stressed when I get lost in exploring something which might not be useful”

Getting lost in the overwhelming amount of resource is not uncommon but without guidance from a mentor, it becomes difficult to differentiate the right from the wrong. To know how to filter out the noise or confirm an intuition, a mentor especially in the initial stages of learning becomes indispensable.

5. Multimedia learning

Having established the problem of low financial literacy, aiding only with investment won’t do the trick. Individuals must be taught the concepts through theory and hands-on approach. Each prefers to learn via a different medium, some through articles, some through classroom training, some through books and some through audiobooks. Any content which is being crafted to educate must consider putting it across in various formats

6. Trustworthy content

“I do not trust tools since they show sponsored content”

For any financial product to thrive, trustworthy content becomes key given that finance is a sensitive topic. Many participants quit using certain applications since the platform was showcasing sponsored articles. They expect the information being presented to them to be free of any bias

Conclusion

This project has given me an opportunity to indulge myself in the practical realm of user research providing me with irreplaceable knowledge. I’ve learnt how to conduct interviews, how to read research papers, how to analyse and how to portray the results. Most importantly, I have learnt how to empathise with users.

Thank you for reading

If you liked my work, you can reach out to me at sherliedurai@gmail.com or on Linkedin


FinDeck — A UX Research Case Study was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.

Categories
Case Studies

The Netflix Conundrum: Overcoming “The Paradox of Choice” — A UX Case study

View the original post

The Netflix Conundrum: Overcoming “The Paradox of Choice” — A UX Case studyOverview:

While Netflix remains the undisputed go-to OTT platform, today, many are increasingly finding it difficult to make a choice on the platform and decide on something to watch.

As a part of my UX Bootcamp project at Interaction Design Foundation (IDxF), my mentor asked me to come up with a design solution to this long-standing problem called The Paradox of Choice with respect to the largest streaming platform.

My Challenge:

To conceptualize and validate my own version of a Netflix design solution that could help customers choose content quickly and engage them as soon as

Categories
Case Studies

Strengthen your Landing Pages –LUMI Website Redesign (UI/UX Case Study)

View the original post

In this case study, I will explain how I redesigned a product website, LUMI from scratch. I will talk about my process, the decisions I took, my approach to this project and what I learned while working on it.

Mockup of websites

Intro to LUMI

Simply put, LUMI wants to help you make music. ROLI, the parent company of LUMI, already is involved with professional music creation. I’ve explained their products below.

  • đŸŽč LUMI Keys is a portable piano keyboard. It is ROLI’s attempt to make music learning universally accessible and of course, fun.
  • đŸ“± LUMI App is the companion app to help you with your learning. It lets you access the LUMI Library.
  • 📚 LUMI Library is the content library you can access through the app. It is divided into two tiers: Essential and Complete.
An iPad showcasing the LUMI App and LUMI Keys kept in front of it.
Picture Credits: LUMI

Goal

I felt the website already had all the content but a little too much of it. It seemed like information was put on the website just because it was there. It needed some restructuring and a visual boost to take it to the next level. That is exactly what I have tried to do in this project.

Let’s get into it. 🎉

Process

Preparation

I started by analysing the LUMI website. This helps in mapping out the site and finding every last detail about the products. A couple of times, the FAQ section had information which I shifted to one of the product pages.

Moving to the second step, I looked around for inspiration and references. You can use LandBook, Awwwards or OnePageLove for this. This helps in getting some ideas.

Once I had a good idea about how I wanted the website, I decided how I wanted the information to be structured. Moved onto some rough layouts. The important things to decide here is the content width. Will the navigation bar stretch? Will your content stretch edge to edge? Try to answer these questions at this stage to avoid confusion.

I recommend using Whimsical for this. Regardless of the tool you use, the goal is to have a clear idea for the website.

Screenshots from various websites.
Here’s a screenshot from my Figma file

Redesign

After analysing the website, I felt there was no particular need to have two separate pages for LUMI Library and LUMI App. Since they are so interconnected, it was best to combine them into a single page, LUMI App.

Before starting any page, start with the colours and text styles. This will keep the website consistent and make our work easier. Next, we need to work on the common elements of the website, such as the navigation bar and buttons.

Font styles, button styles and navigation bar iterations
Here are some iterations I tried for the navigation bar

Landing Page

Let us start with the landing page. It serves as an intro to all the products by LUMI. A good landing page should be able to answer any initial questions the person might have. It’s important because it drastically improves customer conversion.

2 landing pages kept adjacent to each other for comparison

The idea behind having a dark background is to help the colours on LUMI Keys pop and add contrast to the website. It directs attention straight to the hero of the website, the product itself. A gradient is a nod to the colourful design of LUMI Keys.

2 landing pages kept adjacent to each other for comparison

The first thing I did was add some social proofing to the top end of the page. This is a matter of choice. It adds some assurance right at the start when the person is getting to know about the product.

The next step is to introduce the products. There’s a one-line description already but I wanted to give some more details. Generally, viewers just scan the website. They don’t want to sit and read every single line on a website.

Breaking down content into points accompanied by some icons helps grab their attention to the important parts.

That’s what I did for both the products, too. Notice that in this section, I am also introducing a different gradient for LUMI Keys. I will refer to it later.

2 landing pages kept adjacent to each other for comparison

After describing the products, I’m (and LUMI is) trying to sell it by describing its advantages and features. Here, you will notice that I have restructured the list of features.

LUMI’s goal is to make music learning accessible. Being able to learn from home is the single most important part of LUMI products, therefore, deserves to be the highlight. I also took this opportunity to showcase LUMI’s achievement. Pictures are also a form of social proof.

When people see other people using a product, they feel more secure about it. It can be the difference-maker in a conversion.

2 landing pages kept adjacent to each other for comparison

As I mentioned earlier, I decided to move things around while analysing the website. I decided to move this content in the product pages from the landing page. Notice the “featured in” section which I used in the beginning.

So, that wraps up our Landing Page 🎉

LUMI Keys

2 landing pages kept adjacent to each other for comparison

Applying the same approach as the landing page, I want the design to compliment the products and make them the centre of attention. The elements on either side give an effect of audio coming out of the keyboard and direct attention to it. Remember I said I’d refer to the gradient from the landing page? It’ll be in action throughout this page.

2 landing pages kept adjacent to each other for comparison

There’s a lot going on here. There’s a lot of content, I felt it was a bit much. This is where the website analysis comes in handy. I already know the important info. I decided to make this section shorter and little more crispier.

UI tip: Use overlay on text to get that nice gradient effect (see above picture).

2 pages kept adjacent to each other for comparison

Ending this page with some more social proof and the footer. I think the social proof section showcases my approach to UI in this project very well. Always add depth.

A combination of shadows, background elements and materials adds depth, hence adding character to the page.

LUMI App

To keep things consistent, both product pages have a similar layout. So instead of discussing the layout and the decisions I made, I am going to discuss the UI.

A product page
Hero section for LUMI App

Let’s start with the hero section. I’m using the iPad and iPhone mockups to indicate support for these kinds of devices (tablets and phones). The blurred out LUMI Keys in the background will be cut-off when viewed, which indicates that the page is scrollable.

Subtle cues to indicate behaviour are useful tricks to help in guiding the user.

Custom App Store and Play Store buttons serve as quick links for people who already have LUMI Keys and want to get the app.

I am also using random shapes along with LUMI Keys to add depth to the page. You might have noticed this in other redesigned pages as well.

A product page
Features section in LUMI App

Moving onto the Features section. The standout part of this design is the use of depth. Initially, I use materials to create some.

Materials create a translucent effect which gives a sense of depth and adds more context to the design.

Of course, when text is present over the material, a thicker material (heavier blur) should be used to maintain legibility. Thicker materials are still more contextual than solid backgrounds.

In the next part of this section, social proofing, I am using a lot of different elements, shadows and blur on top of them to create a sense of depth.

A product page
Pricing and Footer for LUMI App

I know what you’re thinking. “Wow, this guy just can’t get enough of b-l-u-r.” You’re absolutely right. But setting aside UI for a second, let’s talk about why I designed the pricing section the way I did.

On the left, you see a monotonous LUMI Essential with a lot of empty space left. On the right, you see a colourful LUMI Complete with some fullness to it. This is a tactic to push the viewer towards LUMI Complete. The emptiness on the left indicates that LUMI Essential is incomplete. The monotonous appearance makes it look dull compared to LUMI Complete.

Back to UI, let’s talk about that subtle gradient above the links for Overview and LUMI Keys. It’s a simple gradient that fades away quickly but manages to indicate where a section ends and another one begins. This is another one of the tricks you can use to guide the viewer. I used it again in the footer to create two sections in it.

With that, we completed the redesign 🏔

Wrap Up

This project was an awesome experience for me. I haven’t worked on a lot of website design projects and this really helped me get going. Here’s what I learned:

  • Preparation is 80% of the work. Analyse competitors/similar websites, come up with the IA and lay out your plans before designing a single pixel.
  • Iterate, iterate, iterate. Make 10 iterations for each section. You’ll be amazed by how many smashing designs you can make. I added a glimpse from my archive as an example.
A lot of frames from Figma file
My iterations archive in Figma

Before taking up this project, I prepared myself by redesigning an AR app, Acute Art.

Making art accessible to everyone via AR

Recently (but not so recently), Apple announced Widgets for iOS. To help you get started, I made a guide for it.

Designing widgets for iOS, macOS and iPadOS — the ultimate guide

If you enjoyed this case study, let me know with 50 claps 👏

đŸ˜· Stay safe, wear a mask and have a nice day.

🏳 I do not own any of the product photos used in the redesign and in this article. Most of them are from LUMI’s Facebook or Instagram. Credit to Sennep for the LUMI App pictures.


Strengthen your Landing Pages –LUMI Website Redesign (UI/UX Case Study) was originally published in Muzli – Design Inspiration on Medium, where people are continuing the conversation by highlighting and responding to this story.

Categories
Case Studies

“E-milk”- a milk delivery app (UI/UX case study)

View the original post

This was a design assignment for an e-commerce company. The exercise took me roughly 3 days to finish, including the documentation of this case study.

Problem Statement

In today’s day and age, access to almost everything has moved to digital means. E-comm solutions today have become a primary method of catering to our daily needs. You can literally order a single ‘Gulab Jamun’ to heavy electronics online, yet there is room for solving some interesting problems. Milk is one of the most common items of daily consumption, and yet, for most of us, access and distribution are controlled by local suppliers and distributors.

Categories
Case Studies

The Rise of Clubhouse

View the original post

If you haven’t experienced Clubhouse yet, you probably should. As of January 2021, the new mobile application only available on the Apple…

Categories
Case Studies

Crypto Sentiment Advisor

View the original post

The Crypto Sentiment Advisor (CSA) is an EIT-Digital supported platform for investors holding cryptocurrencies, to anticipate swings in the sentiment for their investments and help them mitigate risks associated with cryptocurrency.

By leveraging big data, machine learning and currency trading algorithms, CSA derives trading signals from divers information sources, so crypto investors can adjust their risk management before big price fluctuations occur.

With CSA more risk-averse investors will be able to participate in the cryptocurrency market. This encourages the use and establishment of cryptocurrency as an alternative asset class in the long term.

Experientia is in charge of the UX research that will inform the

Categories
Case Studies

CSE Insurance Group [UX Case Study]

View the original post

https://medium.com/media/e677893cc6711048c371e7b07c1651cb/hrefThe Company

CSE Insurance Group is a California-based insurance company that offers home and automotive insurance protection to its customers. They specialize in high-level security, innovation and customer-centric service.

The Task

CSE Insurance Group required a platform that would automatically evaluate a user’s records and previous insurance plans, and then offer them the best selection for their home and/or car insurance at a favorable price. They relied too heavily on outdated sales methods and needed to generate more leads and sales through their website which, at the time, was clunky and had an awkward user flow.

The Goal

To create an efficient user experience platform and

Categories
Case Studies

Readings KIDS — A children’s book website with an in-store experience

View the original post

Readings KIDS — A children’s book website with an in-store experience

A UX case study on designing a children book website with a focus on curation, description, and a virtual book-keeper.

Timeline
2 weeks, team of 4

My Role
User and Competitive Research, UX, UI, Branding, Motion Design, User flow, Task Analysis, Information Architecture, Prototyping, and Presentation

Deliverables
1x Website prototype, 1x Client Presentation

*We are not affiliated with Readings in any way, shape or form. This was a conceptual project done as part of further learning with General Assembly*

Case Study Summary 📩What we did

We were approached by Readings, a Melbourne based bookstore, who are seeking to expand their online services with the

Categories
Case Studies

Roar Bikes : UX case study of an E-bike brand concept.

View the original post

Roar Bikes : UX case study of an E-bike brand concept.A mountain bike brand that just got a new mesmerizing online presence, and an exposure to first global impression.What is Roar Bikes?

Roar Bikes is a concept brand, a manufacturer of e-bikes and high performance travel/sports mountain bikes sold exclusively from their website. Currently, roar bikes offer 10 bikes (3 models of e-bikes) to purchase (or to have a free test ride).

The roar bikes are exclusively branded for professional bike riders, or the ones who use the bikes frequently to commute to their workplaces/schools.

This project is actually a class project from the ‘User Experience Design