Main.jpg

Project type: UX/UI ∙ Client: Amie Peacock ∙ Timeline: 6 weeks

 

Beyond the Conversation
Website

 

Closing the gap of social isolation by deepening relationships through conversation.

Beyond the Conversation purpose is to engage, empower, and inspire the most vulnerable citizens; to develop their capacity to connect and build social support networks that are healthy and beneficial. BTC is a volunteer led initiative collaborating with professionals, sharing cutting-edge research and programs that emphasize the importance of meaningful conversation.

This project goal was to redesign Beyond the Conversation’s current website to create a welcoming platform that reflects the organization’s work, is warm and inviting, and instantly conveys Amie’s passion for connecting with people.

Our team

UX: Jessica Lau, Yuki Tamura, and Maria Mercedes Sinisterra.
UI: Ranul Kamboj, Saki Kurano.

Our client

Amie Peacock, Beyond the Conversation Founder and Executive Director.

 
 
logo-header.png
 
 
The design evolution of Beyond the Conversation website screens. From low-fidelity wireframes to the final prototype.

The design evolution of Beyond the Conversation website screens. From low-fidelity wireframes to the final prototype.


Key points

  • There is a lot of valuable information, which has the potential to be communicated more effectively and efficiently if better laid out and organized. 

  • Some content is repetitive, outdated or missing, which in turn is an inaccurate reflection of Beyond the Conversation’s works.

 

Design

Menu bar
Information was categorized into five sections: Who we are, What’s On, Resources, Get Involved, Find Us.

1. Who we are: About the team, Goals, Services, History, and Partners of Beyond the Conversation.
2. What’s On: Upcoming events, Past events photo gallery, Link to Weekly meet-up Groups.
3. Resources: Blog and News.
4. Get Involved: Volunteer and Donate.
5. Find us: Contact details and Map on the Weekly meet-up Groups locations.

Menu bar in two modes, white background once the user scrolls.

Menu bar in two modes, white background once the user scrolls.

 

Homepage
The homepage is a preview of some of the website sections in the Menu bar: When the homepage is scrolled it shows statistics about loneliness, Who We Are, Our Blog, Testimonials, Let’s Talk form.

 

Accessibility
The website supports a scalable text feature that makes all text contents optimized for a wider range of users.

AAAAA.jpg
Accesibility considerations and Help the cause.

Accesibility considerations and Help the cause.

 

Information
The information is updated, simplified and made consistent. The different ways to volunteer are provided and illustrated with icons, and the forms for registering to volunteer make possible to give and receive consistent information. At the same time, we provide a description in the Donation section about the usage of resources received, we called this section Help the Cause (as seen in the previous image of the Donation section). For the events page, we give consistent information in the upcoming events: Date, Time, Place, Title and brief description of the event with an RSVP button to join the event. For past events, we provide a photo gallery. Lastly, as part of the website Footer, we designed the Let’s Talk form to subscribe.

 
The information is divided into upcoming and a photo gallery for the past events.

The information is divided into upcoming and a photo gallery for the past events.

 
Let’s Talk form to subscribe for the monthly updates from Beyond the Conversation, and the social networks.

Let’s Talk form to subscribe for the monthly updates from Beyond the Conversation, and the social networks.

 

Look and feel
Choosing the fonts, colors, images, and icons to create a pleasing and engaging website that conveys the messages that reflect the organization raison d’etre.

Header images communicating what each section is about.

Header images communicating what each section is about.