Steven Kelley UI Design Web Development About Contact
-

User Interface Design.

Back in the "before times": Front-End developers would create all the visuals including the wireframe, style guides, and build the HTML and CSS for an entire site! As the internet grew, more emphasis was put into user experience and new full-time roles appeared!

My position at Learning A-Z for 7 years was an all-in-one designer; however, my role adapted quickly to a full time User Interface Designer for the last 3 years. With that knowledge of the inner workings of HTML and CSS, I easily grew into my new position! Below are samples of my work.


Style Guides


Everything below is utilizing Figma for our Style guide Library. I coded multiple components and variants options to speed up productivity for wireframing and designing pages for our new produts Foundations A-Z and Writing A-Z.

Challenges

Adapting to Figma

Challenge: I started UI design within photoshop and Adobe XD. The limitation of these products quickly became apparent in user interface designing. With the lack of prototyping tools, variants and component assets. interface design couldn't be completed in the fast-paced environment at Learning A-Z.

Solution: I took it upon myself to learn and become proficient at Figma. By taking tutorials, classes, and complete multiple certification courses at Udemy.


Scalability

Challenge: One example was to overcome the Scalability, and alignment of the button variants in Figma. Because we needed multiple sizes, colors, and variations, the button selection quickly became complex.

Solution: By adjusting the auto layout for specific variants inside the component a designer could easily enable the auto layout with a slider property giving them an option for a scalable or a static button when needed. This process was repeated on many components in the library.

Accessibility

Challenge:I had to follow strict accessibility standards due to working on educational software for children that was required in many states.

Solution: I completed multiple training courses through the years on WCAG 2.0 Accessibility guidelines, and practiced accessibility to verify every design. I utilized multiple accessibility compliance tools on Learning A-Z and Kurzweil Education products so we could continue to serve school systems that required these requirements.



Figma Library



Web Interface Design


Account Management page


Redesigning the Teacher Account Management page. 2023


2021 Foundations A-Z


Examples of the new foundationsa-z.com site design.



2022 Writing A-Z


Examples of the new writinga-z.com site design.


Mobile


Raz-Kids Mobile


Examples of design work done on the Kids A-Z app.



Kurzweil Mobile


Examples of the new mobile design for the Kurzweil 3000 app.


Contact

stavos@gmail.com ©2023 Steven Kelley.