My Role
Responsibilities
As the lead Product Designer, my responsibilities encompassed the entire design lifecycle from user research to visual design and user experience.
Collaboration
Collaboration was vital in creating a cohesive and successful product. I worked closely with developers, product managers, and content creators.
The Project
Problem statement
Our primary challenge in this project was the ongoing improvement of our dashboard's design. However, our initial design proved to be a hindrance in encouraging users to utilize our dashboard and services effectively. Consequently, we decided to revamp our website to provide the marketing team with a more compelling tool for promoting our platform.
Project Goal
Our objective in this project was to provide valuable assistance to the marketing team and lay the foundation for future SEO efforts to attract a more extensive customer base. Simultaneously, we aimed to craft our landing page in a manner that would strongly appeal to users.
Market Research's
During our market research, we thoroughly assessed our competitors, evaluating them based on factors such as:
Sitemap
Information Architecture
UX writing
UI design
Business plans
SEO strategies
Brain Storming
Idea
After a thorough market analysis, we decided to document our ideas on sticky in Figjam for design and development.
User Persona
persona
Subsequently, we leveraged User Personas to establish clear objectives in this direction. We confidently proceeded with the remaining methods and strategies with these defined goals as our foundation.
Sitemap
Based on our comprehensive research and the well-defined persona we had established, we strategically chose to create the sitemap for our website. This sitemap encompassed several pages in the initial version, aligning with our carefully considered approach to website development.
Indeed, it's not uncommon for a sitemap to undergo revisions throughout a project. However, I can confidently share the final version of the sitemap with you.
Wireframe
With the well-defined persona we had crafted and our finalized sitemap as our guide, we embarked on the critical phase of creating wireframes. This meticulous wireframing allowed us to gain an initial perspective of the website's layout and promptly address any issues, thereby minimizing potential time wastage in the future.
Our concentrated efforts were dedicated to wireframe design, followed by the meticulous composition of text content. This methodical approach ensured that our website would be well-structured and effectively convey our message to users.
Note: You are seeing the final version of the wireframe, and the iterations are not included in the master case
Review User Experience design with stackholder
Following these extensive research efforts, we convened a team meeting to effectively convey all the gathered data and design decisions. This collaborative session
provided an opportunity for our team to share their valuable suggestions and ideas, fostering a creative and productive exchange of insights.
Color Palate
We expanded upon the original Lego color palette during this phase by introducing additional hues. This strategic move enabled us to diversify our color choices for different components while maintaining a cohesive and harmonious overall design aesthetic.
Typography & Grid system
In line with our design vision, we dedicated substantial effort to identifying a font that excelled in presentation and readability. Consequently, in this phase, we confidently selected the Manrop font, which proved optimal due to its excellent readability and strong display capabilities.
Our chosen system grid closely aligns with the Bootstrap system grid, incorporating 12 columns for web layouts, 8 for tablet layouts, and 4 for phone layouts. This grid structure was selected confidently to ensure consistency and adaptability across various devices.
UI design
Creating a UI design for a SaaS company involves understanding the product, conducting user research, and designing with responsiveness and accessibility in mind. Consistency, collaboration, and user testing are crucial for a seamless user experience. Regular updates and alignment with business goals ensure the design remains competitive and user-centric.
My inspiration for the design and collection on the Figma:
Mobbin
Dribbble
Behance
Pinterest
Research
Figma component to Webflow
In Figma, we meticulously structured all our elements by frame guidelines, and we transformed repetitive elements found across multiple pages into components. This strategic decision aimed to optimize our workflow and save valuable time. Following the same efficient approach, we replicated these practices in Webflow for even faster development.
Illustration
Based on the extensive research conducted in the initial phase, we identified a user preference for visual content over textual information. In response to this insight, we confidently opted to prioritize the creation of high-quality posters and illustrations to effectively engage our audience.
Our illustration design process unfolded in several stages. Initially, we created a paper wireframe to outline the concept and convey the model's explanation. Following this, we developed a simplified version to gather project stakeholders' feedback. Subsequently, we meticulously crafted the final design with intricate details, producing a polished and high-quality illustration.
UI Design
Creating a UI design for a SaaS company involves understanding the product, conducting user research, and designing with responsiveness and accessibility in mind. Consistency, collaboration, and user testing are crucial for a seamless user experience. Regular updates and alignment with business goals ensure the design remains competitive and user-centric.
Why we used Webflow for development Landing page?
As the technical team at the company embarked on updating the dashboard, and with my design work completed, I recognized the urgency of implementing the website landing page. In a proactive move to support my teammates and drive business growth, I voluntarily offered assistance, aligning my efforts with our collective goals.
SEO plan
Our initial step involved examining the SEO strategies employed by competitors in our industry. Following a comprehensive assessment of competitors outside our immediate sphere, it became evident that we could optimize our approach. By designing a template and replicating it within our features section, we aimed to significantly enhance our Google ranking, attracting a larger customer base as a result. This strategic move was executed with confidence in its potential for success.
How we find this idealan
This idea was conceived by the product manager of our team, drawing inspiration from the successful implementation on the OpenPhone website, demonstrating our confidence in its potential for growth.
Structure & responsive Design with breakpoint
Initially, we developed the structural elements of our website without incorporating any intricate animations or interactions. At this juncture, ensuring seamless functionality across various platforms, including tablets and phones, was crucial, accommodating users accessing our site through these devices. To streamline the testing phase and provide a user-friendly experience, we confidently introduced breakpoints tailored for smaller screens, facilitating a practical design and testing process.
Simple animation
I create simple animation for better experience used our website
Custom code
During a specific phase of our design, it became evident that a portion of the project required a logical implementation. Recognizing my own limitations in JavaScript programming, I confidently sought the expertise of my colleague, Farzan, to assist in completing this aspect. This collaborative effort ensured a successful outcome.
Integration we used on Webflow
Our imperative was establishing a connection with the HubSpot platform and seamlessly transmitting our data there. This strategic integration empowered our marketing and sales teams with immediate access to the data, enabling prompt follow-up via calls or emails. We confidently approached this task, knowing it would enhance our efficiency and communication with potential leads.
Check list published
In the final step, we meticulously crafted a website publishing checklist, which I will employ to ensure nothing is overlooked, and conduct a thorough double-check before launch.
Thanks for watching
Hassanrhn1378@gmail.com
