Resume
Hello
Stamurai - case study
Boosting Conversion Rates and User Engagement with Design
In this Case Study, I'll be sharing my detailed process and rationale behind the decisions I made in redesigning the Landing Page of Stamurai, and ultimately increasing the conversion rate and user engagement.
Ok, so first of all, what is Stamurai ?
Stamurai is a speech therapy app that intends to help people who stutter or stammer, learn and practice speech therapy.
Why redesign ?
To answer this question, let's take a look at the Old landing page design.
The old design wasn’t doing well in terms of making sales or in convincing users to download the app.
The website had an extremely high bounce rate of nearly 85% with an exceedingly low conversion rate.
But what was the reason for that?
In order to find the answers, I started my research by going through the customer feedback that the app received from their social media platforms and also through the app reviews on PlayStore.
Discovered a common thread among the feedback it received.
And here are some of the main ones :
  • Users wanted a free trial / asked if there was a free trial.
  • The app seemed to them to be on the expensive side.
  • They had questions and concerns regarding the process of speech therapy the app used.
  • The majority of users didn't find the website helpful.
  • Complains about not being able to access the website via a mobile device. (Website was not mobile responsive, and instead prompted a separate page inviting mobile users to download the app from PlayStore)
  • Users wanted to know more about the app features.
  • A lot of users felt that the website looked shady and cheap, and hence were hesitant about its legitimacy.
Competitive analysis
Did a competitive analysis and tried to find out what they were doing better.
Hopped onto the actual Stamurai app and decided to try it out for myself and get to know how it actually works. Considering how other platforms work, and how it is different.
Key things that I realized after my research, were :
  • The need for branding and personality
    Brand personality is important for strengthening a brand, creating loyal consumers, and diversifying from its competition. It also helps with streamlining communication with customers.
  • The need for proof
    Since a lot of users were hesitant to trust Stamurai, we needed to find a way to convince them that they could trust us.
  • The need for information
    We need to talk more about our product, and the way it functions.
Brand personality
While I was using the app, I realized that Stamurai is not only a speech trainer but also a safe-haven for all its users, as it provides them a community.
And so, I felt the need for a congruent color palette to express this welcoming atmosphere.
Chose this warm orange color as the primary brand color to show the welcoming and encouraging nature that Stamurai has to all of its users as part of its mission to help people successfully overcome stammering.
And for the typeface, I chose Poppins, a simple geometric Sans Serif font, that matches with our intent of modern visual appeal with a slight twist of tech.
Direction
When we create landing pages for products or apps, we prefer to showcase the product first and foremost. Though Stamurai was also an app, it was more of a service that it was offering to its users.
So, after discussing it with the PM, we decided to show the outcome of the product as the hero element on the landing page.
But now, how can we do that?
In order to keep the friendly welcoming aspect of the brand, we decided to use playful illustrations representing our concept of communicating an 'outcome'.
We brainstormed a few ideas and whittled them down to 3 of those options.
  • A scene related to public speaking
  • A scene showing a couple on a date
  • A scene related to a group at a conference
Gaining Trust
After setting the brand personality, it is time to move on to the next big problem - Gaining the trust of users / visitors.
Stamurai has been featured and endorsed in multiple newspapers, online magazines, and media.
So, why not use it as social proof?
Although we\'ve got some complaints and issues from our users, but we do have some extremely happy customers too with super positive feedbacks on PlayStore.
So, why don't we add them to the website itself?
This will surely help to reduce the doubts regarding the product's legitimacy.
Information
Yes, now the third part - Talking more about the product, by providing valuable information about it to our users/visitors.
So, let's get back to the problems again.
  • Users had doubts and questions about the product
    And now, how can we solve that?
    Let the team answer some of the questions that are both commonly asked and are important, and we can put them into a FAQ section.
    What if a user does not find their question in the FAQ section, and they still have some doubts?
    We can have a live chat option, where we can solve those doubts or issues.
  • Users wanted to know more about the Product's features
    And so, how can we solve that?
    There are quite a lot of features, and adding all of them to the homepage might make the landing page super lengthy and cluttered.
    So, let's have a section with a preview of some of the features, and we can give the users an option to deep dive into the details, by directing them to a dedicated page for all the app features.
  • Users had concerns about the therapy process too
    So, ya let's go and solve this too.
    Had a quick chat with the PM to know about the process myself, and realized that it definitely needs a dedicated page too. So, let's have a 'How it works' section, with an option to read more about the therapy protocol on a separate page.
