Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Follow publication

Engaging the College Community: UX case study

--

College website

I am thrilled to be taking on my first-ever UX case study as a designer, although I admit to feeling a bit anxious and having imposter syndrome kick in at full pace. However, I am eager to learn and grow through this experience and see it as an exciting opportunity to challenge myself and hone my skills.

Working alongside experienced developers is a fantastic opportunity that I am grateful for. I am always excited to collaborate with them and learn from their perspectives to create an exceptional end product. While there were challenges along the way, I was and am ready to approach them with a positive attitude and a growth mindset.

Overall, I can’t wait to dive into this UX case study and tell you about the journey.

Brief: To provide a platform where one can access all the notices, circulars, and important information regarding the college and the university.

How do students check the updates currently?

  • College or University official website
  • Notice board
  • WhatsApp
  • If someone is talking about the news in the college

Problem: Important notices were getting lost among the flood of other messages, with half of the information becoming irrelevant by the time it reached students. As a result, students had to rely on word of mouth to stay informed.

Objective: The objective of this project was to design a responsive newsletter website for my college society that would provide an informative platform for students to stay up-to-date with the latest news, events, and initiatives.

My role: As a UI/UX designer, my goal was to design a website that was visually appealing, user-friendly, and tailored to the needs of the society’s members.

“Start where you are, use what you have, do what you can.” — Arthur Ashe

In this case study, I will outline the design process I followed, explain the design decisions that were made, and showcase the final website and mobile design. I will also discuss the challenges that were encountered and how they were addressed, as well as the results of the project

Design process:

Design process

Research and Analysis:

To begin the project, I racked my brain to conduct thorough research and began analyzing to understand the goals, target audience, and design requirements of the newsletter website for my college society. This involved a range of techniques, including competitor analysis, and stakeholder feedback.

Stakeholder Feedback:

To ensure that the design met the needs and expectations of the college society’s stakeholders, I gathered insights from the society’s team and the faculty head. This was used to inform the design decisions and ensure that the final design was aligned with the society’s goals.

Competitor Analysis:

  • Upon researching existing college society newsletter websites, I found that most of them were cluttered and disorganized, making it difficult for users to find the information they were looking for.
  • This also helped me in identifying the key features and functionalities required for the website along with the examination of the content structure, navigation, layout, and visual design of the websites thus, providing me with useful insights

Based on what I have understood, I developed a design strategy that focused on creating a simple and intuitive navigation system that is a visually appealing, user-friendly, and informative website for the college society.

Overall, the research and analysis phase of the project was critical in informing the design decisions and ensuring that the final product met the needs and expectations of the college society and its members.

Design Process:

  1. Planning and Wireframing: Once the analysis phase was completed, I started the design process by creating a basic wireframe of the website. This helped to identify the key sections and content blocks that would be included in the design.
sketches
sketch ideas
group of low fidelity wireframes
wireframes for the website

2. Visual Design: Once the wireframes were finalized, I began working on the visual design of the website and mobile version. I created a consistent visual identity for the design by incorporating the college society’s branding and color scheme throughout the website and mobile version.

3. Prototyping: After completing the visual design, I created interactive prototypes of the website and mobile version using design software. This allowed me to test the user experience and gather feedback from stakeholders and members of the college society.

prototype of website
High fidelity mobile screen of the website

4. User Testing: To ensure that the design met the needs of the target audience, I conducted user testing on the prototypes. This involved testing the website with members of the college society and incorporating their feedback into the design.

Before and After feedback from stakeholders changes were made to the notice section
  • These changes included simplifying the navigation, improving the visual hierarchy of the content, and optimizing the content for better accessibility.
before and after screens
low to high fidelity prototype

5. Refining the Design: I made refinements to the design based on the relevant feedback to improve the overall user experience and ensure that both versions were easy to use and navigate.

explanation of design decision
Addition of work together section to increase the interactivity of users

I continued to iterate on the design based on user feedback and conducted additional user testing to validate the effectiveness of the changes. This process allowed me to ensure that the final design was optimized for the target audience and provided a positive user experience.

