Threedeelab is an online design service website that offers to help clients with various design tasks within the 3D field. Threedeelab targets customers like designers and businesses who need quick help with visual designs for their projects.
Project Duration:
March 2023 - May 2023
Role:
UX designer responsible for all aspects of the design process for Threedeelab website.
Problem:
Most design service websites often lack clear pricing and service details. As a result, you usually have to contact the website directly to find out this crucial information. This can lead to frustration and a time-consuming search for suitable services.
Goal:
Design a responsive Threedeelab website that simplifies the process of purchasing online design services, ensuring a seamless match between users' project expectations and the services provided.
User Research
I conducting interviews and created emphaty maps to better understand the target user and their needs. Then I made user personas based on the real individuals from my research and wrote down problem statements to better understand their pain-points and needs.
Persona: Paula
Problem statement:
Paula is a busy graphic designer, who needs a more efficient method for obtaining project pricing and estimates from designers, to save time and effort while searching for the right designer.
User journey map
I created a user journey map of Paula’s experience using the website to help me find possible pain points and improvement opportunities.
Pain Points
Time - The lack of information regarding the offered services necessitates users to contact the website directly, making the search for a suitable designer time-consuming
Portfolio Limitations - Insufficient project examples in a portfolio make it hard for users to evaluate the designer's capabilities and the quality of their work.
Price - The absence of visible pricing information causes frustration as users are unable to quickly assess whether the services align with their budget and may have to invest additional time and effort into contacting the website to obtain pricing details.
Starting the design
Knowing the target users' main pain points, I created a sitemap to establish a well-structured arrangement for the website, making sure it effectively addresses the users' needs.
Sketching exercise
To get some design ideas quickly, I completed the "Crazy Eights" exercise. In this exercise, I sketched eight different design ideas for the website within eight minutes.
Paper Wireframes
The sitemap guided me in identifying the necessary screens for my website, allowing me to move forward with sketching paper wireframes for each of them.
Below you can see the home screen paper wireframe variations that were designed with a focus on creating a simple and user-friendly navigation experience for the users. Stars were used to mark favorite elements that were used to create the refined paper wireframe that you can see below.
Screen Size Variations
Digital Wireframes
Continuing with the website design, I developed digital wireframes that provided valuable insights into determining the appropriate sizing of elements, such as image placeholders.
The main aim was to make all screens easily accessible from any point, accomplished through a well-functioning top navigation bar.
Usability Study
Parameters
Study type:
Unmoderated usability study
Location:
Remote
Participants:
5 participants
Length:
10-20 minutes
Findings
“Contact us” button:
Users found “Contact us” button too small and hard to notice, some users prefer a floating CTA button instead.
Large content:
Users expressed that the website's content was disproportionately large, leading to excessive scrolling and an overall oversized appearance.
Contact page:
Some users reported the absence of an option to attach files, such as images on the contact page.
Mockups
Taking into account the insights from the usability study, I made improvements and turned my wireframes into mockups.
Here I made improvements to ensure better visibility for the "contact us" button. By converting it into a floating call-to-action (CTA) button, now it remains easily accessible from any screen on the website and simplifies the top navigation bar.
On the contact page, I incorporated instructions on how to send files, such as images or documents.
By acknowledging the feedback that the website's content appeared disproportionately large, I made adjustments by resizing all grouped elements to ensure they fit within the screen while scrolling. As an example, I implemented a solution for the packages content, utilizing buttons to display different sections of the content instead of presenting everything in one place.
Refined Designs
Accessibility considerations
I used headings with different sized text for clear visual hierarchy
By using distinct color combinations between the foreground and background, I ensured that users with visual impairments can easily perceive and navigate the content, making the website inclusive for all website visitors.
I made sure the navigation on the website was clear and easy to use. I designed it to be intuitive, so users can easily find their way around. The navigation structure is the same on every page to avoid confusion and provide a user-friendly experience.
Takeaways
Impact:
The target users expressed a positive experience with the website. One user said, "The page looks great, the layout is well thought out, and the navigation is easy to use." This feedback shows that users appreciated the design, layout, and user-friendly navigation, which made their experience enjoyable.
What I learned:
I learned that the key to creating good designs is to understand and prioritize the needs of the users. Another important lesson I learned while designing was the effectiveness of incorporating CTA buttons to the design, rather than overwhelming the entire screen with excessive information. This approach allowed me to make more streamlined and user-friendly interface.
Next steps
Conduct a new usability testing on the website, including testing of the mobile screen size variation.
Gether more research about the users needs and ideate on new features that could be added to the existing design.
