Nolo
Homepage Redesign
Nolo
Homepage Redesign
Project Overview
Nolo.com is a consumer facing website that sells DIY legal products, connects consumers with attorneys and provides legal information through articles. The project set out to enhance the homepage with two primary goals:
- Increase number of searches on the site
- Drive users into the Nolo store
I worked collaboratively with another designer to take the homepage redesign project through the UCD process. We started with the research and discovery phase by conducting a competitive analysis and gathering data from Google Analytics. We then started the iterative design process through sketching, lo-fi wireframes and finally high fidelity interactive prototypes of the responsive page. We were also in charge of holding weekly status meetings with the key stakeholders to ensure their voice was being heard throughout the process.
My Role
I worked collaboratively with another designer throughout the entire process. I conducted the competitive analysis, created sketches and lo-fi wireframes and interactive prototypes. I was also in charge of creating the visual design for the page and the iconography.
Tools
- Google Analytics
- Paper Sketches
- Axure
- Adobe Illustrator
- Adobe Photoshop
The Research Process
We utilized a number of research methods to kick off our homepage redesign. We wanted to create a baseline for our research, so we started with Google Analytics. This would provide us with information surrounding the current homepage. We wanted to determine where people were searching on the site and what they were searching for on the site. This would provide us insightings into what our users were looking for the most when visiting our site and how soon they start their search.
For example:
Where they were starting their search - If a user started their search on the homepage that showed us that users were going directly to the search rather than clicking around to find it themselves.
What they were searching for - If there were patterns in the popular search terms then we can figure out what the majority of our customers were looking for when visiting nolo.com
The second method we used for research was a heat-mapping tool called CrazyEgg. This allowed us to gather insights into where our users were clicking on the current homepage. We utilized this to determine where customers clicked most often and how far down they scrolled when looking at the homepage. This would help us determine what call-to-actions were most important and how low down we could reasonably assume users would scroll down to looking for information.
The last method we used was competitive analysis. We did an in depth review of our highest competitor’s homepages. This allowed us to determine what legal topics our competitors thought were homepage worthy, as well as what we thought they were doing better or worse than we were currently doing. It also gave us insight into how the legal industry is utilizing design trends.
The Design Process
We started our design process by sketching out our ideas. I believe that sketching is a great way to start the design process, because it allows you to quickly and easily lay out some ideas. It makes it easy to explore a wide range of ideas without the high cost of time. My fellow designer and I conducted iterative feedback session during which we presented our sketches and talked through the process.
Once we believed we had solid design ideas that we believed would help increase searches and traffic to the homepage we moved into Axure to build out our high-fidelity prototypes. We created three different versions of the homepage that played on our ideas differently.
Iterative Feedback
We used Optimizely to gather feedback on our homepage designs from our users. We created a survey with Opitmizely to determine which homepages our users preferred the most and which versions they found it easiest to conduct certain tasks. These results allow us to determine which version we should try out first. Once launched we planned on using the baseline analytics captured earlier in the process as our means for determining success of increasing traffic to the store and the number of searches.
NOLO BEFORE REDESIGN
NOLO REDESIGN
