Role: UX Designer
Role: UX Designer
Embedded Files
Timeline: 5 Days
Timeline: 5 Days
Solution: Contact Form
Solution: Contact Form
Background and Process
Background and Process
As part of a module assignment during the Accessibility course, we were given the task to create a high-fidelity mockup of a contact form for a design company called Okalpha. The form needed to include examples of what focus state looks like for keyboard navigation.
As part of a module assignment during the Accessibility course, we were given the task to create a high-fidelity mockup of a contact form for a design company called Okalpha. The form needed to include examples of what focus state looks like for keyboard navigation.
The Process
We started by conducting a visual audit on the current website of the company. We then moved on to create sketches while setting up the design system based on our findings from the audit. We reviewed accessibility principles and included contrast checking, language and hieararchal principles. We then set up the high fidelity mockup for tabbing through the form.
We started by conducting a visual audit on the current website of the company. We then moved on to create sketches while setting up the design system based on our findings from the audit. We reviewed accessibility principles and included contrast checking, language and hieararchal principles. We then set up the high fidelity mockup for tabbing through the form.
My Role
Visual Audit, Sketched, Set up Design System, Reviewed accessibility principles and guidelines, set up High Fidelity Wireframes.
Visual Audit, Sketched, Set up Design System, Reviewed accessibility principles and guidelines, set up High Fidelity Wireframes.
Visual Audit
Visual Audit
We started the assignment by conducting a visual audit to find the correct colours, typography and sizes used on the page. This gave us a basis to create the design system.
We started the assignment by conducting a visual audit to find the correct colours, typography and sizes used on the page. This gave us a basis to create the design system.
Sketches
Sketches
We created several sketches before mocking up the high fidelity wireframes.
We created several sketches before mocking up the high fidelity wireframes.
Design System
Design System
We set up a design system based on our findings form the visual audit. This approach allowed us to craft components and design elements for the form that integrate seamlessly into the existing webpage.
We set up a design system based on our findings form the visual audit. This approach allowed us to craft components and design elements for the form that integrate seamlessly into the existing webpage.
Accessibility
Accessibility
We included Accessibility principles into the design system, including contrast checker, hierarcal principles and language considerations.
We included Accessibility principles into the design system, including contrast checker, hierarcal principles and language considerations.
High Fidelity
High Fidelity
We set up a prototype that could be tabbed through. You can see how the prototype acted on top of the page, displaying what it would look like if you tabbed through the form on the website.
We set up a prototype that could be tabbed through. You can see how the prototype acted on top of the page, displaying what it would look like if you tabbed through the form on the website.
Annotations
Annotations
We set up a prototype that could be tabbed through.
We set up a prototype that could be tabbed through.
Summary & Conclusion
Summary & Conclusion
Summary
Summary
During our Accessibility course, we embarked on a module assignment to develop a high-fidelity mockup for a contact form for Okalpha, a design company. This required us to incorporate focus states for keyboard navigation. Our process began with a comprehensive visual audit of Okalpha's existing website. Based on our findings, we crafted a design system that became the foundation for our sketches. Emphasizing accessibility, we considered elements such as contrast, language, and hierarchical principles. The culmination of our efforts resulted in a high-fidelity mockup optimized for keyboard tabbing.
During our Accessibility course, we embarked on a module assignment to develop a high-fidelity mockup for a contact form for Okalpha, a design company. This required us to incorporate focus states for keyboard navigation. Our process began with a comprehensive visual audit of Okalpha's existing website. Based on our findings, we crafted a design system that became the foundation for our sketches. Emphasizing accessibility, we considered elements such as contrast, language, and hierarchical principles. The culmination of our efforts resulted in a high-fidelity mockup optimized for keyboard tabbing.
Conclusion
Conclusion
The experience of creating the mockup for Okalpha reinforced several critical principles in design. Methodologically going through the process, from a visual audit to final mockup, ensures that the design is both user-centric and cohesive with the existing visual language. Maintaining a focus on user experience is paramount; however, it's equally crucial to honor the integrity of the original design. Furthermore, a commitment to accessibility, as shown in our adherence to contrast, language, and hierarchy principles, not only meets a standard of inclusivity but also ensures the product's broader applicability.
The experience of creating the mockup for Okalpha reinforced several critical principles in design. Methodologically going through the process, from a visual audit to final mockup, ensures that the design is both user-centric and cohesive with the existing visual language. Maintaining a focus on user experience is paramount; however, it's equally crucial to honor the integrity of the original design. Furthermore, a commitment to accessibility, as shown in our adherence to contrast, language, and hierarchy principles, not only meets a standard of inclusivity but also ensures the product's broader applicability.
Ultimately, a methodical approach that prioritizes user experience, original design fidelity, and accessibility results in a product that integrates seamlessly into existing webpages and serves a wider audience.
Ultimately, a methodical approach that prioritizes user experience, original design fidelity, and accessibility results in a product that integrates seamlessly into existing webpages and serves a wider audience.
Thanks!
Thanks!
This project was part of a collaboration between:
Martine Rydland (UX Designer)
Mashid Mohammadi (UX Designer)
Thomas Olsen (UX Designer)
Disclaimer: This project was undertaken as a student assignment from Noroff and is not affiliated with or endorsed by the design company OkAlpha.
Disclaimer: This project was undertaken as a student assignment from Noroff and is not affiliated with or endorsed by the design company OkAlpha.
Page updated
Google Sites
Report abuse