Ux case study of Roundabout
Turning Lives Around
Overview of the project
Summary
We’ve been asked to redesign the website of Roundabout: one of the most successful dramatherapy charity in the UK.
To give some additional contest: dramatherapy use a range of theatrical and dramatic techniques whose aims is helping people developing social interaction skills and expressing feelings, providing benefits to a wide range of disadvantaged people.
The present website missed a structured sitemap and showed a huge quantity of content that wasn’t reached by the user. It was also lacking the ability to convey that sense of support and professionalism that distinguish the charity.
That’s why Roundabout were looking for a responsive design, able to evolve the brand identity and engage further their users in each different phase of approach to the charity.
My role was to develop the entire UX process, working alongside the UI team, a group of two people, for three weeks until the final presentation of the MVP to the client.
Key deliverables
A number of deliverables were required for the project, including:
- Research insight and online survey, mood board and UI research
- Personas and scenarios
- User journey and sitemap
- Sketches of ideas and layout of the website
- Design and usability recommendations for improvement
- User flows and screen flows
- Low and mid-fidelity wireframes (desktop and mobile version)
- High fidelity mock up
- Prototype of design(s)
- A final presentation to the client
Results
The new design of the app provides users with the ability to:
- navigate through engaging and accessible content on dramatherapy
- contact Roundabout quickly and easily
- donate and support the charity throughout the user journey
- access information relevant to their professional status
Research
Analysing data
The final outcome of redesigning Roundabout website was to improve customer service and user experience: focusing on collecting feedbacks and key elements was vital to help us identifying the main user and his needs.
Thanks to the existing website we were able to analyse data and user behaviour through Google Analytics.
Following some key elements that emerged through the analysis of the data:
- more Desktop user (59%) followed by mobile users and tablet user in the last position.
- page views had a maximum of two minutes per visit
- the user spent a limited time on the website
Establishing emerging patterns on how the user interfaced with the website and collecting valuable information, gave us have a better comprehension of the coming online survey.
Survey and affinity diagram
We were able to share the survey with a number of teachers, parents and supporters that interacted with the charity on different levels.
The answer collected at the end showed users overall happy with the accessibility of the basic information on the website and looking for further levels of engagement (video, images, testimonials, etc...). They were also keen to have more information regarding dramatherapy session, how the process worked and which benefits would be provided at the end of the activity.
Thanks to the affinity diagram we were able to brainstorm and focus on valuable data: teachers and schools were revealed as main users of Roundabout services while children would be the main beneficiaries of the dramatherapy.
User persona & behaviours
Based on the previous data collected, user persona development and storyboards, helped us understand how the user will interact with the final website.
Rosie is the user persona, a young teacher working full time in a primary school: she would like to understand better her pupil’s needs, especially the ones that are having difficulties conveying their feelings.
She has issues finding support online until she finds Roundabout website, where she can ask to organise a visit to the school.
After an assessment process Roundabout schedules dramatherapy sessions in the school. Good effects are showing in the pupils following some session: they are able to communicate effectively with their companions and express their emotions freely.
Planning
Features and usability testing
Sketches and the sitemap helped us visualise the website in its fullness and pointing out the journey the user would make inside of it.
Reviewing elements such as the donate bottom on the menu and call to action were rethought thoroughly.
Design & Build
Thanks to user testing we could also add clearer contents and prioritise elements using hierarchy, basing our choice on the importance of information for the final user.
I’ve also realised a clickable prototype of the desktop wireframes that you can find at the following link.
Design
Moodboard
UI Research led the team to visual representation of support and different layers that people have, that they might shed or discover when they go through dramatherapy, emphasising Roundabout’s ability to help people find their voice.
Typography and colours
The UI approach to understanding and expanding the branding of Roundabout revolved around the ideas of turning lives around and support.
The colours comes from a complementary palette: pink evokes compassion and playfulness, while yellow-green is harmonious and dependable. These colours complement each other not only visually, but in their personality and mood and they align perfectly with what we found the personality of Roundabout to be.
Regarding the logo they decided to keep the round shape of the original one and the overlapping spirals: it resemble the strong and solid support of a hug from a friend.
Martel Sans is the primary body font because of its round and open feel that contrast well with Montserrat sharper lines for the impactful headlines.
Final prototype
High fidelity prototypes
As we begin the prototyping stage of our journey the UI starting building upon the wireframes that came out of the UX research.
In term of changes the UI decided to readjust the structure to introduce a parallax effect and elements such as style tiles, while you can still recognise structural parts from my previous wireframes.
Summary
Being a project of three weeks due to time constrains some deliverables where not implemented on the final prototype.
The main challenge I had to face on this project was to realise and manage the entire UX project on my own.
The project is now being developed by the Red Academy development team.
