XFUND
Website redesign for a venture capital firm
My Role
Project Lead , UX Researcher
Tools
Sketch, Adobe XD, Invision, Photoshop, Paper And Pen
Key Skills
Heuristic Evaluation, User Survey, Competitive Analysis, Rapid Ideation Design Anatomy, Prototype, Usability Testing
Deliverables
Website Redesign
Project Team
1 UX Designer, 1 UX Researcher And Project Lead
PROCESS
Before we started to work on this project, we had to layout a plan of how we would approach this project. The usual process of our approach was to follow the basic the process which involves different stages while developing the product.
DEFINE
Overview
Xfund is a venture capital firm that provides seed and early stage capital to entrepreneurs for their businesses. Xfund was the client I worked for during the 10 week immersive course at General Assembly, San Francisco. In this project, I was chosen to lead this project and as a UX researcher to interact with the client directly and know the goals and expectations with our design solutions.
The Problem
During our first meeting with client, and after initial discussion to get an overall understanding of the deliverables, the following challenges were addressed by the client:
Lack of strong visual presence
Less number of visitors on the website
Lack of number of users for email/newsletter subscriptions
Not enough people contacting the business
The Deliverables
The expected deliverables for this project were the following:
Research process to support our ideas and decisions
Landing page and contact page redesign with strong Call To Action (CTA) buttons
Moodboards and style guides
Clickable prototype
High fidelity mockups
User test results
SOLUTION
A final set of high fidelity designs were delivered along with prototypes, well researched plan and usability test results.
Discover
Heuristic Evaluation | User Survey | Competitive Analysis | Findings | Revised Deliverables
Heuristic Evaluation
We first evaluated the current Xfund website by applying UX design principles to find out the opportunities of improvements. By evaluating the current website we found out the following problem to be resolved:
Banner statement is not clear
No strong CTA (Call to action)
Irrelevant images
No heading for separate content
Inconsistent layout
Two different brand logos
Lack of information
Inconsistent social media links
Inconsistent footer
No strong CTA for subscription sign up page
We found there was plenty of scope for improvement in the color scheme, clarity, copy, navigation, images used and general information architecture of the entire website.
User Surveys
Our next step in the research process was to conduct the user surveys of the current website and find out what the users experienced on the current website. I conducted a survey online via google forms and had 15 candidates who participated in the survey. The questions asked during the survey were to find out the views of the users about the landing page, visual aesthetics, intuitiveness while browsing the website and finding the subscription of newsletter.
Landing Page
Only 1 out of 15 participants understood the banner statement "We support lateral thinkers"
Visual Aesthetics
1 out of 15 participants found the visual aesthetics of the landing page to be visually fine. Remaining participants were not much impressed with the visual appeal of the website. They did not understand the relevance of images and text. They also thought the layout was poorly designed.
Intuitive Navigation Of The Website
5 out of 15 participants found the website to be intuitive enough to navigate the website easily
Subscription Of The Newsletter
All 15 participants found difficulty in subscribing to a newsletter
Competitive Analysis
The last step in my research process was to do competitive analysis. This was done in order to identify the standard features, content and best practices followed by other competitors websites. We also got an insight as to how the competitors approached the design problems.
Top 5 venture capital firms websites were analyzed in order to carry forward with our research process. The top 5 firms were as follows
Sequoia
Greylock Partners
Accel
Spark Capital
Founders Fund
Findings
In terms of information, we found that XFund has most of the information on their website which is not displayed appropriately that can grab the attention of the people. In terms of any information that is missing is the SEO (Search Engine Optimization) keywords which generally helps the sites to appear on the google search engine.
Testimonials, videos and articles are missing on the current XFund website. In terms of features we found out that strong CTA buttons which drives the people to contact or subscribe for newsletters is missing.
Once the research process was done, we synthesized all our learnings of what good landing page and contact page should look like. Therefore we came up with an idea of creating anatomy of a landing page and contact page which helped us in making our final design solution.
Revised Deliverables
Once all the research was done, we realized that instead of just re-designing landing page and contact page, the whole website needs to be redesigned in order to gain more attraction. Therefore we changed the scope of our deliverables and were determined to go out and beyond to deliver the design solutions for the entire website.
IDEATE
Anatomy of Design | Design Goals | Wireframes
Anatomy of ‘DESIGN’
After lot of research and evaluation of the website, we took a call of redesigning entire website instead of just focusing on landing page and subscription flow.
Along with the wireframes, we designed the anatomy of the design which helped to us to dissect between 'above the fold' and 'below the fold'. Sections are created to give us a better understanding of all the requirements in ' above the fold' and 'below the fold' of a landing and contact page. We followed the same anatomy for the other pages too.
Design Goals
Based on the design principles we set our design goals. The design goals are as follows:
OBSERVABILITY
More items fall on the 'above the fold' page to make sure user knows to continue scrolling
PREDICTABILITY
Telling the user what they should do, what will happen, where will it take them. Making it more intuitive to browse.
Wireframes
TESTING
Usability Testing of Mid Fidelity Mockups
Usability Testing 1
Once we had our initial wireframes, we did some testings with the potential users. We wanted to test how intuitive our proposed design solution is in terms of newsletter subscription and contact information page
The task and findings of testing the prototype with the users are as follows :-
The Task
How intuitive is the website?
How well directed you feel with the newsletter subscription and contacting XFund?
Findings
CTA button missing in 'news and article section' on landing page
The header statement of sections like testimonials and portfolios were confusing
Absence of contact CTA at the bottom of the landing page
Word Submit in the contact page form was confusing
Users wanted options in the services offered in contact page form
Solutions
Added CTA 'See updates' in 'News & Article section'
Added CTA for contact at the bottom of the page
Header statements of 'Testimonial & Portfolio' section rearranged
Changed the word 'Submit' to 'Let's talk'
Added filter option on the contact page to sort out inquiries
Final Design
Moodboards and UI Style Guide | High Fidelity Mockups | Usability Testing 2 | SUS Chart Score
Moodboard and Style Guide
In order for the team to get the clear vision on how the new website will look like, one of the process we took was to build mood boards and style guides for the new XFund website.
2 options were designed for building the website. Finally mood-board 1 was selected for the final designs.
Moodboard 1
Moodboard 2
High Fidelity Mockups
Usability Testing 2
Once we had our high fidelity screens ready, we did some testings with the potential users. The tasks were based on the same set of questions as asked during the survey, and usability test 1.
The Task
How intuitive is the website overall?
How well directed did it make the users feel with the newsletter subscription and contacting XFund team?
Landing Page
All 7 users were clear with the banner statement on the landing page
Visual Aesthetics
All 7 users found the website to be more visually appealing
Intuitive Navigation of the Website
All 7 users found the website to be easy and intuitive
SUS Chart Score (System Usability Score)
Recommendations
Project Learning
Subscription of the Newsletter
All 7 users felt well directed for subscribing to newsletter due to strong CTA buttons placed strategically
In order to check usability of any product designs, SUS scale is the most easy and convenient way to know how the users feel about the design solution provided by the team
For the XFund website redesign challenge, we conducted the SUS test at the end of the final design usability test. Each participants were given the questionnaire to fill and rate the design accordingly. In total we scored 91.07 which is above 68 and is considered to be 'Above Average.' Though we cannot say that it’s the best design solution provided, but it is better than the current design which is what SUS helped us in achieving.
Apart from some of the below key essentials for the new XFund website, the most important element to gain visibility online is to have content with SEO (Search Engine Optimization) keywords which enables the website to appear on online search engine portals.
Some of the other recommendations provided by us which will help the XFund gain more recognition and attraction online are as follows:
Global navigation
Global footer
Header statement With user language
Hero image
CTA (call to action)
Strong brand content
SEO keywords
One of the main learning from this project was to handle the client apart from providing user centric design solution to the problem. Understanding the client needs even when the client is unaware about what he/she needs was the challenging part of the project.
Leading this project was a great learning experience within itself. To strike a balance between getting things done and understanding the potential of my teammate was a bit daunting in the beginning but as we progressed, it became easier to set the targets and goals day by day keeping the project timeline in the mind.
We as a team are happy that we could overcome challenges like not having a complete set of information on the client needs, and the fact that we could not meet our client as often in person as we would have liked to. Just one personal meeting was not enough but we managed to hit the goal by having frequent zoom meetings with our client and getting feedback from him on regular basis.
If given a chance we would like to explore more into log-in process before landing up on the homepage. Also we would like to have more user interviews, give more time into design consultation and ideas so we could have more design options for the client.