Quidditch Practice Planner

Role: UX Designer 

For this project, students were tasked with designing an app that would improve a community they were a part of. Each student designed their own application from start to finish. To start, I defined a problem to solve, my user base, and what features the app needed. Second, I created a low-fidelity wireframe to layout information for the application. Finally, I created the high-fidelity prototype in order to test the application's design.

The Planning

The focus of planning was to determine my target audience and the priority of features. I created a user summary and empathy map to solidify who my target audience would be. I performed competitive analyses to see what other apps did. I created a mood board, user flow, and information architecture to illustrate the design of the app.

quidditchplanner_CompetitiveAnalysis_All
quidditchplanner_CompetitiveAnalysis_All

press to zoom
quidditchplanner_empathymap
quidditchplanner_empathymap

press to zoom
quidditchplanner_informationarchitecture
quidditchplanner_informationarchitecture

press to zoom
quidditchplanner_CompetitiveAnalysis_All
quidditchplanner_CompetitiveAnalysis_All

press to zoom
1/5
The Sketches

After determining the target audience and necessary content, I created sketches of the layout the app would have. Sketching allowed me to quickly iterate to find the best ideas. After finding ideas that worked and getting feedback, I made edits in Adobe Photoshop before doing wireframes.

quidditchplanner_sketches_mainmenu
quidditchplanner_sketches_mainmenu

press to zoom
quidditchplanner_sketches_drills
quidditchplanner_sketches_drills

press to zoom
quidditchplanner_sketches_planning
quidditchplanner_sketches_planning

press to zoom
quidditchplanner_sketches_mainmenu
quidditchplanner_sketches_mainmenu

press to zoom
1/4
The Wireframes

After sketching the initial layout of the app, I created low-fidelity wireframes. These wireframes allowed me to refine the layout of the app's content before adding assets the app would have.

quidditchplanner_lowF_mainmenu
quidditchplanner_lowF_mainmenu

press to zoom
quidditchplanner_lowF_drills1
quidditchplanner_lowF_drills1

press to zoom
quidditchplanner_lowF_planinfo
quidditchplanner_lowF_planinfo

press to zoom
quidditchplanner_lowF_mainmenu
quidditchplanner_lowF_mainmenu

press to zoom
1/5
The Prototype

After creating the low-fidelity wireframes, I moved on to create the high-fidelity prototype. With the low-fidelity wireframes being completed, adding assets and colors to create the prototype was straightforward. Doing the high fidelities in Adobe XD made prototyping simple to iterate on. See the link at the top of the page to try the prototype yourself.

quidditchplanner_hf_Login
quidditchplanner_hf_Login

press to zoom
quidditchplanner_hf_Drills
quidditchplanner_hf_Drills

press to zoom
quidditchplanner_hf_Create Drills
quidditchplanner_hf_Create Drills

press to zoom
quidditchplanner_hf_Login
quidditchplanner_hf_Login

press to zoom
1/3

The Quidditch Practice Planner app was created in the fall of my sophomore year at Bradley University for my User Interface Design and Development class. The project took place over the course of the whole semester. Students designed an application that would support a community they were a part of. At the time, I was running a quidditch club at Bradley University.