Modulair
A passion project created through the teachings of Google UX Design Professional Certificate. Users struggle to use existing ecommerce platforms to decide what computer components to purchase.

Modulair aims to provide a cleaner interface and an enhanced service compared to current competitors.
Role
Creator
Duration
3 months
Tools
Figma
Research
A survey was conducted to understand how users felt about the current service of online computer stores. The results showed that majority of users find that most services provided are frustrating to use.
1
Users were afraid to buy parts as they feared it would not be work with their current build.
2
Users were afraid to buy parts as they feared it would not be work with their current build.
3
Users were afraid to buy parts as they feared it would not be work with their current build.
4
Users were afraid to buy parts as they feared it would not be work with their current build.
Personas
Using the research conducted, two personas were built to explore user needs and gain a deeper understanding of how individual experiences and goals could inform the design decisions for the project.
Jason
University Student
Age: 22
Goals
  • Upgrade his computer parts
  • Figure out what parts he can buy that work with his current computer build
Frustrations
  • Upgrade his computer parts
  • Figure out what parts he can buy that work with his current computer build
Dan
Store Manager
Age: 45
Goals
  • Buy his son a computer
  • Find an affordable computer that can run the games his son plays
Frustrations
  • Doesn’t have time to build a computer
  • Wants to buy a pre built computer, but unsure of what build is the best for his budget
Journey Mapping
Next step was to outline a user’s journey using a defined goal a persona. This stage also helped with design decisions and define vital functions for the product.
How might we provide a more seamless ecommerce experience for users looking to buy computers or parts without spending extra time having to research?
Paper Wireframing
Moving into ideating, a few screens of what the home page would look like were sketched five different times, labeled from A to E. Standout elements from each screen were highlighted with a star and used to create a refined wireframe.
Sketch concepts of the home page from A to C
Sketch concepts of the home page from D to E
Sketch concept of refined screen
Digital Wireframing
The paper wireframes were translated into digital wireframes using Figma. The digital wireframes expanded on the structuring and layout of the app and includes icons for more clarity.
Usability Testing
A usability study was conducted with six participants, the findings highlighted a few things to consider before creating the high fidelity prototypes.
1
User preference between finding an item through search bar and scrolling was split
2
Users were unsure of how to find saved builds or view prebuilt computers
3
Users wanted more category options for searching parts
High Fidelity Prototype
Using the findings from the usability testing, a new iteration was created as a high fidelity prototype.
Reflection
Skills
  • Improving skills and design standards of wireframing
  • Prototyping using components for efficiency
  • Using Figma variables and sticker sheets for more streamlined designing
  • Strengthening the knowledge of the design thinking process
What Next
In terms of the project, I need to take more consideration in terms of accessibility for equitable design. The next focus should be desktop view as majority of the users seem to prefer that. For future projects, I would like to delve deeper into creating design libraries and explore how other companies use design guidelines to bring their products to life.