{"id":839,"date":"2024-05-11T16:22:47","date_gmt":"2024-05-11T16:22:47","guid":{"rendered":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/?p=839"},"modified":"2024-05-11T16:22:47","modified_gmt":"2024-05-11T16:22:47","slug":"checkout-process-my-iterations","status":"publish","type":"post","link":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/entire-project-2b\/design-process\/checkout-process-my-iterations\/","title":{"rendered":"Checkout process – my iterations"},"content":{"rendered":"\n

At the project’s outset, we made a strategic decision to divide our focus between the events pages, the about us page, and the checkout process. Recognising the checkout process’s emphasis on user experience (UX) over user interface (UI), we opted for a collaborative approach.<\/p>\n\n\n\n

While we initially treated the checkout process similarly to the other pages, we temporarily prioritised the about us and events pages. However, as we delved into the checkout process design, we encountered challenges. Despite initial attempts to refine the existing design, we struggled to achieve the desired clarity and user-friendliness.<\/p>\n\n\n\n

Realising the need for a fresh perspective, I took the initiative to overhaul the checkout process from scratch. I aimed to create an intuitive and streamlined experience, focusing on minimising user overwhelm and conveying a sense of simplicity and efficiency.<\/p>\n\n\n\n

To achieve this, I introduced collapsible buttons to condense the process, allowing users to access additional information without navigating away from the page. Presenting this revised design to the group, I received positive feedback, leading to unanimous agreement to proceed with this approach. I take pride in designing the comprehensive checkout process, including its framework and overall navigation.<\/p>\n\n\n\n

Below are my iterations of the checkout process. <\/p>\n\n\n\n

\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Above are my first design ideas for the checkout process. <\/p>\n\n\n\n

\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Above are my second iterations of the process, experimenting with their colour palette, however, we worried that the yellow background made things unclear and distracting, and we wanted to stick to as plain as possible to maintain user experience <\/p>\n\n\n\n

\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Above are my experimentations with colour palette across the process, and what still felt like it fitted with the brand guidelines but didn’t distract users. We obviously, went for the white and red. However, I still wasn’t pleased with it and I wanted it to be more streamline and professional looking. <\/p>\n\n\n\n

\n
\n
\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\n
\n
\"\"<\/figure>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Above are the final wireframes for the checkout process, that I presented to my group and we all decided this was the final route we wanted to go down, which was a proud feeling. <\/p>\n","protected":false},"excerpt":{"rendered":"

At the project’s outset, we made a strategic decision to divide our focus between the events pages, the about us page, and the checkout process. Recognising the checkout process’s emphasis on user experience (UX) over user interface (UI), we opted for a collaborative approach. While we initially treated the checkout process similarly to the other pages, we temporarily prioritised the about us and events pages. However, as we delved into the checkout process design, we encountered challenges. Despite initial attempts to refine the existing design, we struggled to achieve the desired clarity and user-friendliness. Realising the need for a fresh perspective, I took the initiative to overhaul the checkout process from scratch. I aimed to create an intuitive and streamlined experience, focusing on minimising user overwhelm and conveying a sense of simplicity and efficiency. To achieve this, I introduced collapsible buttons to condense the process, allowing users to access additional information without navigating away from the page. Presenting this revised design to the group, I received positive feedback, leading to unanimous agreement to proceed with this approach. I take pride in designing the comprehensive checkout process, including its framework and overall navigation. Below are my iterations of the checkout process. Above are my first design ideas for the checkout process. Above are my second iterations of the process, experimenting with their colour palette, however, we worried that the yellow background made things unclear and distracting, and we wanted to stick to as plain as possible to maintain user experience Above are my experimentations with colour palette across the process, and what still felt like it fitted with the brand guidelines but didn’t distract users. We obviously, went for the white and red. However, I still wasn’t pleased with it and I wanted it to be more streamline and professional looking. Above are the final wireframes for the checkout process, that I presented to my group and we all decided this was the final route we wanted to go down, which was a proud feeling.<\/p>\n","protected":false},"author":1,"featured_media":863,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[27],"tags":[],"_links":{"self":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts\/839"}],"collection":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/comments?post=839"}],"version-history":[{"count":1,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts\/839\/revisions"}],"predecessor-version":[{"id":864,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/posts\/839\/revisions\/864"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/media\/863"}],"wp:attachment":[{"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/media?parent=839"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/categories?post=839"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.nua-ux.design\/lizzy-lanfear\/blog\/wp-json\/wp\/v2\/tags?post=839"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}