Designing Swaplants App : UX Case Study

Designing Swaplants App : UX Case Study

Client: Swaplants

Duration: 1 Months

Role : I was solely responsible for deigning entire project that is App Design for a Website in development

Swaplants is an social media platform for gardening enthusiasts,which will help users in find their dream plants and swap it with their existing plants. Its a handy tool in taking care of our plants through community blogs, a complete encyclo-wiki with more than 3000 plants, a video platform and an online marketplace for garden essentials with automated and personalized suggestions . Let’s take a close view on the design journey of this app.

Best thing about plants swaps is that we don’t always have to give away our plant, we can share cuttings and seeds.(Now two happy plant owners )

Following were the objectives laid by my client :

1. A plant swap feature where we can swap our plants to our dream plants with someone nearby (geographically)
2. Most of the time we get a beautiful plant but don’t know how to take care of it, swaplant community shares experiences and plant specific guides,for new plant owner.
3. Swaplants wiki is a complete guide about plants.
4. A plant specific video platform with three categories of videos (Tuto, Reportage, Documentary)
5. An online marketplace for everything related to plants(pots, composts,soil etc). (everyone can buy and sell)

Our Aim

I aimed to design a responsive and easily adaptable app for the community that fulfilled all the objectives in the best possible manner and is easy to understand and use.

Design Process

Our design process was as follows:

• Research: Background research about the domain. Create a brief report . Also get more knowledge about existing similar projects, their process, and the challenges they face.
• Defining Users: Based on the understanding of product and research results,will create Persona, Empathy Map and Project Goals.
• Information Architecture: Create Information Architecture that can solve the problem identified in the User Research & Project Scope.
• Wire frames: Craft wire frames of the app/website.
• Visual Design: Define branding and design visual solutions based on wire frames.
• Prototype: Build an interactive prototype of the application (using Figma) which meets user cases as identified during research.
• Usability Testing: Test the new designs and existing on boarding flow with potential users and get their feedback. Update the wire frames based on the user’s feedback.
• Final Design: Create the final Design.

Understanding Our Users

An interview guide was prepared with a relevant set of questions.

Subsequently, a detailed report on interview findings was prepared.

Understanding Competitors

Competition analysis is most important feature from business as well as user experience perspective.

Business Objective

By designing Swaplant app,it is expected to focus on following business matrices:

• Increase in number of Daily Active Users (DAU)
• Increase in Average Session Length of Users
• Number of swapping/month
• Customer feedback

Persona

Based on user research I created following persona to bring more focused Outcomes :

Empathy Mapping

The empathy map was also designed to further define the user :

Story boarding

At this point the project and it’s needs were clear. I sketched some storyboards as follows :

Project Goals

Post the research phase it was time to define the project goal and focus. Defined as follows:

1. To make most of the unnecessary decisions automated and to give useful choices to users at any point in the app, minimize distractions through interface design so that a person can focus on task itself also removing the unnecessary buttons or compacting buttons if possible.
2. To take advantage of the sensors and camera available in the device and introduce new features for app.
3. Design the app to become a handy swap + information cum e-commerce tool for someone who wants to own plants and take care of it.
4. I wanted the interface should be friendly to all user irrespective of their age, education, left/right handed priority, color - blindness.

Information Architecture- The Core of Design

The information architecture was inclusive of that of the website but it also had some exclusive features taking advantage of the sensors and camera available n the device. (such as camera as scanner)

User flow diagram

After definition of information architecture, the user flow or backbone of the design was designed.

User Interaction Journey

The user interaction journey was designed alongside user flow diagram for better clarification:

Paper prototyping

Now some ideas started taking shape, which I sketched roughly as paper prototype.

Design System

Hi- Fidelity Wireframes

1. Feed

What must a plant lover’s feed look like and what are the different elements that must be there?

After a session of card sorting following screen was finally designed…..

2. Log in Experience

The Log in experience was designed analogous to login experience of the the web to create a familiar welcoming feel for new app user

2. Swapping Experience

We can find plants to swap in two ways-

1. Adding plant to the wish-list, we’ll be notified is the plant is available for swap nearby.
2. Browsing plants available to swap nearby and selecting one to swap.

In user interview most of the plant lovers complained that it would be nice if they get to know the plant specifications before owning the plant.

Hence I added a plant description with all the necessary details that will be asked from existing user and displayed for future owner to created a much satisfaction on both ends as well as for us.

3. Messaging Experience

The messaging section contains lots of ready made templates like add location , add time etc for smoother,faster and effortless “swap chats”.

But we can always opt simple generic chat experience.

4. User Profile

“Every user would have a different Swaplants experience”, said Raisaa Ayaan ,the founder of Swaplant.

Someone would share pictures of their plants, someone will host swaps, someone will be a video content creator, someone will be an expert other will be a newbie.

Every story will be worn with pride with different Swaplants badges.

5. Plant Wikipedia Experience

6. SpTV Experience

There are three different sections of video media

1. Tuto: Short videos for sharing tips, recipes etc.
2. Documentary: Documentary are long videos.
3. Reportage: Reportage are medium sized videos for reporting news by the press and the broadcasting media

Complete Prototype

Here is the final complete working prototype of the project. Please find the clickable hotspots

What’s Next

In this case study, with the insights from thorough research, I designed the app to provide a personalized experience to the users. I have also defined the basic journeys. The next step would be to explore the remaining user journeys such as blog writing,users nearby and SpTV.

Learning

Working with projects like Swaplants was a beautiful journey , being an organic non commercial social media platform that connects humans to humans and with nature. The design and definition challenged me everyday to be better version of myself as a designer.

It open new insights for me as a human being too reconnecting me to nature, as I got involved in the project, I was inspired for some gardening myself. Here’s a picture.

Thank you for joining me in the User Experience Design journey of swaplants today.

Let’s connect on LinkedIn or Email me for any feedback and suggestions.

Designing Swaplants App : UX Case Study was originally published in DETAUX (Designers Talks) on Medium, where people are continuing the conversation by highlighting and responding to this story.