Wood Computer
B2C E-commerce website specializing in sustainable technology products.
Overview
Wood Computer is a company that makes technology products like wood-based keyboards, mice, and desktop computers and is also committed to raising awareness among users regarding the environmental consequences of technology production. As a start-up, they understand the significance of establishing credibility and gaining user trust, and making good, easily upgradable products.
Problem
The Wood Computer website seems to suffer from a lack of focus, as it tries to convey too much information all at once, without prioritizing the important details. This can be overwhelming and confusing for users, making it difficult for users to navigate the site and find what they need.
Additionally, there seems to be a lack of clear calls to action throughout the website. Users may not be sure what steps they need to take to learn more about the company or its products, which can lead to frustration and ultimately result in them leaving the site.
Solution
Our team implemented visible navigation systems to make it easier for users to find the information they need, without feeling overwhelmed or lost in the site's layout. Establishing clear hierarchies for content will help to prioritize the most important details and present them in a logical and organized way. Lastly, adding calls-to-action will guide users toward taking meaningful steps towards engagement with the website, such as signing up for newsletters or making a purchase.
Doing so, will increase user engagement and build a stronger connection with the brand.
Process
Role
Tools
Duration
Discovery
Ideation
Dev Handoff
Reflection
UX Researcher
UX/UI Designer (Team of 5)
Figma
FigJam
Jira
Google forms
Slack
Zoom
5 Months
Discovery
Kick-Off Meeting
At the beginning of our project, our team had the opportunity to meet with the client stakeholders to discuss the project scope. During this meeting, we gained valuable insights into the client's goals for the website. Specifically, we learned that the client intended for the website to foster a sense of community and establish the brand's credibility in the eyes of their audience.
By gaining a deeper understanding of the client's goals and overall business mission, my team was able to understand their desired user experience with the company's goals when creating wireframes. This ensured that the website design would align with the client's vision and effectively serve their business needs.
Questions for the Client
As a team, we developed a set of 14 questions for our client, aiming to gain insights into how Wood Computer compares itself to other industry competitors, as well as the client's desired design and branding preferences. We also sought to identify additional features and functionalities that the client would like us to prioritize.
Features the client would like to prioritize:
Helpful Shopping tools- To help all shoppers find what they need quickly with technical guidance and efficient search tools.
Blog - is crucial for SEO and educating our audience about our work. Aiming to make the content easily consumable by incorporating photo carousels, short jokes, and quizzes. The goal is to create an engaging experience that allows users to earn points for quiz answers and makes the blog more rewarding than the standard text and photo format.
Forum- is critical for enabling visitors to find solutions independently. A well-designed forum will allow users to obtain prompt answers while minimizing the need for a large support team. To enhance usability, we may include a section for hot topics that receive high activity, a frequently read thread section for valuable information, and a search bar. Additionally, users must be able to post questions and attach files.
Heuristic Evaluation
Collaboratively, the team conducted a heuristic evaluation, in alignment with Jakob's Ten Usability Heuristics. Subsequently, we provided specific recommendations to rectify the issues and established a rating system to prioritize the identified problems.
Since there were five of us, we divided the evaluations into sections, and each person was responsible for completing two sections. I was specifically tasked with identifying violations related to heuristics 9 and 10.
9. "Help users recognize, diagnose, and recover from errors," is important because errors can cause frustration and confusion for users, leading to a negative experience. By identifying possible errors and performing solutions to help users recognize and recover from them, the user experience can be greatly improved.
10. "Help and documentation," are equally important because it provides users with the necessary support to effectively use the website or application. Providing clear and concise help documentation, such as FAQs or tutorials, can assist users in understanding complex features or resolving issues they encounter.
Upon completion of the heuristic evaluation, a total of 76 usability problems were documented.
These findings have contributed to enhancing the design process, providing valuable insights that might have gone unnoticed otherwise.
Our focus was on examining how other technology companies designed their product cart, bag features, navigation bar and footer sections, and subscription links.
During my research, I directed my attention primarily to Microsoft Surface. I uncovered several noteworthy strengths that set them apart, including a robust brand identity characterized by a sleek and polished appearance, intuitive navigation, and a range of reliable products that have earned user trust and loyalty. On the other hand, I did observe a lack of commitment to sustainable and eco-friendly products.
In today's world, sustainable and environmentally friendly practices have become increasingly crucial. As Wood Computer specializes in eco-friendly products, I believe it would be valuable for them to be aware of this aspect, especially considering their role as a competitor in the market.
Competitive Analysis
Competitive Analysis
Our focus was on examining how other technology companies designed their product cart, bag features, navigation bar and footer sections, and subscription links.
During my research, I directed my attention primarily to Microsoft Surface. I uncovered several noteworthy strengths that set them apart, including a robust brand identity characterized by a sleek and polished appearance, intuitive navigation, and a range of reliable products that have earned user trust and loyalty. On the other hand, I did observe a lack of commitment to sustainable and eco-friendly products.
In today's world, sustainable and environmentally friendly practices have become increasingly crucial. As Wood Computer specializes in eco-friendly products, I believe it would be valuable for them to be aware of this aspect, especially considering their role as a competitor in the market.
Ideation
User Flows
Our goal when creating the user flow was to establish an intuitive navigation structure that offered users multiple options for moving between web pages and sections.
Our approach to designing user flows was focused on creating an intuitive, visually appealing, and user-friendly navigation system that catered to our user's needs. By doing so, we aimed to enhance the user experience by making it easier and more efficient to access the desired content.
I led the design for the "Buy a product" user flow, drawing inspiration from the results of our competitive analysis and heuristic evaluations. By conducting thorough research and analysis, we were able to identify the best design practices and techniques that would enhance the user experience and improve the flow's usability.
Mid-Fi Wireframes
During the creation of our medium fidelity designs, our team frequently revisited our research phase while considering the input of senior designers and engaging in team discussions about design choices.
Every member was tasked with a particular user flow, and they were responsible for creating wireframes for their respective assignments on an individual basis. Since I was responsible for leading the design of the "Buy a Product" user flow, it was my responsibility to create the wireframes for that feature.
Our goal for Wood Computer was to enhance user independence and confidence while navigating through the website. To accomplish this, we incorporated the following features:
A user-friendly navigation bar with clearly labeled sections.
Inclusion of breadcrumbs throughout the shopping pages.
Improved website hierarchy across all pages.
Design Components
My team and I have developed a design component layout that has been tremendously helpful in streamlining our design process. We have identified the most commonly used design elements in our projects, such as buttons, icons, forms, and typography, and have created a comprehensive library of these components.
This has allowed us to save time and effort when creating new screens, as we can easily access and apply these design elements without having to recreate them from scratch every time.
Dev Handoff
Our design team had the privilege of using two popular design tools, InVision and Figma, to create interactive prototypes for website applications. Initially, we first created a prototype in InVision that met all of the client's requirements. However, our developers requested that we create it in Figma instead. While this required some additional work on our part, we were excited to have the opportunity to explore and become proficient in both tools.
Prototype
Dev-Handoff
As the project nears completion, I compiled annotations and measurements to provide the developer with a clearer comprehension of the flow and padding requirements for each component and section.
Reflection
Learnings
This project provided me with valuable experience and aided in the development of my skills not just as a UX designer, but also as a researcher.
The research played a vital role in the entire project. We consistently referred to our findings to inform our decisions and actions. The insights we gained from our research helped us identify the most promising approaches, avoid potential pitfalls, and fine-tune our strategies to achieve the best possible outcomes. We're grateful for the knowledge and guidance it provided us along the way. And it is unlikely that we would have been able to complete the project without it.
This project demonstrated the importance of open communication. We made an effort to establish a collaborative environment where information and ideas could circulate freely, resulting in a high degree of understanding and responsiveness that enabled us to complete project deliverables without any delay. Whenever one team member's workload became overwhelming, another would step in to provide support, ensuring that no one was left behind.
Being proficient in InVision and Figma: We were able to identify the strengths and weaknesses of each and develop a better understanding of which tool is best suited for different stages of the design process. As a team, we quickly adapted to their request.
Key Takeaways:
The team was able to bring the client's specific brand vision to life through great attention to detail in this project.
Given more time, I would conduct further research to determine whether users are obtaining all the necessary information or if there are additional elements they would like to see on the page. The aim would be to enhance the number of visitors to the site.
With the launch of its revamped website and increasing enrollment of students in the UX/UI field, I'm excited to see how Avocademy's site will evolve and expand.
If I had more time...
I enjoy creating various iterations, so I would have loved to work on the high-fidelity and UI iterations for this project. It would have been fulfilling to witness the project's final stage.
Conducting user testing on the prototype would be beneficial for the project as well, as it ensures that users have the best possible experience while using the website.