Shoppr Project

Explore

Shoppr Design Process

After conducting thorough user research and analysis, followed by the establishing of the target user persona and the 3 key user tasks, the process below describes our Design Phase Process.

Storyboarding & Scenarios

We believe storyboarding and scenarios to be essential in the design process because they help us understand the context of use of our proposed design and to visualise the user experience.

Scenarios

We created detailed user scenarios for all 3 user tasks. Our scenarios helped to envision the context of use, user goals, and user motivations for our 3 key user tasks, which allowed for better alignment between our design solution and our users’ needs. We also identified unexpected user flows in our scenarios. This helped us identify potential gaps between the user experience and design, making us consider different user perspectives and think critically about how the user might interact with the product in ways we did not anticipate.

⁠

⁠

⁠

⁠

Storyboarding

Storyboarding then allow us to visually map out our envisioned user interactions and flows in a way that is easy to understand and communicate to each other in our team.

We decided to use the Crazy 8s method to quickly generate ideas and compare the different variations of our design ideas to nail down our designs to a few best options.

To begin the Crazy 8s method, we set a timer for eight minutes and each team member sketched eight different ideas for the mobile application. The sketches were rough and quick, allowing us to get as many ideas down on paper as possible. After eight minutes, we presented our sketches to the group and discussed each in greater detail and identified the most promising ideas. We narrowed down the ideas based on criteria such as ease of navigation, clear organisation, and utility value for users.

Using the Crazy 8s method allowed us to generate a large number of ideas quickly and collaboratively. The sketches we created during the Crazy 8s method served as a starting point for the development of the final design.

The screenshots below are the final storyboards created using ideas that we have selected to visualise the 3 user tasks.

Task 1: Comparison of important metrics

Users should be able to make easy comparisons of the important metrics for each product at a glance

⁠

Task 2: Saving and Organising products

Users should be able to save and organise products that they are interested to purchase

⁠

Task 3: Quiz to determine decision-making metrics and shopping habits

Users should be able to personalise the decision-making factors based on their shopping preferences

⁠

Information Architecture/ Sitemap

We visualised the a hierarchical structure and overview of all the pages in our app using a sitemap. We grouped our functionalities into 4 main groups - Homepage, Browsing Page, Profile and Onboarding Survey. The Homepage serves to mainly address User Task 1 while the Profile & Onboarding Survey mainly addresses User Task 3. User Task 2 is addressed through the global search bar that is embedded on the Homepage, Individual Comparison Page as well as the Browsing Page.

⁠

⁠

From this exercise, we have established that the heirarchy of our assets will be as such:

Folder

Comparison

Product Listings

Lo-Fi Wireframing

⁠

During the low-fidelity wireframing stage, each team member was assigned two user tasks to design. Our focus was on creating simple layouts using minimal colours to convey the basic structure of the application design. We also mapped out user flows with arrows indicating the direction of movement through the interface. The aim was to create a clear and easy-to-follow visual representation of the design.

Internal Review

During the internal review, we evaluated all of our design proposals for the 3 user tasks. To facilitate this process, we utilised post-it notes within Figma to identify the strengths, weaknesses, suggestions and user flow in different coloured notes for each design. This helped us to assess the different designs in a structured and collaborative manner, allowing us to identify the most effective solutions and address any potential issues before moving on to the more time-consuming and expensive high-fidelity prototyping phase.

At the end of the internal review, all team members were aligned and had a shared understanding of the design goals and objectives.

Design System

⁠

Individual Hi-Fi prototypes

After completing the low-fidelity wireframes and conducting an internal review, we proceeded to design high-fidelity prototypes individually. Each of us worked on our own ideas. This allowed for a wider range of concepts to be explored, and encouraged us to take ownership of our own ideas and designs. It also allowed for a more efficient use of time, as each of us worked on our own prototypes simultaneously, rather than waiting for others to finish.

This step allowed us to explore and refine the details of our initial designs, taking into account the feedback and suggestions we received during the review process. The high-fidelity prototypes were more detailed, featuring refined layouts, enhanced visual elements, and interactive components. Through this process, we were able to create a more polished and accurate representation of the final product.

User Review of Individual Hi-Fi prototypes

