Guest checkout
Designing a Guest checkout feature
To make a purchase, users previously had to either create a new account or sign in with an existing account. After a request from internal stakeholders, it was decided to create a new feature allowing the users to complete a purchase without having to log in or create an account.
I designed a landning page with all the checkout alternatives available to the user, for desktop, mobile and tablet.
Background
The request for a Guest checkout was clear. There were several reasons for it being requested, for example the number of abandoned carts when reaching the Sign in page were very high. To me it sounded like a great feature and my hypotheses was that the conversion rate was going to increase a lot.
At the same time, it is important that users sign up for an account because then they can be contacted directly with promotions etc. So, at this time, it wasn't 100% obvious if the Guest checkout option should be the most prominent or the least visible of the options.
Research
First of all I had to learn about the technical requirements. Because of the login system being used, it wasn't as simple as just adding a "Guest checkout" button at the login screen. The login feature was using a third party system, and the create account feature was not. This meant for example that it wasn't possible to add all three checkout options in the cart or checkout pages. Instead, we had no choice but to add these on a separate landing page, where the user makes a choice and then gets redirected to the specific option.
I also browsed competitor websites to see if they were having any interesting approaches to this particular feature, and firstly it became clear that nearly all competitors already had this feature, and secondly I noticed that it usually worked in similar ways across the competitors.
UX research and design
This was a typical UX Design process where I did both user research and design. I really wanted this feature to be successful from day one, so I put a lot of focus on refining the design with the help of plenty of user research and many design iterations.
Everything was designed in Figma and I had to consider all devices. Due to both budget and time limitations, it was not possible to involve more than 9 users in this study, so I had to make the best of the situation.
First iterations
I started out by sketching on paper just to get my first ideas out. This is a process that works well for me to get my imagination going. Then I consolidated the best ideas and started putting them to life by creating hifi sketches in Figma. I did many different iterations, trying out everything from small details to larger changes. It was important to stay true to the site's brand and visual identity, but at the same time I wanted to take the opportunity to try some new things.
After a period of designing, I felt that I had about 4 different versions that I felt stood out. So far, I had focused on the design, but I also wanted the copy to be great. I created different copy and iterated it several times until I had 3 different variants of copy. At this point, I was very curious of what the users would think about my work so far, so I decided it was time to conduct some user research.
I invited 4 users to individually give input on the prototypes. I wanted to know what their opinions were, and if there were any usability issues with the designs. I showed them the 4 versions of design in random order and thoroughly asked them about their opinion and thoughts. Then, I did the same for the 3 variants of copy. I received plenty of good feedback and some clear pointers of preferred versions, and I took this knowledge with me to use for the next iterations. Of course, 4 users is not enough for a preference test so I did not put too much emphasis on these results, but it was still interesting and valuable to get some insights.
I continued designing and iterating the copy until I felt that I had refined the designs to the level I wanted. The user input was valuable as it gave me insights I hadn't thought of.
Design iterations
Here are some of the different design iterations.
Lots of iterations on mobile as well.
More testing and final iterations
After my latest round of designing, I ended up with 2 versions of design and 2 versions of copy that I was happy with. I was ready for another round of user research. I contacted 5 new users and showed them the 2 versions, asked them questions and gathered their feedback. The user feedback was again useful and I felt that I preferred one option over the other. This would also become the final design.
Now I was very curious about how my design would be perceived in production. I conducted an A/B test with the help of my Web Analyst colleague to get quantitative data. My hypotheses of increased conversion rate was true: the conversion rate increased by a huge 20% thanks to this new checkout option! Additionally, checking out as a guest also instantly became the most preferred option.
Final design
The final design contains some design choices that were important to have for this feature:
- The three checkout options are clearly visible, but Sign in and Create new account should be more prominent than Checking out as guest
- Clear and concise copy
- Showing benefits of signing up for an account
- All options are above fold
- Emphasis put on the Sign in option with the big logo to fill up the whitespace