Irish Apothecary Shopify Store Redesign.
Brief
Irish Apothecary is a well-being store and education centre based in Westport, Co. Mayo, Ireland.
Nicola the owner of the store, was having issues with her Shopify store, and getting feedback from customers that the store was difficult to navigate and to find what they were looking for.
I was asked if I could help improve the layout of the store to make it easier to navigate.
Role
Freelance UX Designer, App Developer
Duration
January 2023 - August 2023
Summary
I started the project at the end of January. I first went to Nicola, to get an understanding for her and her shop, just so I could get a feel for the place, and talk in person to understand what her goals with her business and the Shopify store as well as some of the problems that she needed help with, so that she could achieve her goals.
This was the first time I had ever worked on an existing project where I had to redesign it, as normally I am contracted to create an App starting out just from an idea. with Nicola the store already existed, but we found that the page builder used to build the store was too complex to work with, So I suggested to re-create the store using a different template which would be much easier to manage, on top of the fact that we could completely refresh the store too.
1. The Problem:
Nicola faced difficulties with her Shopify store, with customers finding navigation and locating products challenging. The complexity of the page builder further limited her ability to make even small changes, and she expressed dissatisfaction with various aspects of the website.
Nicola allowed customers to create their own blend oil blend in the physical store but found it difficult to implement it in Shopify.
Recognizing the value of her in-store custom oil blend offering, I worked closely with Nicola to understand how to translate this unique experience online. Nicola also wished to expand a basic course-selling section into a dedicated "Irish College of Apothecary" but was uncertain how to proceed.
With careful attention to Nicola's concerns and vision, I collaborated with her to integrate both the "Create your own" feature and the Irish College of Apothecary into the store by the end of the project. Though beyond our initial plan, these additions were made with a shared commitment to enhance the user experience and align with Nicola's business goals.
Main Problems identified:
-
Customers find it difficult to navigate throughout the site.
-
Customers are unsure of what an oil blend is.
-
Customers have difficulty finding products that fit their needs.
-
Difficult to edit the layout of the store because of the complicated store builder.
-
Unable to implement create your own feature in shopify.
-
Difficulty implementing online college feature as desired.
-
Current design is not mobile-friendly.
2. My Role:
My Role was to work with Nicola to understand what were the areas of the shopify store that customers were finding problematic, and then come up with solutions for how we could improve them.
I worked as a freelancer on the project doing UX design and working in shopify to update the store design.
I worked with Nicola the owner and Kerry one of the employees, Who's also my cousin! 🥳
I worked coming up with a design for the layout of the store, doing UX research from best practices for Ecommerce stores to looking at competitors to see what was working well for them, sketching and creating mockups in Balsamiq, to picking a Shopify theme that Nicola liked and implementing it.
Kerry worked sourcing and creating the imagery and copy for the site, although I used ChatGPT to create some of the blurbs on the homepage! I bet you won't be able to spot which ones! and I've nearly forgotten myself as they blend in so well with the content that the girls have written!
3. Research:
How I came to the proposed solution
Through talking to Nicola I understood what areas were causing problems, which were.
-
Customers find it difficult to navigate throughout the site.
-
Customers are unsure of what an oil blend is.
-
Customers have difficulty finding products that fit their needs.
-
It is difficult to edit the layout of the store because of the complicated store builder.
-
Unable to implement create your own feature in shopify.
-
Difficulty implementing online college features as desired.
-
The current design is not mobile-friendly.
My first action was to look up the UX Design process.
The 2nd thing that I did was looking up best practices for redesigning an e-commerce store as this was the first time I had redesigned a Shopify store. Similarly to doing general UX design research best practices for e-commerce also recommend focusing on the main pain points that users faced when using the site and to address them, another point was to reduce the clutter of the site, only having the most important things on the page, and easily visible. Reducing clutter from the site, starting with a blank canvas and keeping clean and simple was what I kept at the heart of the redesign, while addressing the problems we identified.
I also looked at other popular stores and competitors to see what was working well for them, so I could take inspiration from them too. I have a link to the miro board below where I kept different snippets that I liked from other sites.
4. Solution
I start out all of my projects by planning things on paper.
Here is the normal process I follow:
-
Write plans in written form in notebook.
-
Sketch designs in notebook.
-
Design basic wireframe in Balsamiq.
-
Design High fidelity prototype in Miro or Figma.
-
Create final design in app or website.
First I wrote out the steps that I would take in written form, and Then I sketched drawings and designs in my notebook. I then showed these to Nicola to confirm that we were on the same page for what my approach would be. After checking in with Nicola, I created a basic wireframe in Balsamiq.com wireframing software.
This allowed Nicola to see an actual representation of what the new website might look like. Balsamiq is great for a redesign as it allows you to strip back all the noise and clutter, to just a black and white wireframe on which by playing with different font weights it shows you which content stands out the most, and makes the page as a whole easier to read.
After designing the wireframe in Balsamiq and seeing that Nicola was happy with it, I went ahead and started to design in Shopify. Some of the challenges I faced was trying to replicate the design using the current page builder in Shopify that was used to create the current theme, It was so complicated I could barely move anything! through looking at other shopify development agencies and looking at sites they created, I was able to see what themes they used in order to create their designs, which was very helpful for me as here I could see what themes other professional agencies were using and knew that I could trust the theme was good if they were using it!
When implementing the design in Shopify we went through multiple iterations and nearly every week it actually looked completely different as I showed it to Nicola and Kerry and got their feedback. Each week they were very happy with the progress and how it looked.
Homepage wireframe design.
Collection Page Wireframe
Product Page wireframe (view wireframes in balsamiq here )
5. Challenges I faced
I started out testing the app with 5 play centres. Which led me to come across some
Challenges mentioned below.
Sign-in Form being used for more than just a disclaimer form.
Initially I was told one of the main reasons for the form was for insurance reasons.
After observing the staff and parents at the play centre on a normal day using
The paper forms before the app had been created, It became clear to me that
The form was not just used as a disclaimer for insurance purposes but a lot more.
To keep track of which shoebox the child’s shoes were in, how much that group paid and in the event of a fire the sheet would be used as a role call to check everyone was out of the building, as each sheet had the name of parents and kids who signed in.
So I had to design the form and create a manager’s section to incorporate these aspects.
Realizing this completely changed the use of the app from something you use once and store records long term, to the table on the mangers section being used frequently to check people in and out and track other details.
I also used Hotjar and FullStory to remotely see how the parents and staff were using the app and if they were having problems with it, which was majorly helpful.
Example of sign in sheets from 2 different playcentres
Play centres forgetting their pin.
One of the decisions I made when creating the app was to store details of the play centre like their logo, name and the pin to access the manager section within the app itself, not in the cloud.
One day a play centre forgot their pin and were not able to reset it using the method I was giving them by resetting their local storage for the app. I was stuck as they became locked out and I didn’t know how to reset their pin either! I eventually recovered their pin and then decided that the play centre details should be stored on the cloud, which gave me more control but was also more secure as well, which I didn’t realize initially.
Speed of use.
I found when I got the app into a play centre to be used for the first time, that not surprisingly the play centres are busy places with lots going on, and people coming and going all the time. I had to make sure the form was fast to fill out, as there could be queues of people waiting to enter, and that the manager's table was quick and easy for the staff to search the records too for signing people in and out.
After watching parents signing in I started to remove fields that weren’t necessary such as the start date and time, which is something I changed to be auto-filled in once they opened the form page.
I frequently timed how long it would take to fill in the form and removed other things to reduce seconds.
The average time to fill out the form was 40 seconds.
Manager table cluttered with columns.
As I iterated with the app, the manager’s table started to become more cluttered with new columns that the parents could enter on the form. To allow for new fields that the play centres requested such as price per group, how many people were in on a day, and total revenue for that day, I created a 2nd tab on the table for those counts, to keep the table as lean as possible.
Original manager table design
New manager table design
New manager daily counts table
6. Project Outcome
By switching to signing in using the app, paper was saved but the real benefit was the records were more organised and a lot quicker to search through, this saved the playcentres a lot of time.
7. What I learned
I learned that it’s very important to observe how people actually operate in their normal environment. Only when you observe do you truly see who the real users/stakeholders are and what problems they face.
I bought myself a tablet to the test the app and get that bit closer to what it would actually be like to the use the app. I chose a cheap one, as I knew thats the type a play centre would buy. I knew there could be a huge difference in the experience between an iPad and a budget tablet!
Cheap tablet popular with playcentres, I purchased for testing
Tablet with the MyPali App.
The most critical people can be your best resource for learning.
In my local play centre, two young girls were managing the reception.
One of which I knew, the other I didn’t know. the one I knew told me the app was great, which was good to hear, but the one I didn’t know who was a bit more irreverent, and said it wasn’t going to work because it was too awkward and slow to fill out the form especially for parents distracted by kids hanging out of them, and that often grandparents would come in with poor eyesight.
This was good for me to hear as it was constructive and allowed me to improve the app rather than being told it’s great but in reality, it wasn’t being used.
Thinking ahead can pay off nicely.
By taking shortcuts and not doing things the right it will catch you out after time.
Putting in a good effort to try and think ahead of what might be needed or how the users Might use the app by taking a more holistic view of their entire experience can help avoid problems when users use it in unexpected ways!
One example of this, was in one play centre they had the same door for entry and exit so the tablet was placed there, another play centre had two separate places for entry and exit and each had a tablet. Amazingly though when a parent signed in on the entrance tablet, their sign-in automatically popped up on the manager screen on the exit tablet, the two were completely in sync.
This setup in a play centre was not something I Initially had thought of but was covered by the way I designed the app.
Good design is less.
The fewer features you have, the easier it is to use and the more focused it is on doing what’s genuinely needed. Also from a development point of view, the less code you write the less you have to manage, which saves time.
UX Designer, Full stack developer
My Startup: DapDap, an app to promote local events.
Frustrated on missing out on events I was interested in, as well as there was no app to show you what was going on in my hometown. I created DapDap to allow people to see what was going on locally and made it easy for anyone to post an event to the app for everyone to see!
1,000+
Users
500
Events
120
Event Promoters
