EMBBEDED DESIGN
An online application for mechatronic design.
THE PROBLEM
Mechatronics design software is mostly desktop based, expensive, and has a steep learning curve. Coupled with that is, professional mechatronics designers don't come cheap.
Designing and producing a mechatronics system requires a well-orchestrated effort by many types of people in a wide range of job roles and functions.
​
How then do we design and develop a tool that can empower an individual engineer to create a complete mechatronics project from start to finish with minimum effort and make money from offering this platform?
HIGH LEVEL TIMELINE
For the 1st phase of the project, which is UX design, a month was allocated for research.
MAKE OF THE TEAM
One UX/UI designer and a C#,C++ Developer
KEY GOAL
To understand specific user needs, study competitors and craft design specifications.
MY ROLE
As a UX/UI designer, I had to conduct customer analysis, user research, prototyping, wireframing, UI screens, and finally the application's landing page.
After the design specifications were completed by the client, outlining the applications features, capabilities and basic requirements, I started on creating user flow charts for the various actions and activities needed to complete specific tasks.
UNDERSTANDING THE USER
Based on user research, which included interviewing professional mechatronics engineers, students studying electronics, PCB designers and builders. Using a Venn diagram helped us limit the user personas to two user types and to model the user flow around these user types.
​
Interviews were conducted online, with a questionnaire designed to gather information primarily about how users 'feel' about specific tasks/functions, and their experience with available mechatronics design software.
​
The information gathered was then used to further refine and define the user flow created.
User flow chart
WIREFRAMING AND TESTING
Wireframes are created and used to create a low-fi prototype.
I used Balsamic Wireframes to create wireframes based on the research findings outlined in the user flow document. These wireframes were then translated into a low-fi prototype we then used to conduct usability testing to further refine the user experience and application layout.
​
The tests were conducted with a mixture of professional and non-professional individuals, online.
Wireframes
 |  |  |
|---|---|---|
 |  |  |
 |  |  |
 |
USER INTERFACE DESIGN
The company CI apart from the logo to be used on the application, was provided. I had to create a modern lightweight but attractive interface.
When it came to this phase, we had gathered a lot of insight and understanding about the users of the application. This helped shape the final user interface design, which was initially created and tested in Figma.
UI SLIDES
 |  |  |
|---|---|---|
 |  |  |
 |  |  |
 |
HTML & CSS Prototype
I am proficient in a number of frontend frameworks and languages and using React JS, I created a prototype that would form the foundation of the MVP. Extensive usability testing was carried out using this prototype.
Again, this prototype was used to initiate development discussions with backend engineers.
LANDING PAGE
Landing pages are standard practice these days and I created a corresponding landing page for the application. Designed specifically to highlight the core features of the application that would resonate with both professional and novice users.
