top of page
This site was designed with the
.com
website builder. Create your website today.Start Now

YMCA Connect

UX/UI

Prototyping

Team Collaboration

Wireframing

Overview

YMCA is a collaborative project with Iris M., Oshienie G., Amavi W., and myself. YMCA Connect aims to redesign the YMCA fitness website to aid users during the pandemic lockdown. This project was done completely online.

 

This semester long project included several steps such as; several user testing sessions (the co-design process), the task creation, the aesthetic design, flow diagrams, wire-framing, creating scripts for the user testing sessions, Mapping systems, the completion of an ethics certificate which certifies me to conduct research involving humans and several adjustments of our website according the user testing sessions.

 

The website prototypes and frames were created using Figma. The organization of notes and ideas was done on Miro. This is not an actual website. This is only a project where we had to redesign an existing website in order to suit the current times. The website is not coded by our group, it was redesigned by our team.

Tools

Figma

Illustrator

Miro

Zoom

2.png
Screen Shot 2022-05-03 at 1.49.25 AM.png
Screen Shot 2022-05-03 at 1.52.57 AM.png
Screen Shot 2022-05-03 at 1.52.24 AM.png
Screen Shot 2022-05-03 at 1.51.21 AM.png
Screen Shot 2022-05-03 at 1.53.55 AM.png

Website

The website was created on Figma

Screen Shot 2022-05-03 at 1.21.41 AM.png

Project statement

The project statement was created in Miro

Screen Shot 2022-05-03 at 12.47.28 AM.png
Screen Shot 2022-05-03 at 1.19.44 AM.png
Screen Shot 2022-05-03 at 1.20.01 AM.png
Screen Shot 2022-05-03 at 1.21.05 AM.png
Screen Shot 2022-05-03 at 1.20.43 AM.png
Screen Shot 2022-05-03 at 1.18.53 AM.png
Screen Shot 2022-05-03 at 1.19.24 AM.png
Screen Shot 2022-05-03 at 1.18.30 AM.png
Screen Shot 2022-05-03 at 12.47.00 AM.png

User Scenarios and User Cases

User scenarios and user cases were done in Miro.

Screen Shot 2022-05-03 at 1.25.35 AM.png
Screen Shot 2022-05-03 at 1.25.22 AM.png
Screen Shot 2022-05-03 at 1.24.33 AM.png
Screen Shot 2022-05-03 at 1.24.57 AM.png
Screen Shot 2022-05-03 at 1.23.58 AM.png
Screen Shot 2022-05-03 at 1.23.30 AM.png
Screen Shot 2022-05-03 at 1.23.09 AM.png
Screen Shot 2022-05-03 at 1.22.52 AM.png
Screen Shot 2022-05-03 at 1.22.35 AM.png
Screen Shot 2022-05-03 at 1.22.21 AM.png

Flow Diagrams

The flow diagrams derive from the use cases and was made in Miro.

Screen Shot 2022-05-03 at 1.30.45 AM.png
Screen Shot 2022-05-03 at 1.31.05 AM.png
Screen Shot 2022-05-03 at 1.30.34 AM.png
Screen Shot 2022-05-03 at 1.30.02 AM.png
Screen Shot 2022-05-03 at 1.28.19 AM.png

Wire Framing

Wireframing was created in Illustrator and Figma.

Screen Shot 2022-05-03 at 1.41.20 AM.png

User Study Analysis

Wireframing was created in Illustrator and Figma.

Screen Shot 2022-05-03 at 1.39.39 AM.png

System Mapping

Systems mapping created in Miro.

Screen Shot 2022-05-03 at 1.42.46 AM.png

Task Observations

Task observations was created in Miro

bottom of page