UX/UI Portfolio

Visual Design

About Me

UX/UI Portfolio

Visual Design

About Me

UX/UI Portfolio

Visual Design

About Me

Snap! Mobile

School Sites | App and Website Communication and Management Tool for Schools

School Sites | App and Website Communication and Management Tool for Schools

Context

I was the lead designer for Sites, an app and website solution simplifying daily operations for over 500 schools. It streamlines tasks, improves communication among teachers, parents, and students, and offers features like calendars, event directions, and fundraising access. Sites benefits students, school staff, and parents with its comprehensive, easy-to-use platform, enhancing school management and communication.

Tools Used

Mockups & Prototyping

• Figma • Adobe Creative Cloud Suite (Illustrator & Photoshop)

• Figma • Adobe Creative Cloud Suite (Illustrator & Photoshop)

Team Collaboration

• Sharepoint • Microsoft Office Suite • Miro • Figjam • Notion

Communication & Project Management

Communication & Project Management

• Jira • Confluence • Microsoft Teams • Zoom • Slack

The Process

Discovery with Stakeholders
User Research and Focus Groups
Mockups & Prototyping
User Feedback
Refined Mockups
Collaboration with Developers
Product Shipment

UX Research

The project commenced with user research and focus groups to collect insights into user needs, goals, and challenges. This data informed the creation of personas, which in turn guided the development of user-centered mockups and prototypes for the product. Several iterations were generated to assess various designs and user pathways.

Personas

User Journeys

Design Phase

I started shaping this product by creating low fidelity wireframes and progressed to high fidelity mockups. To test the final product before shipment, interactive prototypes allowed me to gather valuable user feedback which played a crucial role in refining the design.

Moreover, active engagement with stakeholders ensured their perspectives and needs were integrated into the design. I collaborated with developers to address technical requirements and scalability, making sure that our vision could be effectively implemented. Together, we crafted a practical implementation plan that bridged the gap between design and development, ensuring a successful product.
I started shaping this product by creating low fidelity wireframes and progressed to high fidelity mockups. To test the final product before shipment, interactive prototypes allowed me to gather valuable user feedback which played a crucial role in refining the design.

Moreover, active engagement with stakeholders ensured their perspectives and needs were integrated into the design. I collaborated with developers to address technical requirements and scalability, making sure that our vision could be effectively implemented. Together, we crafted a practical implementation plan that bridged the gap between design and development, ensuring a successful product.

Low Fidelity Mockups

Product Shipment

After refining the design, I worked closely with developers to ensure its feasibility and successful implementation in the final product. We considered the technical requirements of the design and collaborated to ensure scalability. The last phase involved launching the product and monitoring user feedback for areas of improvement. Ongoing design refinement aims to meet user needs and outperform competitors.
After refining the design, I worked closely with developers to ensure its feasibility and successful implementation in the final product. We considered the technical requirements of the design and collaborated to ensure scalability. The last phase involved launching the product and monitoring user feedback for areas of improvement. Ongoing design refinement aims to meet user needs and outperform competitors.

View the Shipped Product

View the Shipped Product

Select a school from the directory.

Schools Directory

Final UI

Selected Mockups