UIUX Design Case Study: Figr Website Redesign
What’s so unique about Figr? 🤔
Figr is a platform that uses AI to design User interfaces. (If you’ve ever heard of or used UIazrd, Relume, or Framer you’d love to hear about Figr, trust me!)
Figr powered by AI, lets you brainstorm, ideate, and design UI for your products. Not only that, if you’ve used Mobbin or Refero for taking real-world UI inspiration then you’ll love Flash UI, which is a sub-product by Figr. Just like Mobbin, you can take inspiration but Figr goes further than that and lets you copy-paste the design of the screen you like in Figma which is fully editable. You can try Flash UI here.
Now that I have your attention let’s dig into it!
I redesigned Figr’s website as one of my initial tasks at the company. The Project goal was to increase accessibility for the users, improve user experience, optimize the pricing page, reduce bounce rate, increase customer retention, and finally showcase all the products with their due importance. Our target audience included UIUX designers, Product Designers, Freelance designers, and Students.
Team
Challenges
Despite its remarkable product, Figr faced a lower conversion rate, high bounce-off rate, lack of information hierarchy, visual aesthetics, non-cohesive design system, and poor content structure.
The solution: a website redesign
The primary objective was to create a cohesive system capable of representing diverse Products, including Lookr, Flash UI, Prokit, and Identity.
Moreover, the redesign aimed to deliver a polished and professional website that showcased the brand’s personality facilitated an understanding of the company’s value, and offered a positive user experience.
Heuristic Analysis of the Current Website
I jumped right in and took a very thorough look at their current website and evaluated it to see which parts of the website were hard to understand and use.
As I went through the website, I realized there were multiple opportunities in plain sight. Starting from non legible text to poor visual hierarchy. We dived deep into finding user pain point.
User pain points
- Text on the website was not legible and accessible to people with poor eyesight
- Animations were too quick for users to comprehend what was being advertised.
- UX copy did not explain the product properly.
- The website was non-responsive to different screen sizes.
- Search results of Flash UI were not optimized.
- Navigation was too complex to be understood.
- Functional problems like horizontal scroll didn’t work properly.
- The design system was not cohesive.
The site was built to sell one product initially i.e. website templates, new information that came in later, had no real place and pages were added just to accommodate the new information instead of strategically putting it in the right place. This cluttered the design and overloaded users with too much information. I proposed that we look into our user base and then design according to their needs.
Who is our User?
Our users were Product designers, UIUX designers, Freelance designers, and students who were looking for editable inspiration. Our user base was almost the same as Refero and UI Garage. People who were looking for UI inspiration for their projects.
Figr went one step further and made UI inspiration snapshots into editable designs that could be copied and altered as per the user’s requirement. This is a massive leap ahead when it comes to designers who want to design better and faster. Figr made templates of screens of popular apps like Airbnb, Twitter, Instagram, and websites like Apple.
After analyzing our survey and looking at our user profiles it was clear that users need a website that is clean in design and clear in its offering. 93% of users who copy-paste our designs came back to explore more templates on the website.
Cmd C and Cmd V were our clear hook for users. It was simple, easy and fast.
Our Approach
We decided to monitor user behavior on our website using Microsoft Clarity. We followed the 38 longest user sessions on our website We found that there are instances of a high number of dead clicks and bounce rates on certain pages. People simply didn’t know where to click and how to move forward.
Also, there were functional issues when users couldn’t copy a template so rage clicks were high. We closely monitored which pages had issues and which apps and website templates did not respond.
Without further ado, as our homework that night, we garnered data and organized it in the Excel sheet. As there was sensitive information in these pictures, I did not get a green flag from the owner to show you. (Sorry 🤷♀️🙏)
With all the information in our hands, we decided to organize and group features based on their affinities. This eventually became our building block for the website redesign.
In our design process, we scrutinized each section and tackled the most problematic ones first. I one by one explain below the most significant problems and solutions.
Due to time and budget constraints, we checked the exisiting site map and realised that it fine so we made mid-fidelity designs for each section.
We tested our design by closely monitoring user behaviour and iterated .
Hero section
In our research on user behavior, we found out users were skeptical about whether the design is editable in Figma or not. Therefore, users would first check a few designs by copy-pasting and then again in a few minutes come back to check out more designs. Hence, we made the hero section interactive, from the hero section itself user can copy and paste the editable design. It gave the user an ‘Aha’ moment within a few seconds after discovering our website. This change added earned trust, therefore user engagement increased by 68%. Additionally, the session duration of new customers increased by 16%.
Social Proof and CTAs
Since Figr is a startup we decided to add our awards below the hero section and after that another prompt to try out the popular templates.
After launching all the web apps, we ran a survey amongst are active users we asked them:
‘’ What kind of UI templates do you want us to launch next? ’’
80% of the survey takers answered that they needed Mobile UI templates. Therefore, we rationalized that Mobile UI templates are more in demand. Hence, we should showcase them first on our landing page. This resulted in the popularity of our website. Organic traffic post-launch on Product Hunt increased by 40%. This also reduced confusion among users, they could now discover templates faster. This was a clear win.
We got a lot of shout-outs from industry experts and popular designers on social media. The most popular handles were ux_dyniza,ux.by.felix, digitalsamaritan and more.
After structuring the landing page we moved forward to redesign internal pages. check out the landing page here.
Template display
We cleaned the display page of the template. We used a clear CTA on the top right to make it unmissable by the users. Earlier there were multiple CTA and there was an information hierarchy. By doing this noticed a drop in dead click and bounce rate.
Autopilot to Lookr
We rebranded Autopilot which was used for AI recommendation of screens into Lookr. “Lookr’’ short for Looker helped users get specific screen recommendation
Furthermore, we simplified the process of searching into 3 major steps.
First, Choose the kind of UI you're looking for:
a. Mobile Apps
b. Websites & Landing Pages
c. WebApps & Saas ProductsSecond, Select a sector/category for your product from various prompts or search by entering,
Third, add specifications and Voila, There you have all the screens you’d want.
Search result optimization
To optimize search results we trained our model on UI patterns and themes. We analyzed thousands of search queries and realized that people were not only looking for screens but also some specific components like an Audio player. We researched the most recurrent UI patterns and themes and added them to our Excel sheet.
Unfortunately, we had to tag thousands of screens manually, because our makeshift automating tool didn’t tag screens accurately. It was boring but we persevered. 😒😁❤️
Pricing Page
The pricing page is the most important page for any business. It is here we find out whether all the hard work is going to get paid or not. We made the pricing page minimal and without any distractions. We showcased all our products, added one one-time fee, and removed monthly and yearly plans as it was important at this stage to acquire a user base more than acquiring their money.
We did content restructuring and laid a paywall at the top following the best features, social proofs, and FAQs at the bottom.
Conclusion
Post-launch results made us realize that each step we took was in the right direction. We were ranked number 1 for the User Experience and ranked 2 for the Product of the Day and Design Tools category.
