Steven Kelley UX Design UI Design Web Development About Contact

UX Design.

Using the S.M.A.R.T process: Specific, Measurable, Attainable, Realistic, and Timely during the UX phase of a project, I use the following principle's, and processes below. I have also included several examples of UX diagrams using this site as an example.

UX Challenges

Product complexity

Challenge: Due to a monthly feature rich release cycle inside Learning A-Z, our teacher pages outgrew the original layout and became very complex for the average teachers trying to quickly assign material for their students.

Solution: I wireframed, and conducted user testing to determine the minimum features for 85% of the user base, and hid complex features for advanced users behind a collapsable accordion menu throughout the teacher interface on all of our product sites; which, created a clean and simple interface.

Designing with Accessibility

Challenge: The original Writing A-Z product site had a yellow color for its main theme which wasn't an accessible color.

Solution: I conducted color theory, and accessible contrast research to come up with the new orange color for the redesigned Writing A-Z site.

Outdated Navigation

Challenge: The Kurzweil 3000 application interface utilized 30% of the vertical screen real estate for menu's and tools.

Solution: I conducted user studies with students and teachers to find out what core features to organize into categories. The Results were: Read, Write, and Scan tabs placed in a ribbon menu for each step of the writing process.

My Design Principles

Control IconPlace users in control of the interface.
Interact IconMake it comfortable to interact with a product.
Cognitive load IconReduce the users cognitive load.
Consistency IconMake the user interfaces consistent.

My UX Design Process

Strategy - Stakeholder discussions, Project vision goals, Brand Strategy
Discovery - Competitor Analysis, Analytics Review, User Interaction
Analysis - Use Cases, Story boards, Workflow Diagram
Design - Brainstorm/Sketching, Wireframing, Prototyping, User Testing
Design - Testing high-fidelity design, Beta Launch, User Testing, Launch

UX Diagrams

Below are some examples of the UX diagram charts examples for this site.

UX Diagram
UX Diagram
UX Diagram

Learning A-Z Checkout Diagrams

Example UX Storyboad, Flow chart, and Wireframes of the Learning A-Z Product purchase process for school districts and teachers.

The charts below provide the current purchase structure for Learning A-Z, along with a newly proposed flow diagram, and process.

UX Learning A-Z Diagram
UX Learning A-Z Diagram
UX Learning A-Z Diagram

UX Wireframes

Foundations A-Z UI Patterns

With our Next Gen products, we wanted to set the new standard for our company moving forward. To ensure valuable work wasn't lost, I put together high-level wireframes to show what our new patterns and templates look like. This helped give the team a shared understanding of what we meant when we talked about certain pages like the Homepage, Dashboard, Lessons page, or the Assign page.

UX FAZ High level Homepage
UX FAZ High Level Dashboard
UX FAZ High Level Lessons page
UX FAZ High Level Assign page

Foundations A-Z Lesson Plan Design Process

Below was the process for creating the lesson plan pages for Foundation A-Z. I began with a low-level wireframe for layout and placement, followed by a detailed mockup with the approved content and finalizing the interactive elements. Lastly I created the high fidelity pixel perfect design which was handed off to development.

UX FAZ wireframe page
UX FAZ Mockup page
UX FAZ High Fidelity page

Contact ©2023 Steven Kelley.