Client
Deliverables
Branding
Website
UI/UX
Overview
I redesigned a website for Hypothesis, an online annotation plugin, to elevate its functionality and aesthetics. The tool empowers users to comment and share thoughts on diverse websites, delivering an enhanced experience for engaging in online discussions and collaborative annotations across various platforms.
Problem
The Hypothesis team faced a visibility challenge as their current user base was predominantly from the educational field, and they aimed to diversify their audience. The existing website wasn't effectively conveying the value of their annotation tool, which led to inability to attract and engage new users. They wanted to upgrade the website to better showcase the tool and its capabilities.
Goals
To address the problem, the focus was placed on a website redesign with the primary goal of increasing its attractiveness to a wider audience. The approach involved highlighting the features and benefits of the tool prominently on the website to make it more appealing to first-time users. By enhancing the clarity of what the tool offers and making it easily understandable, the upgraded website aimed to encourage greater interest and adoption among diverse users.
Research & Analysis
Before I began the design process, I conducted inspiration research and formulated three distinct concepts: UI Graphics, 3D Abstract, and Digital Meets Analog. These concepts were selected for their trendy aesthetics, aimed at broadening the audience appeal.
Employing vibrant background colors that instantly catch the eye, along with integrating captivating UI graphics in the hero section to showcase the product at a glance
Integrating 3D abstract objects alongside UI graphics to provide a visually trendy yet playful element to the website
Incorporating a collage-style approach to juxtapose digital annotations with hand-written annotations, creating a contrast between the two mediums.
Initial Concept Designs
Utilizing the three distinct concepts I developed, I have designed and presented three hero designs to showcase the overall essence of each concept to the clients.
Concept A & B
The client selected Concept 1: UI Graphics because of the product showcase on the homepage. Building upon their preference, I crafted two additional variations to offer them a broader spectrum of design options.
In Concept A, a classic side-by-side layout is employed in the hero section to present a comprehensive view of the product. I designed and animated a collage of their product's UI, offering multiple perspectives of the item.
Concept B features a top and bottom layout, encouraging users to scroll down for further exploration. Here, instead of utilizing a collage, I enlarged the animated UI to emphasize the primary use of the product. Additionally, I incorporated a 3D globe, representing the dot in their logo, as background elements to add depth to the design.
Concept A
Concept B
Final Design
After some design revisions, I finalized the design based on Concept A. The UI animation was enhanced with 3D animation, adding depth to the clean and minimalistic website. Additionally, I integrated diagonal background elements using their color palette to separate each section.
In addition to designing the website, I utilized After Effects to produce several animations showcasing the product's UI and a globe animation symbolizing its global accessibility. These animations illustrate how the product is utilized and highlight its capacity to bring individuals worldwide together for the exchange of thoughts and ideas through annotations.
Color Palette
Red
#BD1C2B
White
#F0F6EF
Light Blue
#9297AC
Dark Navy
#293041
Black
#1D1D1D
Teal
#087E8B
Typography
UI Kit
Hi, I'm Kelly, a Digital and Motion Graphics Designer based in Rochester, NY.
© 2024 Kelly Choi. All Rights Reserved.