2. Introduction to my website and
company
• Bean & Co is a B2C company which focuses on selling products which
is coffee pods and accessories through an e-commerce.
App, desktop & mobile wireframes:
https://www.figma.com/file/gaBJzkMbuQ7gDNEGvYWCPy/Untitled?type=design&node-
id=0%3A1&mode=design&t=BKkZG9ceOQzZltRp-1
Link to website:
https://megirpasha.wixsite.com/siti2
4. Desktop
wireframe vs
mobile
wireframe
Large buttons that
customers can press
easily on a touch screen
The search bar is easy to
find and use
More images situated on
the desktop frame as
there is more space on
the screen
5. Large buttons that customers can
press easily on touch screen, touch
zones for mobile buttons should be AT
LEAST 9x9mm
DECLUTTERED, simplified with easy navigation and
instructions with what to click and what will
happen when they click the button. These buttons
also stop your customer from becoming lost and
abandoning your app due to too much
complication occurring
Minimising user input at
checkout, checking out
with Apple Pay, Google pay,
enabling the auto-fill
button for addresses. It
enables users to have less
frustration having to go
back and amend mistakes
Usability over aesthetics is vital on an
application.
App Design
6. Marketing Segmentation
It is important to divide my market into segments so I can target customers individually, and create
marketing strategies which are unique to each segment. For example, I want to increase customer
satisfaction but also drive sales through the new e-commerce site.
7. User Personas
Sarah
Ben
Helps to target the correct customer when marketing and
provides more of a deeper understanding of the customer.
Helps to create more effective marketing campaigns too.
In terms of product creation too, this can really be beneficial as
we can create products that align with their values, needs as well
as campaigns that resonate with specific segments of my
personas. Creating valuable products that customers will most
likely want to purchase again.
8. • With the basic navigation bar
and footer being considered. I
thought of other ways that I
could interest my customer
and navigate to their specific
interest. I considered
breadcrumbs which clearly
shows the use the journey
they have taken to a page to
get to a very specific page or
product.
• Because I already have a
navigation bar I thought it
would be a little messy having
the navigation bar as well as a
breadcrumb bar added below
it. Its also good for larger
websites that sell more
products. Mine doesn’t have
many products so I don’t think
this is needed yet.
I considered this navigation practice for my
website
9. Flow design
I created an example of a flow design which
mentions the touchpoints that my customers will
make when purchasing the products being sold, also
helps to understand how the customers are
navigating through the website, and where
customers may drop-off and leave the site.
10. Design principles
• Use of bright call-to-action buttons, leads customer
straight to the point and hopefully to the end of the
funnel faster
I can of course use CSS code to embed which is suitable
for the design of the website and the language in which I
am conveying. There are other languages such as
Javascript which creates more of the interaction and
movement on my site. These are integral for user-
experience and the layout of your site. This is pretty
limited with wix though due to the pre-made elements
and editor section
Using colour psychology and a deeper suggestion of
colours I used blues within my website that suggest
trust, power and confidence. It helps customers to
understand that we do not have other motives for the
website but to provide a confident user experience.
11. Typography
When designing the website black
mustn't be used in the typography.
This can affect the user experience on
your site. Using #212427 can benefit
instead using #00000 which can cause
eye strain.
Font size is 16px so that it is easily
readable for customers, this is
usually prominent in the mobile
version too.
12. Colour
checking for
visual
impairments
To prevent accessibility complaints and difficulty navigating the website I decided to use a colour checker
to make sure that the colours I have implemented onto my site are suitable for even customers that have
visual impairments.
14. W3C Accessibility and Standards
• W3C web accessibility initiative helps to drive website creation forward. It ensures
that standards are kept, are consistent and that long-term growth is maintained.
W3C also helps me to create a website that has a positive experience on all devices I
am creating it for, i.e desktop and mobile and how to feature specific tools on varied
devices.
Examples of this that I could add to my website, include web standards for people with
disabilities to use for an enhanced website navigation and journey. This could be
speech input and enlarging font. Or using assistive technologies which is becoming a
standard in W3C recommendations.
15. Web protocols
• When creating my Wix site, all devices that access the site will have an IP address
(internet protocol). This means that a device using my site which is located on the
internet can be identified using this. Web protocols allow devices to communicate as
well as transfer data successfully on the network.
• But for the actual website, HTTP (Hyper text transfer protocol) is what loads the page,
via hypertext links. This actually transports the data from my website onto customers
devices. Images, sound video and text for example is transferred using this rule.
16. User journey
On the next slide I completed a user-journey map to demonstrate how my user interacts with the journey through
my website. It can assist me to create an ideal customer experience
User interviews could also be conducted for my website as this helps me to learn who my users are and what
demands need to be met on my website as well as what they care about. It can also help me as a brand put myself
into my customers’ shoes and build empathy for them.
17. Journey Steps Awareness Consideration Acquisition Service Loyalty
User Actions
Searching for cheap coffee pods
on Google
Friends have recommended
coffee pods
Advertisements on Instagram
and You tube based on searches
on Google
Browses the coffee pods section on
Bean & Co
Browse reviews on website/ Trustpilot
reviews
Look at the mix-and-match section to
see if they can combine different
coffee blends or see if they purchase
one blend
Selects different blends of coffee,
which is a touchpoint
Signing up
adding payment details
Inserts discount codes
Purchases the item
Emailing customer service
Also filled out the contact form
Still continues with the subscription
to have coffee pods every 6 weeks
Repeat purchases
Friend referral
Goals and
Experiences
Understanding different options
of coffee, coffee pods and what
their requirements are
Discovering the brand,
(awareness)
Has gained trust and an understanding
of the service that Bean & Co has
provided to customers
Different coffee blends, variations, is
something different and interesting
Has found the best blend for them,
has selected the product they
require, easily
Obtaining the product
Provided them with feedback on
their order
Has managed to have frequent
deliveries of coffee pods
Feelings and
Thoughts
Overwhelmed, unsure of
where to look for coffee pods
Unsure about the brand at this
moment
Intrigued to learn more about coffee
blends
Hesitant about the taste of the
coffee
Feels reassured but feels like the
process to get through to customer
service is prolonged
Feel special with promotions
Opportunities
Improve SEO so that the brand
ends up at top of google
More brand-awareness, and
visibility. Customers are more
aware of our product
Provide options to have samples,
incentive
Ask what they drink coffee for, work?
Leisure? this may help them choose
the right strength of coffee
Providing a discount for the first
coffee reducing risk
Video review of coffee, trying the
coffee
FAQS page
Live chat
Live tracking system with tracking
code
Gain more reviews and feedback by
carrying out surveys, would you
recommend us to a friend?
Sending samples of new products
Pain points
Overwhelming on google, many
options
Is the brand trustworthy yet
Website is only in UK, which has
led to site abandonment as
international customers visiting
Customers are overwhelmed by
different coffee blends, and too many
variations, which may result in
abandonment
Samples may not be available due to
stock issues
Customer doesn’t want just a one-
off discount, may not be satisfied
with second purchase
No confirmation email straight
after they have purchased, would
like this to be automatic after they
have purchased
How do they deal with returns?
Consider this
Bored of the same product, losing
interest
18. User Experience
An example of a positive user experience is ensuring that customers do not have barriers when
purchasing a product. A website and journey that is efficient is perfect for the fast-paced market we
have in 2023 and the future.
Allowing customers to connect with customer service for example a live chat and ensuring customer
feedback means that customers' voices are being heard and support is there for them, as well as social
proof and building an online reputation that customers can trust, making their overall user-experience
more positive.
With a positive shopping experience which is important to me because I am selling a product, this is
vital. I designed a filter tab which saves customers time. Being able to filter the preferred product type
straight away to get exact results. This stops customers having to scroll searching for the correct
product they’re searching for and allows user control.
19. Data Tracking Metrics
Because this is a B2C company, metrics being tracked vary between that and B2B.
Metrics, for example social engagement may be priority to track for B2C than that of
B2B which may be a customer relationship management system tracking your
interactions with clients.
Other events that would be prioritised would be the behaviour of the customers
shopping for example, the URL of the pages most looked at and scrolled, as well as the
number of cart abandonments weekly/monthly. This can help to determine which
customers can be retargeted using an abandoned cart email. This re-engages my
customer and recover a lost sale. It also helps us to go into why customers are
abandoning the cart? Friction when purchasing? Delayed processes to purchase?
This can help you understand what your customers want to see and buy. Could even
look at how many visits are from previous customers who have recently purchased to
help focus marketing efforts on retaining customers.
Another interesting metric is seeing how customers are paying for their products, is this
by using Apple Pay? To see what the customers prefer to pay with helps you to maybe
add something like one-click purchasing, which enables a quicker way of purchasing
your product, more efficiency and less likely site abandonment. You could also look at
who is checking out as a guest?
Using tools such as Google Optimise can allow you to test varied versions of your web
page to track how well the performance is on each one. It notifies you which one is
more inviting and more successful than the others so which landing page to prioritise.
Example of one-
click purchasing on
app design
20. Other Metrics, user tracking Net promoter scores - a great metric to gather
information as to what customers are my promoters
(who are most likely to recommend the products to
people that they know) or if they are detractors,
(unlikely to recommend and unsatisfied with the
product and service). This helps with market
research as it helps to attain data about who I
should be marketing the product to more.
Having metrics in place can also help navigate the SMART goals and see if we have met them. For
example if my goal is to increase awareness of a new Coffee pod flavour... Events I would track
would be, how many customers are finding our website through social media channels or on
Google? I would also measure the page scroll on our website and see if our product is actually
having any engagement by customers. As well as button clicks on the new product. Another could
be the site search usage which helps to see what customers are searching for and whether this
product is gaining any engagement specifically.
Other events that are relevant to my e-commerce site are bounce rate, because it is good to have
the attention and awareness of the site but if the interest isn’t there and users click off as soon as
viewing the landing page, this could be an issue because we aren’t retaining customers.
21. Heat Maps
For me to use Heat Maps it would be ideal to identify whether the positioning of my image or button was in the correct
place, was it encouraging/increasing engagement? It also can allow me to identify how the customer is navigating the
website, whether I need to adjust the button size, add more moving images/adjust the size of the images. Click
heatmaps are great for analysing where the customer is clicking on your homepage, it also helps me to see whether they
are clicking in the place we want them to or whether the call-to-action isn't being used?
This is an effective way of data tracking in order to work out what is and isn’t proving as effective on the website.
I did try to use a heatmap but it cost money to activate this, but it would be something that I will consider using in the
future. Instead I used a software called Lucky Orange, Heatmaps were on this site but again came with a cost. I did
though, use an alternative feature where notifications would pop up to inform me that customers were on my site and
how long they spent scrolling on my site.
22. Web Optimisation
• Optimisation is very important and the file types used on your site can really
determine customers’ accessibility to your site. For example, if there are assets that
are used which are too large, this can delay the customers’ process of actually even
accessing the landing page of your site. This could also lead to the drop-off rate
increasing and customer acquisition dropping too. ‘53% of mobile visits leave if a
page takes longer than 3 seconds to load’. (Google, 2023)
• For example, being conscious of higher quality images is good but can increase the
file size being used, ensuring to maintain both lower and higher resolution and being
between both can ensure a faster website when being loaded up. If the budget is
being utilised on the quality of images but not being conscious of the slow speed, this
can really affect the reputation and user experience of my e-commerce site. Using
JPEG as opposed to PNG is better to use as the loading time is faster, it can also
improve SEO ranking because of the speed. But PNG is good to use for my logo
because they are blocky. So they’re better for images with limited colours, like the
logo..
• With this being said, image quality can also differ between different mobiles and
pixel size can vary. It can also depend on the density and screen size of my phone
too. Resolution size also differs on assets situated on a desktop compared to an
iphone, ensuring to cut images and re-sizing images to fit these screens is important.
• Optimising images for visual impairments for example using alt text and alt tags to
describe the image on the site. But with this in mind the alt text cannot be too long,
as this can affect visual impairments.
• Its also good for people who cannot load view the product image due to slow internet
connection and other limitations.
23. Web security
In terms of guiding principles I have allowed the customer easy control to opt in or opt-out of cookies without the user feeling
obligated to accept the cookies. But with this being said I made sure to state that due to not accepting these cookies it could
come with an impact on the experience of the site.
With this being said, in 2023 events are being used instead of cookies to track users' activity on the site, whether that be
scrolling, file downloads or link clicks. With software such as Google Analytics G4A it does not use cookies to identify the users
on your site. Some say because the ‘technology landscape continues to evolve’ and the new analytics are designing a future that
eliminates tracking capabilities and supports matters like fraud prevention. And also delivering relevant advertisements.
24. Data Privacy
• Data privacy is also integral to keep customers up to date with
any potential data breaches or amendments to the privacy
policy, they are also intended to protect customer data from
not being used correctly and being exposed to third-party
companies.
• I created an example of how I would inform customers of an
update to their privacy policy. In this case, it would be the Data
Protection Act, as we are situated in the UK of course. Making
sure to be open, clear and transparent about the updates being
made is important and ensuring that the benefits for the
customer are stated.
• Mainly for marketers it is vital that if we are notifying
customers about updates to this policy or other amendments
being made to their data privacy we need to be transparent,
accurate and provide the customer with consent to opt-out if
they prefer. This builds trust for our brand but it is also part of
guiding principles and must be abided by when creating
copywriting for our customers.
25. SEO Use
Using backlinks as a part of Bean&Co’s SEO strategy is
great because it shows customers that the website you
have created contains valuable information about coffee
pods and nutrition for example from reputable sites, even
statistics. The more website backlinks that I contain on
my copywriting the more Google will notice this and place
the website higher up on the Google search. It enables
more authority for my website. Backlinks are pretty much
digital recommendations.
Backlink examples are as easy as me linking up my social
media to my website and ensuring this is linked correctly
to the social media channels.
For example, if Bean&Co was struggling to establish trust
from new customers to buy into their coffee-pods, this
would be the sort of content I would create:
26. SEO (Continued)
• Keywords are effective to use in the content strategy to help my website gain more visibility. Incorporating words that are most
likely to be searched on Google will enable more presence on Google and growing user presence on the site, with the words in
the copywriting of my site correlating to popular searches
• I used Semrush Keyword Searcher which helped me to write more effective content that provided more value. It also allows me
to provide content that will suit customers' needs.
27. Content Writing example using Keywords
Here is an example of content written
from popular keywords on a UK
database. To try and create traffic on
my site I selected keywords that have a
high volume and are relatable to what I
am selling/advertising on my site.
28. Content writing example using content remixing
Content remixing is important for my e-commerce because social
engagement is one of my data tracking metrics, therefore this is
something that I would consider—altering my content on my website for
example onto Instagram and other social media channels. This could help
reach a wider audience by using the same content that may have not
reached a wide audience if it was only situated on one social media
channel. Being creative with my existing content. I could even create
visual pieces using the content I have made already to create an even
bigger impact on my customers.
29. • Another good way of copywriting is
providing problems customers have when
using coffee pods for example, they aren’t
able to be used in many machines and
providing a solution. Letting the customer
be persuaded to take action.
• Or introducing a model such as the AIDA
Model, gaining the customers attention at
the beginning, as well as their initial
interest, encouraging the customer to
take action and change the problem that
they are having, or missing out on a
special offer. And lastly call the customer
to take action by adding to
cart/purchasing.
Are you becoming bored of your coffee-pods but tired of having to fit
their standards and purchasing an expensive new machine every time?
Unlock a world where you can use our coffee pods in over 100
of the top manufacturers dominating the coffee machine
market now! No need to keep purchasing machines.
Were here to help you save money, you can even
attain a sample of our pods, or if you’re ready to
go further with our exceptional coffee pods we
offer 10% off to first-time customers. Win win.
Take 10% off now by clicking below,
Or, click here to subscribe to our
coffee club which enables you to
save 10% on your coffee pods,
Every. Single. Time.
Copywriting
30. Design issues
• Managed to reduce images and text to fit the mobile frame
on the wireframe but not on the Wixsite. I cannot remove
text that is already situated on the desktop frame. I would
have had to remove this via desktop first for it to appear on
the mobile.
• Applying discount codes to the clipboard or onto cart. I was
unable to figure out how I could do this on wix.
• Trying to make my website multi-lingual I wanted to create
this to sell products to multiple countries in the future,
unable to work out why all of the text on my site was not
changing to the selected language
• I tried to add my newsletter form to the footer on the
bottom of every page not just the home page. I was unable
to do it because I reached my limit without a premium
membership
• Couldn’t seem to add a search bar onto my mobile frame on
wix
31. • With trying to reduce images and text, I decided to just shrink the text size on the phone
frame instead of removing the text, as it’s not possible on wix to remove it from one frame
and not the other.
• With discount code application to cart, I created a hidden window from the menu tab which
customers are diverted to when they click to apply code. Essentially a success message
• With adding more forms to my footer I guess I need to buy premium in able to use more
features on wix
Overcoming design issues
32. BIBLIOGRAPHY
Babich, Nick (2018) A comprehensive guide to app design Available at: https://www.smashingmagazine.com/2018/02/comprehensive-guide-to-mobile-app-design/
(Accessed 2 December 2023)
Xtensio User Persona Template (2023) Available at: https://xtensio.com/user-persona-template/ (Accessed 2 December 2023)
Dunmore, Jamie (2021) HTML vs CSS vs JAVASCRIPT explained Available at: https://blog.boot.dev/javascript/html-css-
javascript/#:~:text=CSS%20might%20be%20hard%20to,and%20are%20recommended%20for%20beginners. (Accessed 3 December 2023)
Kennedy, Eric (2021) The responsive web font guidelines Available at: https://www.learnui.design/blog/mobile-desktop-website-font-size-guidelines.html (Accessed 3 December 2023)
Accessibility checker – colour contrast for WCAG (2023) Available at: https://www.accessibilitychecker.org/color-contrast-checker/ (Accessed 3 December 2023)
W3C (2023) Accessible rich internet applications Available: https://www.w3.org/TR/wai-aria-1.2/ (Accessed 4 December 2023)
Streissguth, Adele (2023) Everything to know about writing an abandoned cart email Available: https://www.constantcontact.com/blog/what-is-an-abandoned-shopping-cart-email/
(Accessed 4 December 2023)
Google (2023) Consumer insights Available at: https://www.thinkwithgoogle.com/consumer-insights/consumer-trends/mobile-page-speed-new-industry-benchmarks/ (Accessed 5
December 2023)
Rosemarino, Carla (2019) JPG vs PNG for web Available at: https://www.bluearcher.com/blog-item-jpg-vs-png-for-web (Accessed 6 December 2023)
Search Engine Journal (2023) Google to disable third party cookies for 1% of chrome users Available at: https://www.searchenginejournal.com/google-to-disable-third-party-cookies-for-1-of-
chrome-users/498429/#:~:text=Why%20Google%20Is%20Phasing%20Out,prevention%20and%20delivering%20relevant%20ads. (Accessed 6 December 2023)
Lucky Orange (2023) Available at: https://www.luckyorange.com (Accessed 7 December 2023)
Kurtz, Taylor (2023) How much will backlinks matter in 2023? Available at: https://searchengineland.com/how-much-will-backlinks-matter-392493 (Accessed 6 December 2023)
Semrush (2023) Available at: https://www.semrush.com/analytics/keywordmagic/?q=coffee+pods&db=us (Accessed 8 December 2023)
Foundation Inc (2023) What is a content marketing remix? Available at: https://foundationinc.co/learn/content-marketing-remix/ (Accessed 8 December 2023)
