The design tab is arguably the most influential design club of NITRKL. However, their website experience just did not reflect the iconic reputation of the club.
This is a story of how I helped the Design Tab to achieve its reputation on the web platform.
I led the design of the club's website and also managed the team of developers to bring the website to reality.
As a designer, my responsibility included understanding the club mission, understanding the audience and their needs and using those insights to drive all my design decisions.
I approached my complete project with mobile first approach. This helped me to create fluent user experience for our target audience.
I designed each and every screen with developer in mind. This made it
easy for development team to
implement design.
I deigned the conversation between the website and our users. This helped
us to improve the overall user
experience of the website.
Since its establishment in 2013 Design Tab has been doing excellent work by providing a platform for the budding designers at the institute. They have an excellent team of people from varied creative fields (Graphic Design, Fine Arts, AR/VR, Product Design) working together and supporting beginners to learn these skills.
But within a rapidly changing environment, club failed to build it's strong online presence. They had an old website that has never been touched since it's launch in 2013. Recently the website was rarely being visited by any of the members and failed to convey club's message to their audience. They wanted to redesign it in a way to deliver the club's message to the audience and inspire present club members.
Every project has its own challenges and this one also had its own. I trusted my process and tried to tackle all the challenges in the way. Here is a quick overview of the activities and stages of the project. All of them are discussed in detail in the later sections.
I decided to take a look at the old website to recognize the actual problem. I approached it in two ways, firstly through studying from the prevailing consumer and second by using it myself. With each person I spoke to, I really wanted to be able to understand how they were finding and consuming content on the website.
I studied the old website to find out the problems in the present design. I created the report for my findings shown below,
After studying website I had overall idea about the problems with the website, but before moving further it was very important to understand the expectation of user I am designing for. So I made a user research plan and conducted small research exercise with 6 college students.
In simple language, the persona is a representation of a type of user. Personas answer the question, “Who are we designing for?”. It really helps us in understanding our users and empathize with them so we could design a better solution.
While synthesizing my notes, two mindsets seemed to emerge most frequently. I made two persona for each mindset with their goal and motivations.
I decide to present all the findings from the discovery phase to my team and take their suggestions. This helped us to stay on the same page throughout the project and also set the vision for the project.
Our vision was to create a seamless user experience for both type of a users by providing them a valuable content. And also, increase the revisit rate by giving them the freedom to add, share and like the content.
Based upon the analysis of pain points and understanding user expectations I deep dived into exploring various solutions which will make sense for the user. I studied present patterns for similar kind of solutions to check out all the possibilities. Flow below is a quick efforts of mine to show overall pages in website and elements in it.
After identifying the main 'pain-points' in our scenarios, I defined the primary pathways, our personas would explore through the website. Crafting user journeys for our personas, was the best way to conceptualize and structure the proposed content and functionality. I began to think about particular usage contexts, the opportunities they present and how elements manifesting themselves in the interface would help to support the user. This was a huge time-saver and allowed me to avoid prototyping edge cases.
After identifying the main 'pain-points' in our scenarios, we defined the primary pathways, our personas would explore through the website. Crafting several key user journeys for each of our personas, was the best way to conceptualize and structure the proposed content and functionality. I began to think about particular usage contexts, the opportunities they present and how elements manifesting themselves in the interface would help to support the user. I story-boarded my ideas to help design and communicate more complex interactions and flows. This was a huge time-saver and allowed me to avoid prototyping edge cases.
Finally after finalizing the screens and content I started putting it on a screen. I used Figma to create this wire-frames to define the visual form of the screen and the arrangement of all elements. I started with mobile screens first because I wanted experience on the mobile to as good as other screens as most of the user will use it on mobile.
I started with wireframes to convey my initial ideas to the team. I used Figma for creating them. This helped in the quick iterations of different ideas, saving our time in further stages of design.
My search for inspiration for the design language started soon after the vision for the project was set. Starting early helped me to iterate among different ideas. Hence by the end of wireframe stage, I already had a finalized design language for the project.
For design language, I stressed these words which I gathered from my initial interviews modern design, young, minimalistic, enthusiastic and fresh. Using these words as inspiration I created three stylescapes to decide the look of our website.
Further I refined the wire-frames to create high-fidelity screens. At the end of process I decided to test the designed screens with the same user we had in user research exercise to get their feedback. For this I created a usability testing plan and conducted this small exercise with hi-fidelity screens. Aim of the exercise to validate the new solution I have added to increase user engagement and provide them value for their time.
User were very excited about the learning section and Iridescence section. They liked this ideas and were sure that it will help them in knowing club better. Everything worked well, but the visuals & layout of learning page and team page was not much liked by the users.
I immediately went back to improve them with more cleaner visual design and layout. Ultimately you need to respect users feedback
I further polished the screens to fit it to user expectations. I kept the design minimal for the interface to fit it to taste of maximum number of users.
Previous design was completely lacking the user engagement resulting in to less people engaging with clubs work. Also during my research we found a problem that club member are less active in showing their work.
I solved this problem by created a platform where users can share, like and upload their works. This increased the screen time and returning rate of the users. The upload option is only limited to the club user to make them upload their work frequently and get appreciated from other students
During my research I found that students sometime miss official induction process. The solution this problem is online induction throughout the year.
So now Students can join club anytime during the with out feeling sad about missing induction day. They just have to submit an online form on the website with a sample work. Then if a club like his/her work, they will be called for a direct interview
I tried to provide good website experience to all the user visiting club’s website. Which helped me to focus my attention towards error messages and good feedback messages.
Applying UX writing helped me to create a humanized experience for the user in annoying situations. Such as invalid user message and after submission of the form.
Club goal to spread awareness about the design among the students of NITRKL and help them in learning basics. One of the big opportunity I found in research was that not every student can join club due to limited seats.
These problems were solved by creating a learning page which tells the user about the various tools and resources we used to learn. This helped the club to share our resources with the user helping other students learning design and also us to gain a bigger audience
Increasing number of club member every year was making it difficult in using the old website layout. Present layout made it very difficult to find the particular student.
I tackled this issue by grouping students by the year of their pass-out year. To give more meaning to the page I included the name and contact number of all the present and past members who were the part of this family. This will help members to easily contact the seniors for any kind of help
I started with wireframes to convey my initial ideas to the team. I used Figma for creating them. This helped in the quick iterations of different ideas, saving our time in further stages of design.
After all the hard work we put in to solve problems for providing better experience to users, I am excited to showcase my work.
It took 5 weeks to complete the development-ready design of the project. These five weeks were challenging especially because I had to manage both my college and this project. It was the first time when I was managing the complete project which was the whole other challenging thing for me. But I think I did quite a fair job while managing the team.
The complete project experience was amazing. The most important takeaways from the project were time management, creating empathy for the user and team management.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
I like to meet new people and make new friends.
So go ahead and drop me a message 📧
