This was a sketch for an example layout of our "Videos" page that would display our catalog of videos, categorized by topic.
Redesigning the ReLyfe Website
ReLyfe is a student organization that co-creates video and blog content with individuals who share stories around their life experiences, vulnerabilities, and advice.
We wanted to create a space that celebrated vulnerability and inspired others to come forward with their story.
We started with sketches and hosted our final product on the Squarespace platform.
Our target audience is college students. We hoped for the product to be a one-stop-shop to learn about our organization and discover content.
The business challenge we hoped to solve was to simplify the user journey from discovery to engagement to contribution.
I am the Lead Website Designer. Another team member joined me after the Digital Interface phase in designing the style guide, co-building website on Squarespace, and conducting user tests.
I followed an iterative-prototyping approach that was driven by user insights.
Sketches
I started with quick sketches of some half-formed ideas of different features and layouts on the new website. Sketches tend to provide me a foundation for what's possible and worth exploring.
Brainstorming was the main purpose of this activity
Knowing users may seek interactive elements and ease-of-use in discovering content influenced sketches
Drew 20 sketches covering different parts of website
Main difference between sketches were layout of content
Layouts focused on content architecture
Pitched sketches to rest of team to let best sketches guide design of paper prototype
Sketches informed the build of a complete paper prototype
Paper Prototype User Testing
Before moving into a digital interface, I conducted a series of user tests over video call to reveal unintuitive user pathways.
Aiming to understand what decisions users make based on what information and available actions they notice
Started testing once primary pages on paper prototype were designed
Test subjects were primarily college students with various levels of familiarity with the organization
Remote testing with limited direction (prefaced tests with direction for them to spell out their thoughts while navigating)
Key insights included:
Uninviting landing page: users felt intimidated to interact with the feature and tended to go straight to navigation bar to start their journey.
Poorly defined pages: many users went looking for specific pieces of information in "wrong" pages.
Navigational confusion: lack of guidance and optionality for users to interact with parts of the website they are interested in.
Each insight informed a potential solution. Most of those were minor edits to create more user-friendly features in the next iteration.
The digital interface took the website from paper to screen
The new landing page highlighted our main content and provided users insight into the work we do.
Digital Interface
I incorporated minor edits to the design of my digital interface; but spent most of time, learning how to create a realistic look-and-feel for the actual website. I designed the digital interface on Figma but did not venture into functionality yet.
Some changes included:
Replacing landing page with home page to facilitate start of journey. The goal was to make discovery of content more accessible.
Inserting CTA buttons to create a more intuitive user flow in exploring other parts of the website.
Reformatting "Share your Story" page to have options be more consistent in terms of content layout and actionable next steps.
Digital Interface User Testing
We wanted to see how users responded to an interface that looked more like a website with organizational language and consistent style guide.
Aiming to see how users responded to look-and-feel of website AND understand how they were absorbing information about organization and purpose of content
Tested after completion of entire digital interface of website
Test subjects included young adults and middle-aged individuals. We wanted to test across a broad category of groups.
Key insights:
Home page threw users into content too quickly: users were hoping to learn about the mission of the organization before being taught how to use the website
Layout of content did not have emotional depth nor purpose: main pages were bluntly introduced and significance of page was not well explained
Share Your Story section was overwhelming with text and was uninviting: users felt overwhelmed by the mountain of text and felt like contributing to ReLyfe was a complicated task
General feel was cold and surface-level engaging: CTA actions and language needed to be more powerful.
These insights led us to:
Look closer into the user journey and identify the ideal path.
Invest time in creating a warm, inviting, purposeful environment for users (similar to the one we'd create when we interview individuals for our video content).
Based on user feedback, we started the user journey with our vision statement on the home page to entice users and provide them a structured flow to navigation.
Working Website
When we moved into Squarespace, we started by familiarizing ourselves with templates, standard features, and basic capabilities to understand how we could integrate our digital interface into working functionality. As we designed on desktop, we simultaneously were looking at compatibility for mobile design.
Our insights resulted in bigger changes. Some of which included:
redesigning home page to follow an intuitive user journey
providing depth to categorization of videos by creating topic-specific pages
decorating website with language and tonality that matched ReLyfe's brand
redesigning "Share Your Story" page to be less intrusive and more welcoming.
Currently, we are in the process of analyzing our user tests from the working website.
We conducted user testing similar to how we have been doing before. This time, we also conducted a post-test survey to ask about their experience on the website. Example of survey questions included:
On a scale of 1-5, how satisfied are you with the discovery process of content on the website?
On a scale of 1-5, how comfortable are you about reaching out to ReLyfe through the website?
On a scale of 1-5, how well do you feel like you understand ReLyfe's mission?
If you could change one thing about the website, what would it be and why?
Why will you continue to use this website? What will stop you from using this website in the future?