My role in this project and brief description of the project.
Role: researcher, UX/UI designer, user testing
Duration: 6 weeks
Tools & Software: pen, paper, google form, figma, discord
Background: A mechanical keyboard enthusiast created a website in 2021 as a marketplace that offers a large variety of mechanical keyboard parts, group buys, accessories, etc. There are various mechanical keyboard vendors all over the states and it can be difficult to keep up with which vendor sells what and which group buys are being run. Instead of bookmarking each website and checking daily, an enthusiast created a website. But sometimes when there is a sale or group buy opening, you want to ensure you get a spot to order, and sometimes you aren’t home. Creating a mobile version of this website for easy access to mechanical keyboard materials on the phone.
Goal: To add a mobile version of shopmech for users to look at mechanical keyboard materials on the go.
Quick rundown of the research process. I already knew that I wanted to reach out to the keyboard community for their help. Luckily there was many that were willing to help and I think it was a good step to start with a general survey to get some engagement.
Objectives:
- Defining what group of people in the hobby would be interested in using this application
- Learning regular shopping habits
- Understand what is important when it comes to buying keyboard materials via cost, quality, quantity, customization, etc
- Learn what is helpful in the process of learning about keyboards and what to buy
Methodology
1. Release a survey to get the engagement of responses, get a large sample for general ideas of the hobby and shopping habits, and learn from their shopping habits/style.
2. Conducted 1-on-1 interviews to deep dive into their survey responses. Get a better understanding of shopping habits and the process of researching products.
3. Competitor Analysis on three different vendors. Examined their responsive website by comparing their style and layouts.
Competitor Analysis Findings
- Compare desktop shopmech to the top 3 vendors (via survey)
- Not many vendors have a mobile app
- A hero section up on the top to showcase new products such as switches, keycaps, plates, etc
- The "About Us" and extra non-shopping related sections after the products are a nice touch
- Gives some more personality to the vendor
Personas
There are two types of users; enthusiasts and first-timer. Based on the interviews, shopmech is a good starting point for those who are interested in learning more and finding products on a generalized website. The level of the website right now only caters to newbies.
Survey & Interviews
- Total 7 survey entries: close 50/50 have heard of the website shopmech
- 2 interviews: different levels of knowledge of mechanical keyboards
Interview Highlights
- Discovered the hobby through online and researched to learn more
- Does more shopping on the computer with light browsing through their smartphones
- Sets budgets for themselves when deciding to build a new keyboard
- Both have heard of “shopmech” but never personally used the website for themselves
- Always referred it to a family or friend who is interested in learning more about keyboards
Understanding what the audience would be looking for on that app whether they are an enthusiast or not.
Based on my research interviews and competitive analysis, I created a sitemap. Using the current shopmech's desktop website, I used it as a starting base for the sitemap, and then made some changes that were inspired by the three vendors that I did my research on. I combined a couple of categories that I believe could be solidated as one.
With the sitemap completed, I started to create sketches of the screens that I later created a prototype. The idea here was to sketch the pages that the user and task flow will need.
Creating the flow of the application for a user and a single task. To view the flows by clicking on them.
The user flow shows the multiple ways a user spends time gathering their materials to build a full keyboard from the app. A user with a budget might use the filter and maybe other users won't need the filter so the flow includes the option of filtering. The task flow is more direct about purchasing an item.
Making the sketches into digital.
The wireframes layouts are inspired by the three vendors with that I did my competitive analysis. The homepage has three sections; categories, keyboard builder, and blog section.
Shomech has a feature where it will compile all the materials that you add to your cart into a checklist. This way, buyers can keep track of all the necessary materials to build a keyboard. This feature is unique compared to other websites so I feel like it is important to have this first on the homepage of the app.
I added a blog section at the bottom to give the website more personality and give more information about the keyboard community. From my interviews, there was a lot of feedback on doing personal research when first getting into the hobby and it would have been nice if there was a consolidated area with all the information to learn about keyboard parts and terminology.
The brand logo, style, and UI kit.
One initial thing that I noticed from the shopmech website is that its background is dark pretty much black. For now, the logo of the app is kept the same, but in the future adding a keycap or keyboard layout behind the "shopmech" or "sm" would give it more personality and texture to the logo. The photos are inspired by other vendors, I like the idea of products on a white background since the app background will be darker. The typography I chose first was Montserrat which is the font type of "shopmech" and Cabin is for larger sections of text for readability.
Sharing my prototype of the keyboard and DesignLab community, I was able to get a variety of responses and impressions of the application.
I chose "shopmech" to create a mobile app because it would be the first keyboard website to have a mobile app. Adding more features to the sitemap so that "shopmech" is catered to all levels of users in the hobby. It allows newcomers to learn about the community through blogs and the more experienced hobbyists have a place to be on the lookout for preorders and group buys for upcoming new products.
The keyboard community helped me with a lot of good feedback from different levels. We were able to talk through the pros and cons of other vendors and why they are a success. Shopmech can be up there if it does some remodeling to its current website and who knows they could create a mobile app as well.
Priority Revision
Based on the usability testing feedback, the next revision should work on how to minimize the checkout steps so that it requires less "pressing" from the user. If we can shorten the checkout by even one step, it would make a difference in the flow. Especially when joining group-buys.
Next steps for this project:
The prototype will go into revision based on feedback and then can go into closer usability testing (1-on-1 testing).
