U TAP-commerce website
Tap to connect your details in one touch!
Challenge
Our mission is to design a desktop website for a local professional business. In this project, we’re focusing our efforts on undoubtedly organizing the information to be more effective for both customers and providers. Also, we want to tackle Interaction design patterns to make the exchange as streamlined as possible. We will use most of the research time for bench-marking and market research as well as developing a sense of professional best practices and rules of thumb you can always rely on.
“Once a new technology rolls over you, if you’re not part of the steamroller, you’re part of the road.”
Stewart Brand, Writer
Tap into the world of Near Field Communication
The Client Introduction:
U TAP is the next-generation digital business card. It uses NFC technology to make sharing contact information as easy as using Apple Pay. U TAP products allow you to share contact info, social media, payment platforms, book an appointment, music, and more with just a tap.
Business Competitive Analysis
Our goal is to position the brand in comparison to other brands in the market.
SWOT Analysis
SWOT is a method of analyzing the competition in the context of a company’s posture.
Feature Comparison Analysis
Feature analysis, matrix creation for our project to preserve consistency, and organized information on rival features
Brand Comparison Analysis
Brand analysis aids in the comprehension of the market for our project
Market Positioning Map
Market Positioning Map points strategically to our competitors, allowing us to improve our service based on the gaps we discovered.
User Journey & Problem Statement
Affinity Diagram (How to Cluster and Bundle Ideas and Facts)
“Extracting Diamonds from the Minds of Your Users”
We interviewed 5 people to know more information and collected our data and placed them on the Miro board as sticky notes. Then we grouped the similar responses together and gave them a label
Primary User Persona
We created this character by combining the affinity diagram’s pains and gains into Wants & Needs, Motivations, and Frustrations.
She wants to save time and learn about NFC Technology. She feels she doesn’t have enough information about the NFC technology and doesn’t know what all features she can add to the NFC Tag.
Some of Léa’s main goals were:
- “I would love to own my digital business card.”
- “I would like to have more information about NFC tech, and how to use it.”
- “I want to solve the time-related problem.”
- “I want to share quick information with the person next to me.”
- “It should be simple and easy to use, even for my parents.”
Some of Léa’s main pain points were:
- Lack of information.
- Don’t know what all features can be added in NFC Tags.
- Worried about security and data breach.
- Wants to save time while exchanging contacts.
- Difficult for old age people to adapt.
User Journey
After combining both primary persona and affinity map we created our user journey map.
We created a scenario and divided that scenario into 5 stages (all explained below).
Scenario: Léa is excited to go to a home party with her office team and happy to meet new people and grow her network. She started to exchange contacts but she is a little frustrated because it’s taking a lot of time and it’s not a contactless exchange. One guy explains to her about NFC technology and how to use it. She is curious to know about it and starts researching about it the next day but couldn’t find a lot of information. After a while, she discovers ‘U TAP’. On the ‘uTap’ website she can find all the information she was looking for. Now, she can start contactless contact exchange at an affordable price and in a fashionable way and it’s super easy to use/install. And she can even customize her accessory.
Stage 1: Thank God it’s Friday! I am invited to a house party and I am super excited to meet new people.
Stage 2: She is happy to meet new people and people began to notice her.
She started exchanging the contacts but she feels a bit annoyed because it’s taking a lot of time to exchange details between each other plus she wishes to have a contactless exchange.
She starts to complain about not having contactless exchanges (due to the current situation: worldwide pandemic)
Stage 3: A guy explains to her about NFC technology and different features that he recently discovered and is happy to share.
She is curious to know more.
Stage 4: Next day she starts researching about the technology and wants to get more information but not enough information is available.
Stage 5: Decides to buy uTap NFC because uTap offers affordable, fashionable, customizable, and easy to use/install products.
Problem Statement
Curious extroverts need a contactless way to exchange contact securely and have all information accessible.
Hypothesis
We believe that offering a fast, contactless and secure way of exchanging contacts for people who want to save time will achieve reassurance of sharing data and information in a secured way. We will know we are right if the user rates and gives positive reviews on the store.
Prioritization & User Flow
MOSCOW STATEMENT
The Moscow method, also known as MOSCOW prioritization or MOSCOW analysis, is a prioritization technique used in management, business analysis, project management, and software development to reach a common understanding with stakeholders on the importance they place on the delivery of each requirement.
MVP Statement
U TAP — Minimum Viable Product Statement
The purpose of the u Tap website is to inform users about the products offered at the e-shop as well as provide information about NFC technology and its benefits. The website also tries to promote consumer action by letting them know what is accessible. As a result, we must take the following steps:
Create a one-page multi-page website with all the necessary information about the product. This will include e-shop, custom NFC tags, compatibility testing, user account, social media profiles and customer support with the refund policy.
Site Map
A sitemap is a file that contains information about your site’s pages, videos, and other files, as well as their relationships. This file is read by search engines like Google in order to crawl your site more efficiently. A sitemap tells Google which pages and files on your site you think are significant, as well as providing useful information about them.
User flow
The next step is to create a happy path or the user flow.
“User flow is the path taken by a prototypical user on a website or app to complete a task. The user flow takes them from their entry point through a set of steps towards a successful outcome and final action”
Usability Test
Low-Fidelity & Sketching
Lоw fidelity wireframes are usually black and white schemes or simple sketches on paper focused on the “big picture” of the page/project. They show UI elements like boxes and lines without detailed annotations.” —
(Mid fidelity wireframe)
Mid fidelity Test results
After finishing the mid-fidelity, We decided to do usability testing with 5 people. And we used 3 methods for our usability testing: Testing Synchronously, Testing Asynchronously and Guerilla Testing.
Some key changes to be made where
- “There’s no back button”
- “Footer logo was too big”
- “A button to save the delivery address as billing address was missing.”
- “User icons were different”
Branding
Visual Competitive Analysis
We made a visual analysis from our original competitive analysis during our first phase of research, to keep what is relevant for our own brand and to have an idea of what the customer is expecting. So we have Popl, TapD, and Aeklys.
We noticed that Popl and Tap’D are quite similar in their visuals, classic; they focus on the purchasing flow more than giving information. While Aeklys is more elegant, intimate and gives information, in another way, through their videos
Mood-board
“A mood board is a visual presentation or ‘collage’ made up of photos, text, and samples of various objects in a composition. It might be based on a predetermined theme or it can be made up of any material picked at random. A mood board is a visual representation of a broad notion or impression about a subject. They might be real or digital, and they’re great for giving presentations.”
UTAP is minimalist, customizable, elegant, time-saving, and above all accessible.
Second, we gathered ideas for a Mood-board that helped us set up our stile tiles by illustrating our brand attributes.
Style Tiles
“A Style Tile is a design deliverable that shows the progression of a visual identity for the web by using fonts, colors, and interface components.”
After thoroughly examining the Mood-board. We were able to identify the site’s visual identity, for example, what may the primary colors, accent colors, and neutrals be?
Our typography, Raleway, is both minimalist and elegant at the same time.
The hierarchy between the various components could be created as a result of this.
As a result of this, work on the Hi-Fidelity prototype began.
Hi-Fidelity
Have you heard about the Iceberg model?
This model depicts a complex system in a very basic way. It employs the metaphor of an iceberg to show how dynamics we can’t see, such as the structures that make up the framework in which we operate and the assumptions we have about how things work, shape our experiences
And here is how our responsive web design looks on Computer, iPad and on the iPhone.
Here is the final working high fidelity wireframe on Figma
Desirability testing
UTAP is focused on the user’s emotions, the Desirability testing was the final phase in the iteration process. Some users were asked to navigate our website and they said “Our design is centered on the user’s emotions”.
Microsoft reaction card test: Microsoft created this test by compiling a list of 118 adjectives that may be used to characterize a product.
The fact that the uTap website is CONNECTED, EFFORTLESS, PROFESSIONAL, CONVENIENT, CLEAN AND BUSINESS LIKE stands out the most.
5s Testing or the Memory test: We did a second test in addition to the prior one. Users have 5 seconds to envision our homepage and tell us what they think of it and what they remember. And below is the image you can see different quotes from different people.
This was the first time we had to work with a real stakeholder on this new project. We were presented with his and the customer’s requirements.
In order to have a balance, we kept the website’s e-commerce aspect in mind. It was fun to know and work on the user experience as well as on the customer experience.
A new team with Bibin and Niravone succeeded the project at right time.
