UTAP — Local e-commerce website
It’s week 2 and the time is going super fast. Time to present my second project at the Bootcamp.
Introduction
Local shops and practitioners are suffering a decrease in the demand for their services and products due to the extreme situation COVID-19 pushed worldwide. This can affect local economies and many families. Alongside this, we can see true intent and a growing trend to support local businesses in many communities.
Online presence is a good way to hijack the issue. More and more professionals are on the verge of their digital transition.
Let’s help local shops and professionals improve their online presence to be more competitive in the actual market.
Challenge
For project 2, my mission with my new team member was to
“Design a desktop website for a local business or professional. In this project we’re focusing our efforts on organizing the information in a clear way, to be most effective for both the customer and provider. 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 benchmarking and market research as well as developing a sense of professional best practices and rules of thumb you can always rely on.”
The Client
Introduction
UTAP is the next-generation digital business card. It uses NFC technology to make sharing contact information as easy as using Apple Pay. UTAP products allow you to share contact info, social media, payment platforms, book an appointment, music and more with just a tap.
We started with the stakeholder interview with the person from the company who vested interest in the success of the product. He offered useful advice about the UTAP product and that ultimately helped us to simplify the design process.
Business Competitive Analysis
The swot analysis, brand analysis, feature analysis, and market positioning map were some of the techniques we employed. Our goal was to position the brand in comparison to other brands on the market.
SWOT
The SWOT approach (strengths, weaknesses, opportunities, and threats) is a method of analyzing competition in the context of a company’s posture.
Strengths
- Multifunctional and Interoperability
- Contactless communication
- Data Protection
- Fast Communication
- High-security standards
Weakness
- To hold the market the brand needs to reach a large mass of people
- Phones without NFC Features
- Lack of knowledge about NFC technology
Opportunities
- Phones without NFC Features
- Lack of knowledge about NFC technology
- Make the product with an attractive design with durability.
- Creation of a new ecosystem
- Many potential features
Threats
- User resistance to new changes and developments
- Big brands having the same technology
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
“An Affinity Diagram is a tool that gathers large amounts of language data (ideas, opinions, issues) and organizes them into groupings based on their natural relationships”
We interviewed 5 people to know more and collected our data and placed them on the Miro board by using sticky notes. Then we grouped the similar responses together and gave them a label.
Primary User Persona
Let’s say hello to Léa — An extrovert Engineer.
We created this character by combining the affinity diagram’s pains and gains into Wants & Needs, Motivations, and Frustrations.
Small Intro: A working woman in Paris, who loves to meet new people in her professional and personal life and loves exchanging contacts with them.
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 ‘UTAP’. 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, customisable 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
UTAP — Minimum Viable Product Statement
The purpose of the uTap 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.
By ensuring that these things are available, users will be able to assess and purchase products with a complete understanding of what is available.
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
“Low fidelity wireframes are just a quick sketch that can make ideas more tangible.
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.” — Mentormate
Mid fidelity
“Medium fidelity wireframes can help to communicate to teams how aesthetic features can support essential functionalities.” — Mentormate
IMAGE (Mid fidelity wireframe)
Mid fidelity Test results
After finishing the mid-fidelity, We decided to do useability testing with 5 people. And we used 3 methods for our useability 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”
“ Your wireframe looks professional, clean and easy to use. Once the website is ready and launched, I would like to buy one of your products.”
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, thru their videos.
Moodboard
“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 minimalistic, customizable, elegant, time-saving and above all accessible.
Second, we gathered ideas for a Moodboard 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, colours, and interface components.”
After thoroughly examining the Moodboard. We were able to identify the site’s visual identity, for example, what may the primary colours, accent colours, 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
“High fidelity wireframes take more effort to create, but they are effective in that they reveal how a product will look at project completion.” — Mentormate
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.
That’s how our Hi-Fidelity looks with all the interactions.
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 centred 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.
Finally, if you want to play with our hi-fi, feel free to scan the QR code.
Takeaways
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.
And most importantly thanks to the fantastic team of NiraLou & Hari harane Sagadevane for working so hard for the project and being so supportive. It was my pleasure to work with you and learn from you.