design decision
few sections were removed as they were least interacted with

Final Designs:

final screens
Final High fidelity prototypes

Overall, the design process of the website for the college society involved a user-centric approach, with a focus on creating a visually appealing and easy-to-use design that met the needs of the target audience.

Design Decisions:

design decision
  1. Responsive Design: With the increasing number of users accessing websites and applications on their mobile devices, it was important to ensure that the website was fully responsive. To achieve this, I utilized a responsive design framework that allowed the website to adapt to different screen sizes and devices.
  2. Simplified Navigation: One of the key design decisions was to simplify the navigation of the website and mobile version. To achieve this, I created a clear and concise navigation menu that was easy to understand and navigate. This helped to ensure that users could easily find the content they were looking for and improved the overall user experience.
  3. Consistent Branding: To create a cohesive and professional design, I ensured that the branding and color scheme of the college society were consistent throughout the website and mobile version. This helped to reinforce the society’s identity.
  4. Engaging Visual Design: To make the website visually engaging, I used a combination of high-quality imagery and typography. This helped to make the content more visually appealing and engaging for users.
  5. User-Focused Content: One of the key design decisions was to focus on the user and ensure that the content was relevant and useful. To achieve this, I worked closely with the college society to identify the key content areas and ensure that the content was tailored to the needs of the target audience. This helped to increase engagement and ensure that the website was a useful and valuable resource for members of the college society.

Challenges and Solutions:

  1. Limited Content: One of the biggest challenges was the limited amount of content available for the website and mobile version.
  • To overcome this challenge, I worked closely with the college society to identify the most important content areas and ensured that the content was presented in a clear and concise manner. This helped in ensuring that users could easily find the information they were looking for and improved the overall user experience.

2. Limited User Testing: Due to time and resource constraints, it was challenging to conduct comprehensive user testing on the website and mobile version.

  • To overcome this, I utilized a variety of feedback gathered from users. This ensured that the website was designed to meet the needs of the target audience and provided a valuable resource for members of the college society.

Results:

The designed newsletter website and mobile version for the college society received positive feedback from both users and stakeholders. The following are some of the key results:

  1. Improved User Experience: The designed website and mobile version provided an improved user experience by simplifying the navigation and improving the visual hierarchy of the content. Users found it easier to find and read articles and news updates.
  2. Increased Engagement: The designed website and mobile version led to an increase in user engagement with the content. Users spent more time on the website and viewed more pages per session.
  3. Positive Feedback: The feedback received from users was positive, with users expressing satisfaction with the improved design and user experience.
  4. Meeting Stakeholder Needs: The designed website and mobile version met the needs of the stakeholders, including the college society members and the college administration. The stakeholders were pleased with the increased engagement and positive feedback from users.

Have a Look!

Learning outcomes:

I know the scope to improve is a lot for me, I hope I keep on learning, keep on applying what I have learned, and keep on growing with dedication. From this project I personally

  1. Learned to collaborate effectively with developers and other stakeholders to bring the project to fruition.
  2. Building proficiency in using design tools and software to create wireframes, prototypes, and high-fidelity designs.
  3. Developing an eye for detail and the ability to iterate on designs based on feedback from users and stakeholders.

In conclusion, I gained valuable knowledge and skills in UX design, collaboration, and communication with developers. This project allowed me to showcase my design thinking and problem-solving abilities while contributing to the enhancement of communication and engagement within my college society.

For the readers, I’d also like to say thank you for reading my article. Hope this can be useful to get some insights.

Any feedbacks or suggestions are very welcomed for the improvement of this product. You can leave comments below or reach me personally by email.

Thank You :)

Parmeet Kaur

parmeetkaur2024@gmail.com

--

--

Bootcamp
Bootcamp

Published in Bootcamp

From idea to product, one lesson at a time. To submit your story: https://tinyurl.com/bootspub1

Parmeet Kaur
Parmeet Kaur

Written by Parmeet Kaur

Product & UX Design Enthusiast |Ex Product Executive Intern @ Times Internet | Ex @IIDE |Ex @BigOHealth| Ex @Epidise

No responses yet

Write a response