Distrowatch Redesign
What is this website about?
This is a website where you can learn and discuss about different Linux distributions.
What is the problem with this site?
The problem is that it has an outdated visual and UI design, thus poor User Experience.
What is my goal with this site?
I will fix it's UI by fixing the layout and everything visual in this website and fix it's UX by decluttering the website.
How will this be beneficial?
There are three major parties that would be benefiting from this project.
1. Visitors: People would enjoy coming to this website for their Linux related news.
2. Owners: More visitors equals more clicks on sponsors and ads meaning more revenue.
3. Developers: It would be easy for them to maintain this website as decluttering would allow them to focus on more important tasks like SEO optimisation.
4. Me: This is my first project and there would be so much to learn. So many problems, so many solutions, so many mistakes, so many lessons.
What is my role?
I lead the whole project from researching, prototyping to designing
Process
During the discover phase, I performed usability testing to identify existing issues. I also created user personas to understand my users. For the initial user research, I used convergence and divergence method to analyze pain points and establish priorities. Next, I created low-fidelity sketches and high-fidelity interactive prototypes. In the final stage, I validated the redesign with users to ensure the identified pain points were resolved. The project spanned six weeks. Now, let's dive deeper into each step.
Information Hunt
Before the start of any project, there are some necessary questions that I wish to know to get a deeper insight into the product and it's problem. This greatly helps me deciding the path that will be taken to solve the problem. I noted down the answers to make user personas.
Key Questions Asked
-
What is the purpose of this site?
-
Who uses this website?
-
How do the community uses this website as?
-
What do they think about the website?
-
What problems do they face with this website?
Interviewees
-
Interviews with local users
-
Online interaction on discord
-
Discussion on an online forum
Results
Common reasons to visit website:
Distribution Ranking
News on latest distro versions
Discover new distros
Main users of the website:
Developers
Distro Reviewers
Distro-hoppers
User Personas
Based on the interviews, I created User Personas. It helped me see from the eyes of different people with different purpose so I can understand their problems better. Plus it would help me organize and prioritize the content and my tasks. After having some understanding of what the users wanted I moved on making prototypes.
Lofi Prototypes and Hifi Prototypes
I created hand-drawn prototypes for different webpages with the goal of organizing content. After choosing the best ones from all hand-drawn prototypes, I convert them to Digital wireframe. This saves time and energy while making this process fun.
Lofi Prototypes
Hifi Prototypes
Design
Color Decision:
I chose red to match the color of the logo. This allowed me to set the theme.
I chose blue as complimentary color.
Primary and Secondary Font: Source Sans Pro
Typeface Decision:
-
It’s designed for clear, easy reading, even at small sizes.
-
It has a clean, neutral, and contemporary look.
#383838
#50E368
#2B4570
#E35057
T1-16
H6-24
H5-26
H4-28
H3-30
H2-32
H1-36
Testing and Results!
This is the phase where ideas and theories are tried and tested. The designs were tested by showing users the designs and collecting their feedback to make improvements. They were compared and the conclusion was noted. Some of the major problems are discussed in here.
Navigation-Bar and related
.png)
News-Section
Distribution table
Before
After
Before
After
Before
After
Changes made:
-
Separated search section from menu section
-
Removed extra search bars
-
Made buttons more inline
-
Clear indication of the page the user is on.
-
Breadcrumbs so users can know where they are.
Impact:
-
Clear menu system
-
Easily distinguishable buttons
-
Improved user interaction with buttons due to bigger touch surface.
Impact:
-
Actionable tasks distinguishable from the content.
-
SHA verification guide for beginners would help them verify their downloads.
-
System information near the downloads make it easy for users to know if the software is compatible with their computer.
Changes made:
-
Cleaned UI with paddings and margins..
-
Added buttons and links for the action tasks.
-
Added verification numbers instead of files.
-
Added learn more section for beginners.
Changes made:
-
Distribution sub-links were removed.
-
Two tables were replaced with one single table.
-
All the duplicate information was removed.
-
Cleaned up the interface.
Impact:
-
Reduced cognitive due to ease in search of information.
-
Easy on the eyes thus easy to read and navigate.
Full Design
KEY LEARNINGS FROM THIS CASE
-
Do not assume things (anything related to anything).
-
Keep things constant visually (fonts, colors).
-
Do not make hifi prototypes before making lofi prototypes.
-
Do not stick to one design possibility and always use a grid.
*My personal failures:
I didn’t get any responses from online forums—ouch!
Since it was my first time interviewing people, I struggled to ask the right questions and felt nervous during the process.
So many things to learn and show.