WebHunt
Collaborated with key stakeholders to design a user-centered website for three formats (desktop, tablet, and mobile).
Team
Project Manager
Developer
Lead UX/UI Designer (me)
Duration
8 weeks
Role
Lead UX/UI Designer
Time
Winter 2023-2024
Problem
The old website became less attractive to customers which resulted in orders’ decrease and dismissal of an impressive number of employees.
Solution
Based on the project manager's requirements, I redesigned the website and created a design system, so that it could be easier to follow an established brand's style in the future.
As the main concern was the design of the website, I started with identifying what was working and what kind of elements needed transformation.
Below is the old website.
The main gaps I identified as a UX/UI Designer and some insights I depicted while conducting my user testings among some of my fellows (the project manager didn't give me a lot of time for this move, so I asked a few people related to the IT industry from my network to take a look at the website and tell me about every element that didn't work for them):
-
The Contact button and menu are not on every page forcing a user to scroll up or down to find everything.
-
Everything is unbalanced (the distance elements are different).
-
The design overall seems a bit old.
-
Technologies is not the word that identifies the meaning of the slide, so it could be renamed as Tool Kit.
-
There is no proper separation between the sections.
-
I found a few places where it was unclear what it meant.
After discussing the results I had by conducting the interviews and details of some possible designs with the team, I started to craft a few versions I could start with.
Here are a few versions I came up with.
The third version was the most attractive to every member of the team, so we decided to go with the third version.
The next step was to start designing for the three formats I mentioned above.
A few design decisions I made to resolve the concerns I mentioned above during my personal observations and user testings:
-
The desktop and tablet were made in a slide format to have this proper separation between sections. Although, I didn't make the mobile version in slides as there would be too much space between each section which makes it impossible for a user to get to the end of the website; I still made sure that there was enough space between the sections.
-
I added a header with the menu on each slide so that it would be easier to navigate through the website.
-
I made some of the text-heavy elements lighter by deleting unnecessary sentences.
-
For the tablet version, I made the info on the Process slide in the form of a carousel, and the same I did for the mobile version for the Services section. I decided to go with the carousel as it was impossible to fit all the information within one slide/section.
-
I added the Contact button to every single slide so that a user could quickly contact the company no matter what slide/section a user is on.
-
For the tablet and mobile versions, I hid the menu in a dropdown. I allowed myself to release some space for the primary info on the slides/sections.
-
I also decided to add two icons (Twitter and LinkedIn) to make it easier for a user to check the social media accounts of the company.
To look at the project in more detail, check this link: https://www.figma.com/file/TFm4sCO2msRTjtKhqIA8mF/Website-for-WebHunt?type=design&node-id=0%3A1&mode=design&t=Lp91y22szebEbi69-1
Below are three videos of the designed and prototyped desktop, tablet, and mobile formats.
Lastly, I created a detailed design system and UI kit.
My takeaways and assumptions
Throughout the whole duration of the project, I was challenged to learn a lot of new techniques, systems, and resources which I'm for sure going to use in the future.
As for the assumptions: if I had a bit more time, I would test all three formats with at least 5 people to understand what could be improved.