Work

Experience

Work

Experience

Work

Experience

Ruffle

Founded by Abey Onalaja and Mark Wickstead, Ruffle is powered by a dedicated team of technologists, product specialists, and commerce enthusiasts. Together, we pool our expertise to craft a marketplace that balances the interests of both buyers and sellers.


Tools

Tools

Figma / miro

Founded

Founded

2024

Duration

Two months

Role

Role

UX designer

Challenge

Ruffle aims to create a marketplace where both buyers and sellers receive optimal value while fostering an inclusive, diverse community. My goal is to simplify the buying process from the buyers perspective.

The result

have consistently delivered upgraded designs that not only provide an enjoyable and seamless experience for users but also achieve a high standard of aesthetic appeal. My focus is on balancing functionality with visual impact, ensuring that every design choice enhances usability while aligning with the overall product vision

Reviewing the process

I conducted a thorough review of the Ruffle app's process and identified critical issues impacting its functionality. Specifically, the app crashed multiple times during the review process, and the "plus" functionality consistently reset to zero, disrupting the intended user flow.

  1. Login screen: Stright to the point but had very few options for to select from

  1. The design layout becomes confusing from here. two of the same image is not needed at different sizes

  1. The question is asked but can easily be by passed with the wrong the answer.

  1. When pressing the Plus button, a -1 appears, which is a clear error and can be quite frustrating.


Usability Test

I conducted a usability test to gather insights into how users interacted with the process. To benchmark and evaluate the experience, I compared the current Ruffle website app with ITV/Win, which features a similar competition entry flow. This comparison allowed me to identify key usability patterns and areas for improvement.

  1. Login screen: Stright to the point but had very few options for to select from

  1. The design layout becomes confusing from here. two of the same image is not needed at different sizes

  1. The question is asked but can easily be by passed with the wrong the answer.

  1. When pressing the Plus button, a -1 appears, which is a clear error and can be quite frustrating.


Usability Test

I conducted a usability test to gather insights into how users interacted with the process. To benchmark and evaluate the experience, I compared the current Ruffle website app with ITV/Win, which features a similar competition entry flow. This comparison allowed me to identify key usability patterns and areas for improvement.

Pain points

Quote from tina

Doesn't really look like a competition website. none of the images really stand out.

"Doesn't really look like a competition website. none of the images really stand out. "

Quote from sherelle

"whats the point of the question?"Also its not allowing me to move forward! I did everything right. Thats confusing... Sorry.

"whats the point of the question?"Also its not allowing me to move forward! I did everything right. Thats confusing... Sorry."

Quote from Usability test

Not very eye catching it doesn't grab you. Very bland"

User journey Map…

I created a user journey map to visually represent how users feel at each stage of the process. The insights revealed several pain points, indicating that the overall experience needs significant improvement.

User journey Map…

I created a user journey map to visually represent how users feel at each stage of the process. The insights revealed several pain points, indicating that the overall experience needs significant improvement.

I created a user journey map to visually represent how users feel at each stage of the process. The insights revealed several pain points, indicating that the overall experience needs significant improvement.

The Goal

Make it work

The process functions well, but the inability to navigate to the main screen is a significant issue.


Try to up sale


When users purchase a ticket, the goal is to inspire them to buy more by highlighting how it boosts their chances of winning. Strategic messaging and engaging prompts can create excitement and a sense of opportunity.

Update the look

The design lacks the appearance of a raffle website and requires an update.


The home Screen will have all of the competitions that we offer scrolling down the page. It will also have a notifcation and sign in option on the Local nav,

Home screen tabs will include

  • sign-in

  • register

  • Terms & conditions

  • Create your own competition.

The second page will contain visual image of the prize as well as the information terms of the spec and any other information the user will need. How long the prize is open for, how many tickets have been bought.

Page two will include

Sign-in

Register

Terms & conditions

  • ticket options

  • terms & conditions

  • extra ticket options.

This page will be the checkout page.

Where you will have all of the pay options.

There will be a continue button at the bottom of the page but this will be in gray.

  • apple pay

  • Goole pay

  • Pay pal

  • pay by bank

Infinity Diagram

We reviewed all the research gathered and created an affinity diagram to organise key insights. This visual representation of our findings will guide our analysis and inform design decisions in the later stages of the UX process


We reviewed all the research gathered and created an affinity diagram to organise key insights. This visual representation of our findings will guide our analysis and inform design decisions in the later stages of the UX process


The general interation

Infinity Digram


We reviewed all the research gathered and created an affinity diagram to organise key insights. This visual representation of our findings will guide

our analysis and inform design decisions in the later stages of the UX process

For the Ruffle project, I carefully designed the booking process and add-on screens, ensuring an optimal user experience by focusing on every detail. Using a comprehensive customer journey map, I pinpointed key pain points and challenges, enabling me to streamline and refine the flow with clarity and purpose. This user-centered approach ensured intuitive, seamless interactions that align perfectly with the needs and expectations of our users.

High Fidelity

The home Screen will have all of the competitions that we offer scrolling down the page. It will also have a notifcation and sign in option on the Local nav,

Home screen tabs will include

  • sign-in

  • register

  • Terms & conditions

  • Create your own competition.

The second page will contain visual image of the prize as well as the information terms of the spec and any other information the user will need. How long the prize is open for, how many tickets have been bought.

Page two will include

Sign-in

Register

Terms & conditions

  • ticket options

  • terms & conditions

  • extra ticket options.

This page will be the checkout page.

Where you will have all of the pay options.

There will be a continue button at the bottom of the page but this will be in gray.

  • apple pay

  • Goole pay

  • Pay pal

  • pay by bank

High Fidelity

Infinity Diagram

The general interation

We reviewed all the research gathered and created an affinity diagram to organise key insights. This visual representation of our findings will guide our analysis and inform design decisions in the later stages of the UX process

Video example

Feed back

What I would do Differently

Given the opportunity to revisit this project, I would enhance the research process by incorporating insights from multiple participants to ensure a broader perspective. Additionally, I would refine the user journey map by adding more granular details to better capture the nuances of the user experience."

Feedback

High Fidelity prototype

Coming soon

The home Screen will have all of the competitions that we offer scrolling down the page. It will also have a notifcation and sign in option on the Local nav,

Home screen tabs will include

  • sign-in

  • register

  • Terms & conditions

  • Create your own competition.

The second page will contain visual image of the prize as well as the information terms of the spec and any other information the user will need. How long the prize is open for, how many tickets have been bought.

Page two will include

Sign-in

Register

Terms & conditions

  • ticket options

  • terms & conditions

  • extra ticket options.

This page will be the checkout page.

Where you will have all of the pay options.

There will be a continue button at the bottom of the page but this will be in gray.

  • apple pay

  • Goole pay

  • Pay pal

  • pay by bank

video example

What I would do

differently


Given the opportunity to revisit this project, I would

enhance the research process

by incorporating

insights from multiple participants to

ensure a broader perspective. Additionally, I

would refine the user

journey map by adding more

granular details to better capture the

nuances of the user experience.