We conducted a user review with 4 users. The review focused on getting feedback for our system’s layout, colour, fonts, overall appeal, language, icons and overall flow.

These are the major findings and improvements we did:

Sidebar navigation to user profile was confusing and redundant since profile can already be accessed from bottom tab. → We removed the side bar.

Inconsistent icons for drag, filter → Use the universal icon for dragging and filtering

Inconsistent search bar → During combined prototype, we made all the search bars consistent, in terms of layout and design.

Colours (pastels) reduced readability → We made some changes to the colour scheme as explained further in ‘Standardising a consistent visual style’

Standardising a consistent visual style

Custom Mascot for Shoppr

We ideated that our custom Shoppr mascot for Shoppr can be an owl to represent wise choice/ reliable recommendations. Varrene then successfully converted our ideas into cute graphics which are used in the onboarding process of new users.

⁠

Screenshot%202023-03-20%20at%204.52.39%20PM.png

⁠

Changes to the Colour Scheme

We had originally used a pastel colour scheme for the application as we wanted the colors to represent a more relaxing and muted user experience for users who are using our application. However, as the team was making our hifi prototypes, we identified a weaknesses in our prototype:

Reduced readability and legibility

Readability stands for how easily people read copy content and legibility defines how quickly users distinguish the letters in a particular typeface.

The use of pastel reduced people’s ability to read our content and quick distinction of product comparisons and their details. As a result, the use of colors might hinder the time spent on making comparisons as they do not intuitively associate paler colours with call of action/ decisiveness.

As a team of designers, we came to a solution to use brighter colours to increase contrast, readability and legibility.

Use of bright contrasting colors

As a result, we opted for a striking orange (primary) and blue (secondary). Bright colors are easy to notice so it can be used as a means of means of highlighting or setting contrast. Moreover, applying one color to the several elements you can show that they are somehow connected.

As designers, we realised the power of colours in guiding our users to carry out our primary tasks, for example we choose an orange color for primary buttons so that people could intuitively find them when they need.

⁠

Screenshot%202023-03-18%20at%2011.26.35%20AM.png

⁠

Original Colour Scheme

⁠

Screenshot%202023-03-19%20at%206.44.33%20PM.png

⁠

Final Colour Scheme

Table to Compare Different Products

Tables will allow our users to clearly and systematically compare multiple products side by side. By organising the relevant product information in a table format, our users can quickly and easily compare the features, specifications, and pricing of different products. This can help them make an informed decision based on their needs and preferences, without having to spend a lot of time and effort going back and forth between different product pages or trying to remember which product had which features. Additionally, tables are visually easy to read and comprehend, making it easier for our users to process and compare the information presented.

⁠

⁠

Table format for easier comparison

Usability Review

Our process of usability testing involves evaluating our hi-fi prototypes with 7 potential users to identify areas of improvement and ensure that our design is user-centred.

During the usability testing, we asked the participants to perform our 3 key user tasks on the prototype while thinking aloud, and we observed and recorded their actions, comments, and feedback. Here are our main findings.

Task 1:

Participants find the purpose of the pin and checkbox feature unclear.

Participants find that have 2 ‘Save’ buttons - one for the Comparison and another for each product listing - were confusing.

Participants were mislead to think that they can buy products in our application.

Swiping down to delete was found to be unintuitive.

Task 2:

Users found the purpose of Quick Save folder unclear and were unsure how to use it

Some users found that the accessing the comparison feature through a folder may not always be the most intuitive and indicated preference for searching the product first before organising it in folders

Users found the value proposition of the Product Marketplace place very similar to that of the Browsing products + getting comparisons page and did not find it useful

Task 3:

Improvements can be made to the colour and placement of buttons and the length of the question statements

Navigation can be added to the tracker at the top

Participants also expressed curiosity about other shopper types

At the end of the test, we asked users to rate the usability of our design on the system usability scale (SUS). We received an average SUS score of 64.2.

Heuristic Evaluation

We also conducted heuristic evaluation with expert UIUX Designers by inviting them to evaluate the user interface of our interfaces against Nielsen's 10 heuristics for user interface design. Internally, we also reviewed the product and looked for areas where the design addressed and violated these principles and provided recommendations for improvements. This process involved a thorough analysis of the product's design and user flow to identify any potential usability issues and to ensure that the product meets the needs of its users.

