Overview
Role
Tools
Team
Indian Institute of Technology-Bombay began a redesign and re-branding of its entire website with the vision of improving the user experience and acquiring more users for their product.
The goal of this particular project was to identify and improve any usability issues with the existing website and to make it look aesthetically appealing. We wanted this website to act as a brochure for the SAFE application.
Research
Facilitator
User Flow
Illustration
Prototyping
Testing
Motion Design
Adobe XD
Figma
Adobe Illustrator
Adobe Photoshop
Adobe Animate
Miro
Trello
Srushti Kale: Entire website design from research to conception, visualization, prototyping and testing.
Shantanu Fadnis: Entire web development.
Special thanks – Palash Jain.
Duration
Research – 8 weeks
Prototyping – 5 weeks
Background
SAFE is an online platform to effectively achieve the goal of a simple, reliable, and efficient setup for examination. SAFE also offers the feature to conduct polls and surveys, online correction of regular subjective exams, and providing instant feedback. I was the sole designer in the team alongside a business analyst and a developer. I was responsible for the end-to-end UX/UI designing. I've been extremely fortunate to get an opportunity to work for one of the most prestigious institutions in India and have personally grown tremendously during this project.
The Challenge
My mother is a teacher, and I fully understand the pain points of a teacher to muddle through the emerging integration of technology in teaching.
SAFE is a smart app, and it calls for a website with state-of-art user experience. Concerning this, the challenge here was to create an efficient, easy to use, desirable, professional, and aesthetically appealing website aiming to increase the number of users for the app from other institutions and organizations.
Understanding the Problem
Analytics
As this was a pre-existing website, I used analytics to determine the user's age and gender. It helped me in selecting the right group of people for conducting research interviews.
Qualitative Interviews
I conducted semi-structured interviews of professionals who are teachers and managers of the age group ranging from 25-59 years to understand their concerns regarding conducting quizzes, polls, managing data over digital and non-digital platforms.
Semi-Structured Interview Process:
First, I gave users a questionnaire using google forms, and then I did one-on-one interviews over call to learn about their concerns and understand their pain points.
Gathering Insights
People often find taking exams, conducting quizzes and polls quite tedious and boring.
Even if they are aware of the SAFE application, they find it difficult to understand and hence complex to use.
Most of them find it hard to maintain the data and are looking for some system to ease their work.
The teaching staff has trouble accepting the sudden shift in teaching methodologies.
Research
Building Empathy
We discussed several users and their personalities to create user personas from the information derived from the interviews and insights.
I defined the two target group profiles Rohit and Swami to better empathize with my main user groups and prioritize goals according to their needs.
Ideation
Remote Workshop
I facilitated a one-hour lightning decision jam workshop with the team and the client to align everyone on the pain points and develop executable solutions. After the workshop, we created ‘How Might We...’ questions to align with our user's goals.
How might we redesign the website to provide an experience that is engaging, valuable, & allow our users to access the information more quickly and easily?
Narrowing Down the Scope of Work
Based on the user interviews conducted with 11 users on the existing SAFE website, we found the following key issues:
-
55% of users felt that the process of using SAFE is too complicated, technical, and the website doesn't help them understand what is SAFE.
-
27% of users were finding it difficult to navigate to the desired link due to a lack of visual hierarchy.
-
18% of users found that the website is dull and doesn't look professional.
Gathering Insights
Abstracting the technical details from the existing website.
Add illustrations and graphic elements for good aesthetic appeal.
Communicate relevant information that is easy to understand.
Communicate relevant information that is easy to understand.
Redesign Process
Information Architecture
Based on the insights gained from the initial interviews and discussions with potential users, I defined the sitemap for SAFE and then evaluated it via tree tests with potential users.
Wireframing, Prototyping & Usability-Testing
Paper-Prototypes
With low-fidelity paper prototypes, I planned the basic structure of the application. I performed usability tests on paper prototypes as here, the modifications are quick and easy to make.
Interactive Prototype
I created interactive prototypes after some paper prototyping adjustments. Wireframes, mid and high-fidelity prototypes were designed.
Further, I conducted user tests, and they revealed some issues with the user interface. Many users asked some common questions that helped me evaluate and make the user experience better.
Visual Design
I developed a visual design and branding using mood boards with multiple iterations while discussing with stakeholders. I also designed a variety of illustrations depicting the various features of SAFE.
Please Note: There is a separate case study for the brand design.
Major Design Changes
#Home
The website was using a hamburger menu for navigation. Since the hamburger menu makes features undiscoverable, I replaced it with a navigation bar.
As you can see, there is no call to action button on the whole website, which I thought is most important. Hence, I added these download buttons to the home page.
I also added a fun hero illustration to improve its aesthetics.
#UseCases
The use cases were just simple texts with no relevant background image. Hence, I added some illustrations to demonstrate each use case.
#StepsToUseSafe
During our user interviews, many users were confused with "How to use SAFE?". Hence one of our key objectives was abstracting the technical details on the website. So, I added this simple five steps storytelling illustration to make the user understand the process.
#Blogs
The blog section was a collection of simple links to the blogs. I added some pictures and "read more" hyperlink to make it engaging for the users to read the blogs.
#Footer
There were many links scattered in the whole website which needs user attention. Hence, I arranged these links in the footer section to make it visible.
Testing and Usability Report
A/B & Click Tests
To quantitatively review the usability assumptions, I did A/B and click tests, which confirmed my assumptions except for a few details. First and foremost, I tested the navigation structure on tablet and mobile, to see the responsiveness of the website.
Validating the Designs
After the A/B test, I conducted usability testing sessions with our primary users to validate whether the new designs would solve their problems.
During the session, I observed how they interacted with the prototype and found that the navigation problem is solved completely. Also, users are now finding this website more interesting than earlier. The abstraction of technical details helped the users and now they are not getting intimidated by the technicalities of the website.
Working with Developer
After all the testing and iterations, I worked closely with the developer to implement the designs for MVP (Minimal Viable Product). I scoped out tickets for the front-end developer with user stories and product requirements. We successfully onboarded the new website within a limited timeline.
Conclusion
Impact
Since the implementation of the newly redesigned website, we have seen a significant increase in the number of users. Additionally, I have received positive feedback from users and the website is performing well than before.
Takeaways
Working as a sole designer for the entire project was an extremely steep learning curve. I feel fortunate to have got an opportunity to work on this project.
