Synopsis
Product Design Internship
Role:
Research, Design, Graphic Designer, Test, Development
Timeline:
11 weeks
Tools:
Maze, Figma, Visual Studio Code
Platform:
Web and Mobile
Problem: Low conversion rates
iSolvRisk Inc., a company committed to enhancing the lives of college students and faculty through effective risk management, required a revamp of its website. The existing company site was not achieving the desired conversion rates for the "Daydreamer Newsletter" (later transformed into “Request a Demo”) and failed to communicate its mission to users adequately. iSolvRisk Inc. aims to streamline its website to improve conversion rates and customer engagement.
Before I could create a solution to their problem, I had to analyze the current state of the site and conduct user testing to pinpoint why they were encountering this issue in the first place.
Design Process
Research
Current Site Analysis: Competitors had clearer CTA’s
To initiate the redesign process, I conducted a thorough analysis of the website's current state. Employing a SWOT analysis, a competitor analysis, and a lead optimization conversion audit, I unearthed two crucial insights:
From the competitive and SWOT analysis, I determined that our existing site significantly lacked pertinent content and a distinct call to action compared to our competitors.
If you want to see the above deliverables and other site analysis deliverables in depth, click here.
The lead optimization audit revealed that a majority of our users accessed the site via desktop, predominantly through Chrome. Throughout the development phase, I prioritized testing the site on Chrome and adopted a web-first approach.
User Research: Users were uncertain as to what iSolvRisk was about
To identify the factors hindering the company's ability to achieve desired conversion rates, I aimed to assess users' initial perceptions of the site to evaluate the clarity of our call to action. Utilizing Maze, I conducted a 5-second user test and analyzed the feedback from around 10 users.
Following this assessment, it became evident that users were uncertain about our company's core offerings. The excessive use of our mascot astronaut images was proving counterproductive, making it difficult for users to locate valuable information promptly.
To view all responses, click here.
To gauge the effectiveness of the site's content when users had the opportunity to explore it at their own pace, I conducted three comprehensive user tests. I devised a set of questions to inquire about users' impressions and gather feedback while they navigated through our site. Following the collection of feedback, I analyzed the data using an affinity diagram.
Questions
Affinity Diagram
💡It emerged that half of the feedback pertained to the site's content, with users expressing confusion regarding both the written material and visual elements, as well as their relevance.
Moreover, there was significant negative feedback regarding the company's mission statement, with users expressing heightened confusion due to the excessive use of jargon. It became evident that the site needed to overhaul its existing content and replace it with material that is both relevant and easy to comprehend.
Solutions
With these new insights in mind, I developed a three part solution:
Through simplifying textual information, crafting pertinent graphics, and restructuring the content layout on the site, users should experience enhanced confidence in navigating and understanding the company's offerings and the products it promotes. As a result of these improvements, iSolvRisk anticipates a substantial rise in customer engagement and conversion rates, driven by the increased assurance and clarity instilled in its user base.
Ideation
Information Architecture
With a new influx of information gathered by the company and leveraging card sorting data previously conducted by iSolvRisk's research team, I devised an information architecture to structure the content in alignment with both the company's objectives and users' expectations.
Once this framework was established, I proceeded to develop wireframes for the site.
Mid-Fi Wireframes
Taking into account the company's primary objective of encouraging users to sign up for the newsletter, I prioritized ensuring that the newsletter signup option remained prominently displayed above the fold. Additionally, I heeded users' feedback emphasizing the importance of being able to access the mission statement before committing to any sign-up processes.
Desktop Wireframes
Mobile Wireframes
Testing
Prototyping and Testing: Users suggested to condense navigation
I developed a prototype of the navigation system to facilitate users' navigation throughout the site and subsequently conducted testing. Through this process, it became apparent that users perceived the “Leadership” page as redundant and suggested its integration with the “About Us” page for improved coherence.
Iteration: Combined “About Us” and “Leadership” pages
Based on the user testing results outlined above, I merged the "Leadership" and "About Us" pages, positioning the Leadership content towards the bottom of the page. This strategic adjustment reflects the understanding that users are more inclined to learn about the Leadership team once they grasp a clear understanding of iSolvRisk's identity and offerings.
UI & Prototyping
High-Fidelity Wireframes: Created a lot of original graphics
Following the required iterations, I proceeded to integrate our established design system into the mid-fidelity wireframes. Addressing a notable concern raised by our users regarding the absence of relevant imagery, I crafted relevant graphics utilizing our mascot and other graphical elements to maintain brand consistency while enriching the content for our users. These graphics were meticulously designed using Canva and seamlessly incorporated into the freshly updated high-fidelity wireframe.
This is a small snippet of the graphics and wireframes I created, if you want to see more, click here.
Development
Final Product
While this ended my process for the UX/UI portion of the project, I then moved on to creating these designs into reality with Visual Studio Code utilizing HTML, CSS, and Bootstrap, which can be its own case study!
Future Improvments and Insights
This was the first UX project I had done for a company, so it was a great learning experience. There is certainly a new pressure you face when you are creating work for an actual company, but it is the positive kind that pushes you and motivates you to do your best! Here are some things I would improve upon given more time:
Improve the responsiveness of the site: Before this project, it had been quite a while since I coded a website, so I had to relearn some code; especially Bootstrap. I utilized Bootstrap’s responsive grid system to create a responsive website, but the translation from web to tablet to mobile could still use tweaking. In the future, I will consider using media queries for fine-tuning the responsiveness of the site.
Track customer conversion rates: I am excited to track customer conversion rates to see how my designs improve the user experience!
During every project, there will be obstacles and essential lessons you can take away from the process, here is what I learned:
Get feedback early and often from stakeholders: Working for a business was new for me, so I wasn’t used to sharing some of my earliest ideas and sketches with my design lead and CEO of the company. It is important to share your designs and ideas often with your stakeholders so that you are both on the same page and can make necessary adjustments sooner rather than later.
Leave notes at the end of the work day: Many times I would hop onto Figma and spend about 10 minutes trying to figure out what I was doing next and where I left off. Leaving notes for your future self with details of what you accomplished that day and what needs to be done the next day is a huge game-changer!