GeekHack Responsive Design
My Role: UI/UX designer
Tools used: Figma, Canva
GeekHack
Background
GeekHack is a dedicated online community focused on mechanical keyboards, offering forums, group buys, and discussions related to custom keyboard builds and accessories. My goal was to enhance the user experience by implementing responsive design principles to ensure accessibility and usability across various devices, including desktops, tablets, and smartphones.
Design Process
For GeekHack, I began with research to understand the community's needs, conducting analysis and interviews to identify pain points. This led to creating personas and user flows, improving navigation and usability.
I sketched initial concepts, iterated based on feedback, and developed high-fidelity prototypes focusing on design details. These were tested with real users, leading to further refinements.
The goal was to introduce modern elements while keeping the design familiar, enhancing usability and making GeekHack more accessible for everyone.
01.
Empathize
02.
Define
03.
Ideate
04.
Design
05.
Prototype
1. Understanding the problem
Interview Insights
I conducted user interviews to understand the needs and preferences of the Keyboard community.
Interview Insights:
Participants use GeekHack to connect with the keyboard community but find it difficult to use on mobile devices because the site isn't responsive.
​
They prefer using desktops or laptops instead. They mentioned problems with notifications, text formatting, and finding information, which make the site frustrating to use. While they value the information GeekHack provides, they are unhappy with the site's design and usability, and believe it needs significant improvements.
GeekHack Mobile design is exactly same as the website UI design.
​
Mobile version has many issues including reading, color values, CTA's and unresponsiveness throughout the site.
Survey
To create a pie chart from the survey results of 8 participants, I first organized the data by categorizing the feedback into key areas. The main feedback revolved around navigation issues, text size, difficulty accessing features, slow loading times, and layout inconsistencies. Additionally, I gathered data on user satisfaction with the current mobile experience.
​
I then calculated the total number of responses across all categories, which came to 26. From there, I determined the percentage each category represented of the total responses. For example, 19.2% of the feedback highlighted navigation issues, while 15.4% mentioned text being too small or hard to read.
With these percentages in hand, I was able to create a pie chart that visually represents the data.
2. Define the problem
1. Competitive Analysis
Competitive analysis Insights:
1. Responsiveness
2. User Interface
3. Content Formatting
4. Notifications and managing information​
3.Ideate
1. POV's & HMW's
Point of View Statements and How Might We Questions helped frame the design challenges and opportunities for improving GeekHack, ensuring that the site meets the diverse needs of its users while enhancing overall functionality and engagement.​
2. Project Goals
I want to enhance the user experience by making sure the site works well on all devices. Users should be able to control their notifications, and the site should be accessible to everyone, including those with disabilities. I would like focus on user satisfaction by making UI accessible and make the design responsive, and ensure navigation is easy so users can quickly find what they need.
​
3. Final Personas
From here, I created my personas based on the feedback gathered from interview participants and by envisioning different scenarios where users interact with GeekHack. For example, I considered how enthusiasts might use the site to stay updated on the latest keyboard trends or how will a newcomer use a IC to create the interest check post.
Persona: 1 - Jonathan
Persona: 2 - Neena
Persona: 3 - Liam
4. Feature Set
Once I had identified the key questions and concerns from users, I focused on envisioning GeekHack’s new features. It was a meticulous activity to take the feedback and needs from users and translate them into practical solutions. For example, addressing concerns about the current lack of responsiveness, I envisioned a feature where the site would adapt seamlessly across all devices, ensuring a smooth experience whether users are on mobile, tablet, or desktop.
Information Architecture
1. Sitemap and User Flows
To refine the design, I developed user flows and task flows. This process helped me grasp how users navigate the site and allowed me to adopt a user-centric approach to make the design more accessible. Through this exercise, I identified several gaps in the original GeekHack design and worked to address them effectively.
I created the User flow for Threads feature for the GeekHack , However Due to lack of time on this project I had to stop working on this feature and I had to finish what was in progress.
I would like to come back to this feature to make the design more accessible and completed.
4. Design and Prototyping
1. Low Fidelity Designs an iterative journey
I then moved on to the actual design phase, beginning with sketching ideas for the pages. I created low-fidelity designs to gain more clarity on the layout and functionality. This approach allowed me to experiment with different concepts and refine the structure before progressing to higher fidelity designs. By visualizing the pages in this early stage, I could ensure that the design aligned with user needs and addressed the identified gaps effectively.
Sign Up/ Sign In page
Design A
Landing Page
Create a New Interest Check
Design B
Design A-
Design A is the original design of GeekHack's landing page.
Users showed concerns about responsiveness and adaptiveness of the website.
Desktop designs are accessible and visibly appealing however, they are not usable as is on much smaller screens(mobile design).
​
Design B-
I created low fi designs using the research data of GeekHack's landing page to make it more accessible and responsive on all the devices.
I then did the user testing for low fidelity designs of the Landing page, Sign up page and Create a new topic page. and the results are as following:
1.A Low-Fidelity user test results
​​
​
The goal of low-fidelity testing was to evaluate the initial design concepts for usability and identify improvements before moving to high-fidelity prototypes.
​
Methods:
​
-
Participants: 5 users with varying technical expertise and familiarity with GeekHack were asked to perform the low fi design prototype .​
​
-
Observation: All the users were satisfied with the concept of the New design. I asked them to perform sign in/ and Create a new topic tasks in low fi designs. As there were no clear CTA's I told them all the required path beforehand , 4 out 5 users were easily managed to complete the tasks without major issues.
Results:
​​
-
User Satisfaction: All users were satisfied with the navigation and content clarity.
-
Participants easily followed intended navigation paths and recognized buttons to perform tasks.
2. Hi fidelity Designs
The hi-fidelity designs for the GeekHack project have been developed to provide a clear and detailed visualization of the final product. These designs focus on a polished and functional interface, ensuring that user needs are met while enhancing overall usability.
Key Aspects of the Hi-Fidelity Designs
Visual Appeal:
The designs feature a modern and engaging aesthetic with high-quality images and a consistent color scheme, creating an attractive and cohesive look.
User-Friendly Navigation:
The layout is designed to be intuitive, with clear and accessible menus that make it easy for users to find and interact with different sections of the site.
Responsive Design:
The hi-fidelity mockups are optimized for various devices and screen sizes, ensuring a seamless experience whether on mobile, tablet, or desktop.
Enhanced Functionality:
Features like advanced search, customizable notifications, and improved content organization are integrated into the designs to address previous gaps and user feedback.
Accessibility Considerations:
The designs include features for better accessibility, such as readable fonts, intuitive controls
Registration Page- Desktop
Landing Page- Desktop
Create an Interest Check form
Marketplace/ Threads/ Topics page
5. User Testing and Iterations
User Testing Hi fidelity Designs
The main goal for the high-fidelity design was to evaluate the user experience and ensure it meets all user requirements. This included
1.Checking visibility and accessibility on mobile devices,
2. Adjusting font sizes for readability, and
3. Creating a design that is both visually appealing and user-centric.
All participants found the GeekHack website easy to navigate on both desktop and mobile devices.
They quickly identified key sections, such as forums, group buys, Interest Checks.
The end-page navigation was well-received, allowing users to easily find their way back to the main sections.
​​
Participants clearly understood the site's focus on mechanical keyboards and enthusiast communities. However, they felt that adding more visuals or detailed content could enhance the overall experience. but they appreciated the clarity and usability.
​
1 .Time to complete register now task: less than 50 seconds
2. Time to find and create a new interest check: less than 3 minutes
3. Accidental clicks: 1 participant out of 5 participants accidentally clicked on the go to homepage instead of creating a new Interest check post
​
​
Iterations
All participants found the GeekHack website easy to navigate on both desktop and mobile devices.
​
Here’s a summary of the updates and iterations made to the GeekHack designs:
Registration Form:​​
Text Addition: Added “Yes” and “No” options to make the registration choices clearer and more intuitive.
Design Update: Changed the design to improve usability and visual appeal.
Profile Section:​
User Feedback: Users recommended adding easy access buttons.
Updates: Added "Register Now" and "Login" buttons to the header for improved navigation and user convenience.
New Interest Check form:
​User Feedback: The design is visually appealing but the title and text sizes should be different. Forums are supposed to be readable.
​
Updates: I changed the design of the submitted Interest check to make it readable and easily accessible. I changed the background color to make it distinct from the page.
These changes reflect a focus on enhancinng user experience based on feedback and making key actions more accessible.
​
Responsive Design
Phone
Tablet
Responsive design ensures that text remains legible, images scale proportionately, and navigation stays intuitive, regardless of whether the user is on a desktop, tablet, or mobile phone. By optimizing each aspect of the design for various devices, it not only enhances usability but also creates a visually appealing interface that maintains its functionality across platforms.
Responsive Design Impact and Learnings from this project
The impact of this project was truly transformative, not only for the users but for my growth as a designer.
By refining critical design elements—such as adding clear, descriptive titles, distinct backgrounds to separate content, and bolding key features—I was able to enhance both the functionality and aesthetics of the site.
The biggest change came through making the site fully responsive.
Ensuring responsiveness means the design can adapt seamlessly to various devices, including tablets and smartphones, without sacrificing readability or visual appeal. Fluid layouts allowed the content to flow naturally, adjusting to different screen sizes, while sizable images scaled smoothly without losing clarity.
Additionally, the navigation was optimized to ensure that it remained intuitive and easy to use, regardless of the device.
​
These design improvements had a noticeable impact on user experience. Users could navigate the site more effortlessly, locate key information more quickly, and engage with the content on a deeper level. By maintaining visual clarity and enhancing the ease of interaction, I was able to create a more user-centric environment.
From a personal standpoint, this project underscored the importance of clear UI design. It helped me realize that even the smallest adjustments—like improving visual hierarchy or ensuring legibility on all devices—can have a profound impact on user satisfaction and engagement. This experience strengthened my understanding of how responsive design enhances accessibility and usability, reaffirming my commitment to creating user-friendly digital experiences.