- Conducted a comprehensive briefing to understand client requirements.
- Conducted competitor analysis to inform design decisions.
Competitor analysis
- Utilized affinity diagramming to organize user needs, pain points, and opportunities.
Affinity map - Clients
Affinity map- Lawyers
- Using the insights gathered from our research, I created two distinct user personas that represent the two primary user groups for our landing page. These personas were developed to help us better understand the needs, goals, and pain points of each user type and to guide our design decisions accordingly.
User persona - Client
User persona - Lawyer
Wireframing: Structured the landing page with a clear hero image, distinct user areas, and bold emphasis on key elements.
Wireframe
Prototyping: After validation with the client, I created the low-fidelity prototype and made the following specifications:
-Place a communication button for WhatsApp, the preferred contact mode for both users.
-Include specialties in the description since the world of law can be vast, and users look for exact matches.
- I placed steps to request service, grouped in threes to increase clarity in the process to contact the service.
Low fidelity prototype
- I placed steps to request service, grouped in threes to increase clarity in the process to contact the service.
- Since this is the MVP of the product, a service request form was included, and future features will show lawyers' information.
Low fidelity prototype - Lawyer section
While recruiting participants for usability tests, we selected a color palette to project emotions to highlight on the website.
Color palette
After conducting a "5-second test" with 3 users and reviewing the low-fidelity prototype with the client, I iterated based on the working prototype and planned usability test tasks. The primary goal was to verify that both types of users could perform main tasks.
The tests were conducted via Google Meets and used the thinking Aloud technique. After each test, participants answered 2 feedback questions:
- How simple was it to complete the tasks?
- How clear was the content you were able to see on the web?
Cardsorting image
Results: Positive feedback on simplicity and clarity. Identified areas for improvement.
Iteration and implementation
Addressed feedback, and iterated on design elements based on user test results.
Desktop mid-fidelity iterations
Extra help: Despite not having a specialty in logo design, I put my knowledge and creativity to help my client with an additional request. To start the creation of the logo, I helped with the brainstorming of the name. After the election, I proposed the logo and integrated it inside the wireframes.
Logo
It was essential to consider responsive design. Therefore, I updated and reviewed all the prototypes for different devices. Then, I began the creation process in Webflow, where I faced the following challenges:
- Creating forms
- Integrating WhatsApp
- Linking documents to download
After the development was complete, I assisted the client in
configuring the domain and host since they already had a host in Cpanel.
Once the website was published, I worked closely with the client to
resolve any doubts and verify all the functionalities. The
final result is available at
www.conectalegal.com.pe
