What is SkillTally?
SkillTally is an EdTech Startup based out of India which provides skill-assessments that are enjoyable as well as enriching and enable skill-building through skill-testing. It believes that one's skills are improved only when one knows where his/her gaps are & to find those gaps you need to test. SkillTally is the platform which will provide you those tests so that you keep upskilling.
Disclaimer
This project was done during my Product Design internship at SkillTally.
Overview 👁
My task was to design a landing page and other related pages for SkillTally, which will be used for marketing and user acquisition.
Goals 🎯
The primary goal of the Landing Page is to showcase the details of the Main product - SkillTally
The Design Process 📃
My strategy for resolving this Visual Design problem was simple and direct.
User personas 👥
The user research conducted by the business research team provided me with the necessary data to create user personas. This was incredibly helpful, as it enabled me to understand the demographics and needs & goals of the people who would visit and whom I should target.
As there are a lot of different types of users whom we are targeting, we created sub-landing pages targeting certain users which we call as product pages
Exploration 🔮
After looking into what I wanted for the Landing Page, I researched other similar Pages to compare and analyze them.
I referred to
Landingfolio,
Dribbble and other competitors and companies in the Ed-Tech space for my research.
Landing page & Sub-Landing (product) page structure
Sitemap 🗺️
After understanding the requirements and goals of the complete project, and after some iterations and feedback rounds, I finalized on the sitemap.
Ideation & wireframing💡
I had all the facts and details arranged and sorted according to importance. The next step was to arrange the information in an organized manner that would allow viewers to scroll through it easily and absorb the content.
I decided to have a seperate page for FAQs as there are quite a lot of FAQs targeted for different types of users
I created a template for the sub-landing pages of different users which we call as product pages
Wireframe iterations for the main landing page
Wireframe iterations for the sub-landing (product) page
Branding & Style Guide
Colors 🎨
The blue color was chosen to display trust and professionalism
Green color was chosen to display growth and education/skill development
The brand colors are bright and the theme of the webpage is light so as to give the user a positive and bright feel about our product.
Logos ✨
The logos say for themselves, the have the message of measure to lead & happiness hidden in them.
Typography 🅰️
Satoshi is a elegant and modern sans serif font, which is very legible and readable. It even has multilingual support which could be useful for increasing accessibility to the website.
Typeface
Visual Design ✨
Main landing page
For the landing page design, my focus was to create a visually appealing and user-friendly experience. To ensure a seamless user experience, I designed the page with mobile responsiveness in mind. I wanted to create a modern and minimalistic look that would be both aesthetically pleasing and easy to navigate.
All of these design components worked together to create an inviting and easy-to-navigate landing page.
Product pages
For the product pages, I refined the design and made sure it was intuitive and met the needs of the target audience. The final result was a landing page that was not only beautiful, but also provided a seamless user experience.
Animation in Questions section working on-scroll
A glimpse of all product pages
Other pages
In addition to the landing page, I also designed several other crucial pages for the website, including the Contact Us, FAQ, Legal, Navbar/Menu.
The Contact Us page was designed with a clear and simple form that makes it easy for users to reach out to the company with any questions or concerns.
The FAQ page provides answers to common questions in an organized and accessible manner, making it easier for any type of user to find the information they need quickly.
The About Us page serves as the landing page for the careers page and provides an overview of the company's mission, values, and goals. It also includes information about the team, mission and vision, allowing visitors to learn more about the company and its offerings. By having a thorough and accessible About Us page, users can easily navigate to the Careers page and find out about potential job opportunities in SkillTally.
The Legal pages includes all necessary legal information and terms of service, ensuring that the website is fully compliant with regulations. Overall, these pages are an essential part of the website and play a critical role in providing a seamless and enjoyable user experience.
I also designed the mobile versions of these pages. Given the increasing number of users who access websites on their mobile devices, it was crucial to ensure that these pages provided a seamless and optimized experience on smaller screens.
The figma mobile app helped me a lot to visualize how the website would look on a mobile screen.
I refined the design and made sure that the mobile pages provided the same level of functionality and user experience as their desktop counterparts. The final result was a mobile-optimized website that provided a seamless and enjoyable experience for users, regardless of the device they used to access the site.
The landing page and other pages in mobile view
Juicy Behind The Scenes
In the process of designing the pages for the website, I received extensive feedback from various stakeholders, including users, engineers, business owner, and other designers. This feedback was critical in shaping the final designs and ensuring that the pages met the needs and expectations of all parties involved. I took the feedback into account and made several iterations to the designs, incorporating changes based on the suggestions and critiques received.
Aerial view of the desktop-v2 page in figma filled with comments to work on or feel proud of.
Prototype 🌈
All UI screens are prototyped within Figma. We also used Zeplin to deploy design assets and screens as developers were comfortable with that tool.
Learnings & Takeaways ✍️
Through this project, I learned the critical importance of adhering to deadlines and how to structure my work well. Without clear deadlines it could have taken much longer. So I broke down the task into manageable parts,made checklists ✅ and worked on them in order to achieve completion before the due date.
I learned the art of receiving feedback from left right & center and using it to make iterations and improve designs.
I learned how design landing pages effectively and use visual design skills to engage with the user and grab his attention to inform him/her about us.
I had a great time working on this project, as it let me hone my skills in designing a visual style that accurately reflects the brand identity.
SkillTally® and measure to lead® are registered trademarks
.gif)
