Groflex - SaaS Website
Sudha Rachel
UX/UI Design Intern
grofleX is a cloud-based software founded in 2022 that enables businesses to create and manage their invoices quickly and easily. It simplifies the invoicing process and helps businesses get paid faster.
I worked at Groflex as a UXUI design intern, towards expanding and enhancing their website. I was a part of the marketing team and collaborated with content writers, illustrators, and stakeholders for this project.
Project Duration: 15th May, 2023 - 15th July 2023
Check out the links below to skip sections -
Challenge, Solution and Vision
CHALLENGE: Revitalizing Growth at Grow Flex: A Strategic Website Transformation
As Grow Flex continues its trajectory of expansion and innovation, marked by the introduction of dynamic features such as ledgers, balance sheets, cash flow analysis, and profit and loss statements, the evolution of our online presence became paramount. In the context of a competitive landscape, where formidable counterparts like Wave, Odoo, and Zoho set high benchmarks, we recognized the imperative for an updated and invigorated website design.
Informed by an exhaustive analysis of our competitors and guided by the feedback of our valued clientele, we embarked on a journey to craft a renewed digital façade. This endeavor saw the formulation of a clean, minimalist design ethos—elegant simplicity that stands as a testament to our commitment to user-centric aesthetics.
An integral aspect of this transformation was the technical refinement to ensure our vision materialized as intended. Recognizing the challenges of scaling our mockups, we addressed this intricacy to guarantee the seamless translation of design into practice
SOLUTION:
1) Simplify the Design:
-
Remove unnecessary clutter and distractions, focusing on essential elements.
-
Emphasize a minimalist approach to enhance user comprehension and engagement.
2) Clear Navigation:
-
Implemented a clear and intuitive navigation structure to guide users through the website effortlessly.
-
Utilized recognizable icons and labels to enhance the user's understanding of navigation options.
3) Responsive Design:
-
Ensure the website's design is responsive and adaptable to various screen sizes and devices.
-
Prioritized a seamless user experience regardless of the device being used to access the site.
4) User Testing:
-
Collaborate with a diverse group of users to identify pain points and areas for improvement.
-
Use feedback from user testing to refine the design and address any usability concerns effectively.
VISION: Build high quality marketing website for startup company with no revenue on low budget that supports the growing product and helps increase conversions and improve the user experience
Colours and Typography
Illustration Kit
To save time the decision was made to use an already existing illustration kit. The selected kit was uploaded by Upklyak on Freepik.com. The colors although were changed to groflex's color palette.
Icon Kit
To save time where possible, a rounded icon kit called "Basicons" from Figma community was chosen with a ratio of 25x25px size and 1.5px line thickness. This kit was free for commercial use.
Research
Through in-depth analysis of both competitors and industry landscapes, we uncovered a recurring trend: successful platforms boasted a coherent, comprehensible layout embellished with strategic pops of color. Yet, we also identified a crucial gap—some faltered in establishing a compelling hierarchy and alluring design. This realization propelled us towards embracing a minimalist ideology, underscored by a meticulously balanced color palette.
Our approach sets us apart from competitors, injecting a breath of fresh, distinctive aesthetics. As we juxtapose the new design against its predecessor, the transformation is striking. Navigation becomes intuitive, comprehension clearer, and engagement more profound. This metamorphosis was driven by the creation of captivating illustrations and icons, all harmoniously rendered in our brand's defining colors: the steadfast blue and vibrant green that constitute our primary palette.
Regenerate
Design Process
-
As I joined Midway through the project my main focus was on updating the feature landing pages as requested by the stake holders.
-
It was important to determine how many pages were needed.
-
After this we came up with a main landing page style that could be used for different landing pages depending on the specific information for each of them.
-
Another main change to be made was to resize the phones design on every page of the website as it was designed for the size of an iPad mini instead of a phone.
-
So after designing the skeleton structure of the features landing page for various sizes, sub feature pages were also designed.
-
After finishing the main designs we proceeded to work on GIFs animations and mockups
-
A desktop first approach was taken as the website was going to be highly interactive
Sticker sheet I designed to promote groflex's new android app
What I have learned from this project
Participating in the growth journey of Grow Flex as an integral member of the Marketing Team has been an immense honor. Leading the charge to revamp their website has been a rewarding experience that transcended mere work; it was about fostering global collaborations and savoring every moment of the process.
This endeavor proved to be an invaluable learning ground, enriched with lessons that extended beyond the technical realm:
-
Championing initiative-taking and proactivity
-
Excelling in remote teamwork, transcending geographical boundaries
-
Navigating and honoring tight deadlines
-
Elevating communication skills while adeptly presenting my contributions
-
Evolving into a more organized and responsible professional
This journey with Grow Flex's Marketing Team has etched an indelible mark on my growth trajectory. The opportunity to engage in such impactful projects fuels my enthusiasm, and I eagerly anticipate the prospect of contributing to future endeavors of similar significance.