The product team has decided to have a blog running alongside their site, to raise awareness about the issues regarding stammering & stuttering.
This will drive engagement with users on a regular basis too.
So we will add a section with previews of some blogs, and likewise an option to jump over to the blogs directly from the Landing page.
After taking notes from 'Gaining Trust', and tackling issues related to the Information, here's what the new Information Architecture (IA) of the website looks like.
Let's start designing
So, I started off with wireframes and designed a basic layout for the landing page design with respect to the IA we already created.
Created some wireframes for mobile & tablet screens as well.
So, now time to add styling to this layout.
Will be adding the colors and font styles, as well as the illustrations we discussed in Brand Personality and Direction section.
Decided to add some visual elements, so started sketching some geometric icon shapes with a playful style.
This is what they have turned out to be.
Will be using these elements as icons in some section, and also to maintain a visual balance throughout the composition.
So, here comes the first iteration for the Landing page's Hero section.
I remember giving him a complicated brief in just a Word document, and seeing a near perfect design 4 days later! No back and forth involved.
- Meet Singhal (Co-founder of Stamurai)
Used the same design direction, and completed the Landing page. Here comes the full design.
Now, let me walk you through all the designs of each section.
  • Hero section
    • Secondary CTA that opens the Blog page.
    • Live chat option.
    • A panel showcasing the logos of companies and brands that have featured and endorsed Stamurai.
    • Primary CTA for Downloading the app.
    • Reorganized menu, that links to different sections of the landing page.
    • Design elements used to bring visual balance to the composition.
    Do you recall the 'outcome' illustrations, that we had a plan for the hero section?
    Here are the 3 finalized illustrations for that.
    Decided to show all the illustrations in a slideshow, along with a separate heading copy for each of the hero screens.
    And, here's how it looks like:
  • 'How it Works' section
    • Using a sub-title over the main Heading copy, to emphasize the content of each section.
    • Secondary CTA that opens the dedicated page for Therapy Protocol.
    • Following the same design direction for the illustrations.
    • Used those design elements as icons for categorizing.
  • 'Features' section
    • Created a placeholder for showing the features in the app screen itself. (A separate team was working on the app)
    • Secondary CTA that opens the dedicated page for Features.
  • 'FAQ' section
    • Simple drop-down for frequently asked questions.
    • Showing the answer to a question.
  • 'Reviews' section
    • User reviews of the app from Playstore.
    • A draggable horizontal section containing the user reviews.
  • 'You are in a great Company' section
    • Added more emphasis to the quote.
    • Redesigned the profile presentation of the celebrities who stutter.
  • 'About us' & 'Blog' sections
    • Secondary CTA that opens the dedicated page for About us.
    • Showing the latest blog in a preview, along with a link to read the full blog, with reading time included as well.
    • Showing a few more blogs raising awareness about myths related to stammering and stuttering.
  • Footer section
    • Contact details with social media links.
    • Categorizing the whole sitemap into the 'Company', 'Product', and 'Security' columns.
    • Adding both the links to Google Playstore and Apple Appstore. (The dev team started working on the iOS app)
My role
UI / UX Designer
timeline
Apr 2020 - Jul 2020
12 weeks
tools
Adobe XD, After Effects, Illustrator, Protopie, Zeplin, Notion
contents
What is Stamurai ?
Why redesign?
Research & Breakdown
Brand Personality
Gaining Trust
Information
Designs
Conclusion
© druh.in 2020-21
Location
Kolkata, India
Remote - Worldwide