Intro (Top)
Case Study
FInding Martial Arts Lessons Faster
Concept piece for the Google UX/UI Certificate Program.
MY ROLE: Everything
Goal Statement
Goal Statement
Targeting Users With Busy Schedules
The martial arts mobile design will let users find classes in a sortable schedule which will affect prospective and current students by letting users sort classes by time, skill, peers and instructor. We will measure effectiveness by sign up data.
Competitive Audit
Competitive Audit
Researching Local Dojo Sites
Brainstorming
Brainstorming
Immersing in the Content
Building upon the competitive research by getting to know all about martial arts terminology and developing a mood board to help inspire visuals.
Empathize
Empathize
Persona's User Journey
Based on three different personas, the choices and paths were followed necessary to solve each user’s problems.
Page Narratives
Page Narratives
Aligning Content to Site's Goals
Each proposed page is aligned to the site’s purpose and how it will satisfy the users, as well as where the user is directed next.
Site Map
Site Map
User Flows
A site map is organized after brainstorming sections and categories. Then flows are created to satisfy the users’ needs.
Ideation
Ideation
Exploring Visual Solutions
Quick sketches are made to explore different ways of accomplishing the site goals. Concepts for branding and a hero image are also explored.
Strategic Plan
Strategic Plan
Plotting the Moves Ahead
Key research and ideas for the future site are organized to get the client’s feedback. Results and proposals from empathizing with the user, defining the problem and ideating concepts are shown to the client to get approval before the design phase begins.
Wireframes
Wireframes
Key Pages Sketched Out
Before wireframing the entire site, key pages are designed in low resolution to decide what components are needed to create a working style sheet and design system. Pages to complete specific user tasks are connected to assist with a usability study.
Style Guide
Style Guide
Organizing a Design System
Branding, typography, icons, colors and more and gathered into a useful Style Guide. Individual UI elements are further organized into useful components like cards, buttons and labels which are further packaged into modules and templates for a Pattern Library.
Usabiliity Study
Usability Study
Responding to User Feedback
Users preferred a calendar view instead of only a list view when hunting for classes, so I made a toggle between the two, with the default view being the calendar view. Tested color variations also before settling on red and gold.
Accessibility
Accessibility
Ensuring Readability
Visual color choices and text sizes are checked with online accessibility tools to make sure there is proper contrast and text size for the visually impaired. Concerns for button placement for the handicapped are addressed as well as gestalt values to help engineers code for screen readers.
Prototypes
Prototypes
High Fidelity Time
The design system is applied to the wireframes and pages are connected into working user flows.
MAIN FLOW
CLICKABLE PROTOTYPEConclusion
Conclusion
Experience Gained
and Next Steps
I used the project to fine tune my process for UX/UI design beyond what the Google UX/UI Certificate taught. By analyzing each step I was able to work out what made sense for each step to build up on the next. A future desktop version would be next on the agenda.