JOINLU Website Redesign
Overview
As a senior capstone project within the University of Michigan School of Information, my team was tasked with solving a user experience design problem for our client, JOINLU International. After deliberation with the client and thorough research, we determined that the problem that was to be solved for this project was a redesign of their websites.
TEAM
Cecilia Huynh, Emma Peterson, Genia Kapelonis
DURATION
7 Months
User Research
RECRUITMENT
We recruited participants that met the criteria of having:
​
-
Extensive (5+ years) experience in academia, specifically in an engineering field.
-
Extensive experience (5+ years) in an engineering industry.
​​
We reached out to 20 Participants via U-M LinkedIn Alumni Groups and faculty, and aimed to interview 10.
CONTEXTUAL INQUIRY & DISCOVERY INTERVIEWS
We conducted 3 contextual inquiries of the original JOINLU website to understand what process users might go through when navigating the website, as well as what pain points they may encounter. At 3 inquiries we reached information saturation and pivoted to discovery interviews to understand users’ initial thoughts about JoinLU’s website, their motivations for using a company like JoinLU, and what alternatives they would use instead of JoinLU to leverage the UX aspects that those competitors offer.
AFFINITY MAPPING
We began by coding the data from contextual inquiries and user interviews, capturing a rich tapestry of user needs, pain points, and ideas. Using sticky notes where each participant had their own color, we then grouped related insights together, identifying recurring themes and patterns.
KEY FINDINGS
JOINLU was employing two separate websites for clients and experts-- they need to be integrated into one
Users value a consulting group's previous experiences and success stories when deciding to work with them.
Participants prioritize working with companies with a strong reputation, transparency about the process, clear pricing details, and efficiency in time management.
Users desire more information about JOINLU, including pricing details, client experiences, and a clear mission statement that competitors have.
Participants express frustration with vague communication and consultants' lack of initiative in customizing their work to fit project requirements.
STORYBOARDING
Creating storyboards helped to visualize the user journey on JOINLU's platform, highlighting pain points, opportunities, and user interactions throughout the process
SCENARIO
Locating an expert in materials science for an industrial project
SCENARIO
Professor seeking freelance consulting opportunities in the engineering industry
PERSONAS
The user flow diagram served as the foundation for developing the Low-Fidelity prototype, providing insights into our user's journey and emphasizing key functions and interactions on the site.
HOW MIGHT WE...
Business Goal
Redesign JoinLU International's website to improve conversion and enhance user engagement?
USER FLOWS
The user flow diagram served as the foundation for developing the Low-Fidelity prototype, providing insights into our user's journey and emphasizing key functions and interactions on the site.
COMPETITIVE ANALYSIS
It was clear that users felt that JoinLU lacked necessary information and that they valued big names in the industry, so we decided to look at competitors to see what they were doing. We evaluated 4 main competitors listed in the chart below.
REQUIREMENTS FOR REDESIGN
-
Description of services on homepage
-
Descriptive Calls to Action
-
Statistics on homepage to establish credibility
-
Description of ideal clients
​
OPPORTUNITIES FOR DIFFERENTIATION
-
AI-enabled language translation for international collaboration
-
Ability to message other profiles
​
USER REQUIREMENTS
Based on our research findings, we created a User Requirements list that helped us organize the features the redesign needed to include.
Design Phase
LO-FI PROTOTYPE
First, we designed a low fidelity prototype with Figma.
MID-FI PROTOTYPE
We then added more details and developed an initial color palette.
HI-FI PROTOTYPE
This was our final prototype, which the client approved of.
HOMEPAGE
ABOUT
EXPERT
CLIENTS
CONTACT
SIGN-IN
BEFORE & AFTER
ORIGINAL
ORIGINAL
ORIGINAL
REDESIGN
REDESIGN
REDESIGN
ORIGINAL
ORIGINAL
REDESIGN
REDESIGN
INTERACTION MAP
User Testing
USABILITY TESTING
We conducted a round of informal usability testing to answer the following questions:
-
Does our design give users an accurate and complete understanding of what JOINLU is and does?
-
Does our design allow users to easily contact JOINLU representatives based on their respective role (i.e. expert and client)?
​
Users were told about our study method, objectives, and tasks they needed to complete while we took notes and observed.
​
A green letter ‘Y’ represent a user successfully completing a task with no difficulty
A red letter ‘N’ represent a user not being able to complete a tasks at all
A yellow letter ‘M’ represent a user slightly have difficulty with extra comments made in a separate document.
A gray with ‘N/A’ represents Not Applicable.
Data Analysis
RESULTS FOR ABILITY TO LOGIN
3/12 of users had somewhat negative comments about the visibility of the login CTA
12/12 users took got to login by using navigation menu on homepage
12/12 users took between 2-4 seconds to locate the login
RESULTS FOR USERS UNDERSTANDING OF JOINLU WEBSITE
67%
SCROLLED TO THE BOTTOM OF THE HOMEPAGE
67%
CHOSE TO READ THE MISSION STATEMENT ON THE ABOUT PAGE
CLICKED CTA ON CLIENT/EXPERT PAGES
100%
58%
75%
92%
83%
READ THE STATISTICS
AFTER VIEWING CLIENT/EXPERT QUOTES, CLICKED CTA
USED THE SEARCH FUNCTION
USED THE FOOTER NAVIGATION BAR
HEATMAP
By analyzing where users navigated and focused their attention, we aimed to assess the effectiveness of our design in providing users with a clear comprehension of JOINLU's offerings and facilitating easy contact with company representatives based on their roles as experts or clients. Red orange indicates most common interactions.
ORIGINAL HOMEPAGE
On the original website, the "Think-Work-Together" button, which led directly to a sign-in page, was the most engaging element for users. However, this caused many visitors to leave the site prematurely, without understanding the company's services and the benefits they could offer potential clients.
On the redesigned landing page, users are most engaged with not only the "Contact Us" button but also the statistics and a featured article, which enhance their perception of the company's credibility. Additionally, an explanation of the company's services further informs and retains potential clients.
Users are also drawn to the terms "Client" and "Expert," which help attract potential users by making them feel they have a place within the company.
REDESIGN HOMEPAGE
STATISTCAL ANALYSIS
From there, we used the t-test study to analyze how users ranked the original and redesigned website to see if there was any statistical significance in our redesign both through a visual and comprehensive lens.
T-test analysis: P-value was found to be 0.0027, proving the result to be statistically significant (p < 0.05).
Data collection for t-test study. 0 indicates strong understanding of the website, 1 indicates mild, and 2 indicates weak comprehension.
Finally we compared the original website with the redesigned website, indicating user understanding of JOINLU's work on a scale of 0 to 2. The original website group averaged 1.75, while the redesigned group averaged 0.63, a significant difference confirmed by a t-test with a p-value of 0.0027. This demonstrates that our redesign markedly improved users' comprehension of JOINLU's identity and facilitated easier contact with representatives.
SURVEY ANALYSIS
Our last form of analysis was by looking at the answers we received from our post survey portion in the test.
We asked users to rate their willingness to work with JOINLU on a scale from 1 to 10, with 1 being "Not at all" and 10 being "They would be my first choice."
Graph 1 shows an average rating of 5.625, indicating users were somewhat neutral but leaned positively towards working with JOINLU.
Implementation Recommendations
As our contract with our client ended, these are our final implementation recommedations.
MAINTAIN MOBILE & DESKTOP CONSISTENCY
Due to time constraints and the client's initial request to only redesign the website, we did not create a mobile design. When converting our desktop designs to mobile, a dedicated team will be essential to ensure proper structural layout before implementation.
ACCESSIBILITY CHECKERS
While we created our designs with accessibility in mind, it is always good to keep accessibility in mind when developing a website. There may be some areas that were overlooked or other areas that could be made even more accessible. There are many free accessibility checkers such as WAVE and Axe DevTools that we recommend implementing.
ALPHA BETA TESTING
Internal alpha tests will ensure team alignment on the new design, while beta tests with a small user group will provide meaningful data for the final version. Despite having some user testing with our interactive prototype, further testing after development is crucial.
Reflection
Reflecting on this process, we encountered challenges in balancing our client's needs with design protocols and standards. This experience underscores the iterative nature of UX design, which I love—gathering client feedback and iterating upon it. Obtaining the necessary information from the client was also difficult, as the website required more details than were initially available. Task delegation was crucial, as we needed to self-organize despite holding the same titles.
I am grateful to our client for being so collaborative in this process and look forward to seeing the live changes!
Thanks for following along!
