Design Process
Next we will start the design process in which we will show the steps taken to reach our full prototype. This coincides with the define stage of the double diamond design model.
Persona
The personas were designed in figma and can be viewed in high quality linked here. Joe is meant to signify our inexperienced user and Katrina our experienced user. The both appear in our scenarios multiple times and are reused as characters to demonstrate an aspect of our application.
User Tasks
We then formed the following 3 user tasks that we wanted to focus on:
- I want to search for reputable and reliable home services conveniently.
- I want an intuitive UI/UX to compare prices and quotes from multiple contractors
- I want to be able to identify and communicate my problems effectively and efficiently.
For each user task we created a storyboard as well as a scenario to help us get a better idea of how the user should interact with the app. To view the process, click into any of the accordions below to view the storyboard and scenarios!
View the high quality version of our storyboards at this link!
Wireframing and Prototyping
We then procceded to start our prototyping process. In which we choose to make vertical prototypes while doing the work in a parallel manner. Click on each tab below to view the final version of each of our prototypes!
Internal team review
Based on the previous steps, our team conducted an internal review before we proceed to our final iteration of our prototype.
Once we were done with this review, we went back and modified out prototypes to make the clearer for the user testing and evaluation phase.
Insights
Through the internal team review of wireframes and prototypes, we were inspired by the various implementations and design decisions made by one another. We were able to identify the strength and weaknesses and improved our original wireframes and prototypes based on the feedback given so as to improve both the intuitiveness and meeting user requirements.
Here is a list of learning points that we gathered from this round of design interaction:
- When trying to make the functionality complete with all the necessary components, we should not clutter the screen with every single bit of information. This may lead to information overload and reduce the user experience with the screen.
- Components such as the back button or the breadcrumb can provide an important recovery mechanism for users.
- When it comes to colours, less is more, having too many colours can distract the user from what you want them to see and can affect the overall look and UX of the application.
- Colour hierarchy is also an important tool that allows for the user to focus on what are the next steps or what is the important aspect in a screen.
- Filters/Data Input have to be broader to allow for different situations. Otherwise, we might have to excessively craft multiple designs for various situations.
- Certain parts of the application can be opened from multiple sections. As such, there is a need to be mindful of the flow especially during backward navigation. If not, users may end up going to parts of the application that they have never been before.
© 2022 NUS CS3240 Team 15 - ContractMe!