UI/UX Case Study: From Idea to Reality — Designing a Workstation Inspiration Website.
In this article, I will guide you through my design process for Worknspire, a website that provides workstation inspiration for students and working professionals.
About the project
Project background
In the following lines, I will share with you the story behind why I chose to take on this project. I will be using a storytelling approach from my point of view to explain the background. I have chosen this approach as I believe in the power of stories and think there is no better way to convey the background of a project than through a well-told story.
Disclaimer: Not everything in this story is true. Some events were fabricated to create drama, just like any story. Otherwise, the story would be boring, to be honest😁
As the Covid-19 outbreak spread, a lock down was implemented in my country. I had no choice but to leave my hostel and return home. Suddenly, I found myself with an abundance of free time.
One day, I decided to make a change in my life by bringing more structure and discipline into it. I began by taking a look at my bedroom, and the first thing I noticed was my cluttered and disorganized workstation. This was affecting my productivity and focus negatively, so I decided to take matters into my own hands and upgrade and organize my workstation.
As I started to organize my workstation, I found it challenging to determine where to begin. So, I turned to the internet for inspiration. But, the sheer amount of information and ideas I found there was overwhelming.
I realized that although there are numerous websites dedicated to fashion and design inspiration, there was a lack of platforms that focused on organizing workstations and providing helpful tips and ideas.
Despite the abundance of inspirational websites for design, fashion, and art, I noticed a significant gap in the market for a dedicated platform that provides workstation inspiration. Considering the growing trend of remote work, people are increasingly searching for better workstation ideas. As a UX designer, I saw an opportunity to address this problem and decided to investigate further to determine if there was a real need for a solution and if it had the potential for success.
Problem
The problem is that individuals who work from home or have a home office lack knowledge and resources to create an optimal workstation setup, leading to health issues, decreased productivity, and overall work dissatisfaction.
Solution
“Worknspire” is a website that provides workstation setup ideas and tips for individuals who work from home or have a home office. The website offers a variety of setup ideas uploaded by other users, allowing users to explore and compare prices and details of individual components. Additionally, users can access tips on ergonomic solutions and freely save or share a vast collection of workstation ideas.
Design process
Research
To kick-start the design process, I conducted secondary research and competitive analysis. With assistance from ChatGPT, I was able to complete this research stage quickly. During this stage, my objective was to understand current user behavior and pain points.
Why is it important to design and organize your workstation setup? Understanding the reasons behind people’s desire to design their workstations.
People want to design and organize their workstation setups for various reasons
- Designing and organizing a workstation setup can help improve one’s posture and prevent physical strain or injury, especially for those who spend long hours working at a desk.
- A thoughtfully designed and organized workstation setup can also improve the aesthetic appeal of a workspace, which can be beneficial for individuals who frequently have clients or colleagues visiting their office.
- A well-designed workstation setup can also help reduce distractions and increase focus, leading to greater productivity and efficiency.
- With the rise of remote work, designing a workstation setup has become increasingly important as individuals are now responsible for creating their own workspace at home. A well-designed home office can help separate work from personal life and maintain a healthy work-life balance.
- Personalizing a workstation setup can make the work environment more enjoyable and comfortable, leading to a better overall work experience and potentially even improved mental health.
Challenges in Designing Workstations
- A cluttered workstation can lead to a sense of chaos and disorganization, which can negatively impact productivity.
- Designing a workstation that promotes good health and well-being is crucial for individuals who spend long hours working on a computer. Health challenges such as back pain, eye strain, neck pain can arise from poor workstation design, which can negatively impact productivity and quality of life.
After gaining an understanding of the user preferences, I delved deeper into the problem space. I began by analyzing user comments on social media pages and popular inspiration sites, which are both direct and indirect competitors. This research helped me to thoroughly understand the core problems.
Core problems
- Designing a workstation is a daunting task for people who lack experience. Many individuals may not have the necessary skills or knowledge to set up a workstation that is both visually appealing and functional. This lack of experience lead to feelings of being overwhelmed or uncertain, making it challenging to create a workspace that meets their needs and preference.
- Searching for inspiration and ideas to design a workstation can be a time-consuming process. Many users struggle to allocate enough time to thoroughly research and explore different options.
- Due to the increasing trend of remote work, individuals are facing challenges in designing a home office workstation setup that is both functional and visually appealing.
- Individuals who have difficulty with creativity often face challenges in generating fresh ideas for their workstation setup.
- Budget constraints pose a significant challenge for users who want to design and organize their workstations effectively. It can be challenging for users to create their ideal workspace within their budget.
- A poorly designed workstation can lead to distractions, discomfort, and a lack of motivation, ultimately resulting in decreased productivity and focus.
- Users frequently encounter challenges in identifying the precise details, brands, and names of the different components utilized in a workstation setup. Moreover, determining the prices of these accessories is often a challenge, which can make it difficult for users to budget and plan for their ideal workstation setup.
Define
During the Define stage, I collected and analyzed all the data obtained from the secondary research. Based on this data, I created two user personas that represented the target users and their needs. Additionally, I created user journey maps for each persona that helped me understand the gaps in the current user process and identified areas for improvement. My focus was on understanding the wants and needs of users.
User personas and Journey maps
Ideation
- I began jotting down all the ideas that popped up in my mind. At this point, I had numerous ideas, so it was time to filter out the ones that aligned with the users’ wants and needs, as well as addressed their pain points.
- To come up with design solutions for the user wants that I identified during the research stage, I transformed them into ‘How might we’ statements. This allowed me to unlock potential design solutions that addressed those wants and needs.
He wants a workstation setup inspiration that exclusively displays his current workstation setup items, so that he can create a workspace that is compatible with his existing setup and avoid distractions from irrelevant items.
How might we highlight only relevant items from a user’s current setup to assist them in creating a workspace that is compatible with their current setup while reducing distractions from irrelevant items?
She wants inspiration and ideas for creating a functional and aesthetically pleasing workspace that supports her studies and a simplified way to navigate online resources about workstation setups, so that she can easily access helpful information without feeling overwhelmed.
How can we make it easier for users to find useful workstation ideas and inspirations without feeling overwhelmed?
She wants to save interesting workstation setup ideas for later, so that she can easily share them with friends and family members, get feedback on design choices, and revisit them later for reference.
How might we help users to save and organize interesting workstation setup ideas for future reference, share them with others, and receive feedback on their design choices?
He wants to know the brands and names of individual workstation setup components, so that he can make informed purchase decisions and ensure compatibility with his existing setup.
How might we make it easier for users to identify and access information about specific workstation setup components?
She wants an affordable workstation setup idea that doesn’t require a significant investment, so that she can create a comfortable and functional desktop setup without breaking the bank.
How might we help budget-conscious users create a comfortable workstation setup without spending a significant amount of money?
Competitive analysis
To come up with possible features for the website, I looked at similar products in the market. However, I couldn’t find any direct competitor website. So, I studied the user flow and patterns of similar inspiration sites that showcase images, designs, or websites. By studying these sites, I gained insight into what features users expect and what areas may be under served.
Information architecture
I first defined the features for the website, and then I created a basic information architecture for it.
Wire-frames
Once I had an idea about the IA and user flows of the website, I picked up a book and a pencil and started sketching possible layouts for the website.
Product monetization strategy
- Sponsored Content: The website can partner with companies to create sponsored content or sponsored posts that promote products or services related to workstation setups.
- Advertising: Offer advertising space on the website to companies and businesses related to workstation setup, such as ergonomic furniture manufacturers, tech companies, and office supply retailers.
Final designs
Before getting into actual design of website I decided to a do design brand identity for the worknspire.
Logo design
- My first task was to come up with a suitable name. I brainstormed for a while and eventually came up with the perfect name — Worknspire.
- Next, I needed to design a logo for the website. Although I had very little knowledge about logo design, I decided to learn more by watching a few videos and reading some articles. This gave me a basic understanding of how to design a logo.
- To guide my logo design, I wrote down a few themes that I wanted to convey to users, such as modern and minimalist. Then, I searched online for inspiration and looked at the logos of various startups and companies to see what was currently popular.
- Finally, I came up with a range of potential logo designs and iterated on them until I found the perfect one to represent Worknspire.
- I chose to use the letter ‘W’ from the word ‘Worknspire’ as the logo because it represents the first letter of the brand name and can be easily recognizable and memorable to users.
- Next I choose color I decided go with black because it conveys a sense of elegance, and modernity. It is a powerful and versatile color that can be used to create a sleek and professional image.
- Also I need figure out typeface ‘Worknspire’ After few research decided go for “Plus Jakarta Sans”. It is Modern and Professional Look, easy to read, can be used for different medium and also it is not as widely used as some other options in the market.
Mood board
Home page
- The primary objective of the homepage is to showcase a diverse collection of workstation inspirations from people all around the world. To achieve this, I designed a simple and minimalistic UI that allows users to easily browse through the workstation images and quickly find intriguing inspirations, which they can save for future reference.
- The top navigation is a critical aspect of any website, and users expect to see it when they visit a site. To ensure easy navigation, I included the search bar within the top navigation bar, enabling users to search for specific workstations quickly. Additionally, I added an “Add your component” button to the navigation, which I will explain further in this case study.
The navigation bar contains standard drop-down links to other pages. In addition, there is a prominent “Upload” CTA to encourage users to share their own workstation setup designs.
- Users can also access their accounts and additional profile settings by clicking on their profile picture.
- When I was designing the homepage for Worknspire website, I encountered a significant challenge of discovering unique designs among competitor products. Many of them had a similar layout with minor variations. As a solution, I decided to introduce a new feature — a “featured workstation inspiration” section.
- This section will showcase the most popular and trending workstation images of the day, allowing users to discover the latest ideas and trends in a quick and more focused view.
- To differentiate the featured workstation section from the rest of the content, I incorporated a gradient background that changes colors based on the dominant color of the first card image. This concept was inspired by Spotify.
- I decided to use a 3-column gallery style to showcase the workstation images on the website, as this layout is commonly seen on popular websites like Unsplash and Pexels.
- I added a “See more inspirations” button that appears after the user has scrolled through 6 rows of images. This feature gives users the choice to continue exploring more workstations or not, rather than forcing them to endlessly scroll through the content. Additionally, I added an awareness message about the benefits of ergonomic workstations to make the experience more interesting and informative. This idea was inspired by video games that display tips or facts during loading screens.
Design opportunity and solutions
1. How might we highlight only relevant items from a user’s current setup to assist them in creating a workspace that is compatible with their current setup while reducing distractions from irrelevant items?
- After conducting some initial research, I thought a basic section under the filtration option could solve the problem. However, further research revealed that the problem was more significant than I initially anticipated and required more attention and emphasis.
- After considering different options, I decided to create a separate button for users to add their components. This section is conveniently located within the main search bar, allowing users to take action quickly and easily.
- Users have the option to either choose from pre-existing components or search for unique ones. Additionally, they can manually upload their workstation image to the website, which was inspired by Google image search.
- The key is to provide users with personalized results that reduce distractions and help them find relevant workstation setup inspirations.
Prototype version
2. How might we make it easier for users to find useful workstation ideas and inspirations without feeling overwhelmed?
- This was one of the most common problem. Since there are already predefined and proven solutions for it, it was pretty easy for me to include it in my use case. I added sorting and filter options just above the inspiration gallery section on the homepage. I separated these two elements from the rest of the design elements and kept them close to the gallery so that users always have easy access to these options whenever they need to apply them.
- The filtering option on the website allows users to filter workstation inspirations by their profession, preferred color scheme, room size, upload time frame, and budget constraints.
Prototype version
3. How might we help users to save and organize interesting workstation setup ideas for future reference, share them with others, and receive feedback on their design choices?
- The solution I came up with is the “Save Collection” feature. It works similarly to saving posts on Instagram or other websites. This feature is essential in any inspiration site because many users want to create collections and refer to them later due to time constraints or for future reference.
Prototype version
- Users can create an unlimited number of collection groups, and there are no limitations. They can easily access their saved collections from the profile menu option. A dedicated page is available for collections, which is organized in the order of recently added collections.
- At the research stage, I observed that many users, especially students, have difficulty choosing the right workstation inspirations from different collections as they do not know which one looks good. To make this easy for users, I added a “Share” button inside each saved collection group. This allows users to share their collections with others via social media or email and receive feedback from their friends or family members.
- I have recently observed a trend where people save posts and videos on social media for later reference but often forget to revisit their saved collection. This could also happen on the “workinspire” website. To avoid this, I designed a reminder toast notification that appears at the top of the website if a user hasn’t visited their saved collection within 24 hours of adding to it. This will encourage users to revisit their saved collections and not forget about the information they have saved.
Prototype version
4.How might we make it easier for users to identify and access information about specific workstation setup components?
- I came up with a solution to address this issue, which is to create a dedicated detail workstation page where users can access detailed information about each component of the setup, including the brand and model name.
- After conducting a thorough analysis of the detail page, I found that the design of the “component breakdown” section, which was presented as a simple list view, was not satisfactory. This was mainly because users had to scroll all the way down to view the brand and model name of each component, and then go back and refer to the workstation images to understand which component they were looking at.
- The detail page of a workstation is a crucial section of the website, I had to ensure careful consideration while designing this page.
- To enhance the detail page of the workstation, I implemented a marker pointer above each respective individual component in the workstation image. By clicking on these markers, users can view a product detail card with all the information about the product.
- This design inspiration was mainly drawn from AR and VR website concepts and sites like Houzz that have successfully used this design element on their websites. This feature helps users to view the product and its details simultaneously without losing track.
5.How might we help budget-conscious users create a comfortable workstation setup without spending a significant amount of money?
- Coming up with a suitable solution for this particular use case proved to be quite challenging. As previously mentioned, I encountered difficulties trying to integrate it into my old workstation detail page design.
- After much brainstorming, I developed an idea to include a price comparison section on the component card. This section would display along with the brand name and model name, and appear when the user clicks on the markers on the main workspace image.
- I decided to display a comparison between the current market price and the best value price for each component. This way, users can save time by quickly comparing prices and making informed decisions without having to browse multiple websites.
- Also I converted the site name into a related product direct purchase links, making it easy for users to click on the text link and go directly to the purchase site.
I experimented with various card designs before settling on the final solution.
Prototype version
More pages
Learn page
Forum page
You can check out my behance presentation for a complete visual overview.
Conclusion
This personal project has been an incredible learning experience for me. Although I had hesitated and procrastinated for a while, I am now glad that I completed it. Throughout this project, I learned the importance of figuring things out while actually working on the project. There were many things that I had little knowledge about, such as product strategy, as someone who is interested in the business aspect of things, I wanted to try treating it as a real product ready for launch. Additionally, I had to figure out the logo designing process. Iteration is key in design, and the more I iterated, the better my design got.
I would be delighted to explore new opportunities as a UX Designer, both in office and remote. Please feel free to contact me on LinkedIn or Twitter, and don’t hesitate to drop me a friendly “HEY!” I look forward to hearing from you! 😎🙏.
Want to learn more about me and my design superpowers? Let’s hop on a discovery call and unleash some serious creativity! Book a slot with me now and let’s chat 🚀✨
