As part of one of my core courses at RIT, we have been working on a problem statement in a team and proposing a design solution as the end product.
A price-comparison application that equips users with information regarding the prices of items across stores in their geographic vicinity. Users are provided with options from different outlets, compared by price point and availability, enabling them to make appropriate decisions for their purchases.
Timeline: Aug - Dec 2021 (4 months)
Team: 4 members
Skills: Contextual Inquiry, User Flows, Affinity Mapping, Personas, Prototyping, User Testing
Tools: Miro Board, Figma, Google Slides
Oftentimes, students find themselves having limitations on their monthly allowance as they have to manage groceries, stationeries, electronics, etc. on a set budget. Trying to be both cost-effective and time-efficient is tricky at times. So we wanted to create an application that helps them to compare prices for day-to-day things.
Our team successfully interviewed a total of 19 participants, analyzed the responses and created a well-structured affinity diagram. The process started with brainstorming on the interview questionnaire, followed by conducting interviews both in-person and online and finally interpreting the responses.
Demographics:
19 Interviews
Students
Age Range: 21-25
Belonging from US, Bangladesh, Turkey, Taiwan, India, Nepal and China
Affinity Diagram:
Following is the link to the affinity diagram created on Miro. Clicking on the project name towards the bottom of the embedded link provides access to the entire board.
{Board Embedded}
Alternatively, the board can be accessed here. (It also contains the interview inputs, base-level grouping and middle-level grouping.)
You can use content blocks to arrange your articles, large texts, instructions. Combine these blocks with media blocks to add illustrations and video tutorials. You can use various content blocks to work with your text. Add quotations, lists, buttons. Select your text to change its formatting or add links. Mobirise is a simple website builder that helps you create amazing web pages without knowing any code.
Revisited the features decided to include during the initial meetings. Analyzed and compared those features with the inputs received from potential users interviewed during the contextual inquiry phase. Thus, came with the final list of functionalities to be included in the wireframes.
Flow of the Design System
Made the hi-fi prototype using Figma. The aim was to make a simplistic design that is user-friendly.
We proceeded to make the various pages and contents of the corresponding pages for the applications. Interactions with various elements of the pages and connections to various pages were made.
After working on the various pages, both individually and as a team, we had several meetings to discuss individual pages, the connections between the various pages, and the general flow and structure of the application itself. Respective changes were made based on the various discussions.
After the pages and the overall prototype was finalized, the interactions were recorded and a walk-through was narrated using a screen recorded video.
Visual Guidelines:
Overview of the finalized frames:
Would like to check the design file with connections?
Link to the Figma File: click here