The improvements we made based on our findings in this evaluation can be found in the section below.

Key Improvements based on Findings

1. Clearly define 2 types of user flows for accessing the “Comparison” feature

We have clarified the 2 user flows below and the clearly differentiate the purpose and context for each of the flows

Flow 1- Start with an event/ context in mind so create a folder → Search products within the folder → Save Products & the Comparison to the folder

This is suitable when the user has a specific purpose of purchase in mind, such going on a Camping Trip etc.

Flow 2 - Browse products in feed → Get comparison → Save Products and the Comparison → Choose folder

This is suitable when the user does not have a specific purpose of purchase, but is casually browsing to see what he/she may need to buy

Clarifying the above has helped us identify the exact use cases and gaps in our prototype flow

2. Profile Page Revamped to Instagram Stories Format

Paragraphs of text can be overwhelming and difficult to navigate, leading to disengagement and frustration for our users.

In contrast, short Instagram stories are an effective way to display information for different shopper types identified through the quiz because they are visually engaging and easy to digest, allowing users to quickly understand and connect with the content. Instagram stories provide a dynamic and interactive experience that keeps users interested and involved.

⁠

⁠

Before: Profile page

⁠

⁠

After: Profile Page

⁠

⁠

Additionally, we are allowing users to explore other shopper types in their profile, apart from the one that they are identified as, to allow users to gain a better understanding of the different shopper types and their unique characteristics. We have designed 4 different pages, each colour-coded for different shopper types to create a consistent and cohesive visual language throughout all the pages for each shopper profile.

⁠

⁠

⁠

⁠

⁠

3. Addressing weaknesses from Heuristics Evaluation findings

Heuristics Evaluation

Heuristics Evaluation

Match between system and real world

Positive - Uses standard vocabulary used in other applications, such as ‘Create’, ‘Cancel’, ‘Tags’. Negative - ‘Quick Save’ might seem to users that it is where they save products instead of comparisons. Hence, there might be a mismatch between users’ expectations and the system. Negative - Users find it unintuitive to remove a product listings from the comparison table by swiping down.

Help & Documentation

Negative - Our users were confused about the term “Quick Save”

Consistency and Standards

Negative - The color and positioning of the primary button and secondary buttons are not standardised especially in the Quiz pages.

User Control & Freedom

Negative - Our initial idea implementation was to have the product listings within each comparison table auto-populated by the app with the recommended products. Users find it restrictive that the product listings inside a saved comparison are populated by the app instead of them having an agency to choose what products they want to see in each comparison table that is saved. Negative - System doesn't allow users to delete comparisons of products even if they save a comparison by mistake.

Error Prevention

Negative - The app in general has little error prevention in the form of pop ups etc.

Flexibility and Efficiency of Use

Negative - the quiz felt very long and user cannot anticipate what is coming next Negative - System doesn’t allow user to select only the products they want to save. It only allows users to save the entire comparison table.

Aesthetic and Minimalist Design

Positive - Generally consistent and uncluttered design

Visibility of System Status

Positive - The headers and progress bar allows the user to understand what page they are on and how many pages are left. Whenever the user navigates to a new page, the system is able to give appropriate feedback through darkening of bubbles in the progress bar. Negative - No feedback to user after saving comparisons.

Match between system and real world

Finding from testing and review

Positive - Uses standard vocabulary used in other applications, such as ‘Create’, ‘Cancel’, ‘Tags’.

Negative - ‘Quick Save’ might seem to users that it is where they save products instead of comparisons. Hence, there might be a mismatch between users’ expectations and the system.

Negative - Users find it unintuitive to remove a product listings from the comparison table by swiping down.

Improvements made

Allows removal of product listings from the comparison table using a button instead of swiping down

Illustration

⁠

Mockups Screenshots

Register page + Quiz Pge + Personality Result page

⁠

⁠

Left to right: Register page, quiz page, personality result page

Homepage

⁠

⁠

Comparison Page

⁠

⁠

Combined prototypes

⁠

Thank You Note

We would like to express our special gratitude to Prof Bimlesh Wadhwa and our mentor, Nicole, as well as our interviewees and UIUX expert designers who provided feedback along the design process 😊

About Us

⁠

Back to Home

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.