Timeline
Model Making(5 weeks)
Wireframing(6 weeks)
Tool
Laser Cut
Spray Paint
Figma
Skill Practice
3D Model Making
Website Design
I designed a gaming mouse and its instructional website, including a quick gaming session for user adjustment. My research focused on understanding users' connection to the mouse and integrating these insights into the design.
DESIGNING A MOUSE FOR GAMERS
I explored the ideal mouse design, focusing on shape, comfort, and appeal for my target users. My task involved creating a prototype for a specific persona, from sketches to 3D models, and designing a user guidance app/website with an onboarding game. The final deliverables are the 3D mouse prototype and the guidance app/website.
Explore the ideal computer mouse design by addressing questions about shape, user comfort, and visual appeal to match my target users. My task is to create a prototype mouse for a specific persona, translating concepts from sketches to 3D models. Then design the user guidance app/web, including an onboarding game. A 3D 1:1 scale mouse prototype and user guidance app/web are the final deliverables for the project.
Background
Throughout the exercise and research, I categorized daily human behaviors into "Intentional" or "Unintentional" to learn what actions are natural and memorable. Redesigned Figma control interfaces into gesture interfaces. Then user tested to refine and finalized assigning a gesture to each control interface.
Research & Discovery
Designing a mouse with
Speed, Mechanical aesthetic, Customizable RGB.
Kick Off!
The persona faces issues with wire entanglement while gaming or doing homework and desires a wireless solution with customizable arrow and scrolling speeds to suit different tasks, such as slower scrolling for reading assignments and faster for gaming.
User Storyboard
Model Making
Data based iteration in every process
I started off by sketching my ideal mouse designs, then moved onto the sanding process, spending a significant amount of time based on grip testing with my classmates. Next came the spraying process, assembly, and finally, the finish!
Now, Wireframing
Understanding what users will go through when they first unbox the mouse by creating a user flow diagram. Make the flow into shapes (wireframes) from low to high fidelity, including user testing in between.
I created the user flow diagram with four sections:
- Connecting the mouse to the computer Bluetooth
- Customizing a Wheels Speed Setting
- Customizing the RGB color
- Sign up to save the settings
User Flow Diagram
It helped me identify the users' decision-making points and design the necessary UI elements.
Besides the four sections, I sketched a game storyboard for brainstorming. I also created a paper prototype for user testing, as it offers greater physicality and provides me with higher-quality observations.
Low Fidelity
Mid-Fidelity
Took the paper prototype to the next level by digitalizing it. Actionable UI elements are colored in denotative colors.
High-Fidelity + Style Guide
As I took it to high-fidelity, I created a style guide alongside to make the process smoother, incorporating much more colors and animations. I used Figma’s prototype mode to create an interactive instructional website.
Final Wireframe
3 main insights from the in-class rapid model-making and wireframing project
1. Importance of User Testing
I designed various types of UI and refined the mouse shape based on insights from user testing.
From user testing for UI, I've gained insights into the:
- Need for more action icons, such as "going back."
- Need for more text explanations at every step.
- Need for indicators to remind users where they are.
- Need for visualization of the speed setting.
2. Direct impact of research to result
In addition to user testing, conducting precise market research, such as competitive analysis, directly impacts the product's outcome.
My research revealed that customizable RGB lighting is essential for gaming mouse users, leading me to include this feature.
I also incorporated features not found in other gaming mice. The Drift Prevention Mount, a feature I created, ensures users maintain a firm grip during fast actions.
3. Visual Iteration
After learning more about visual principles as a third-year student, I decided to iterate on the visual design, persona, and style guide, especially since it was my first year delving into interaction design when I worked on this project. I eliminated unnecessary colors and UI elements and organized components using grids to minimize user distraction.
Eliminated unnecessary colors and UI, and organized components based on grids to minimize distraction for users.
