UX Research, UX & UI Design
March 2018–March 2019 (first version of the new site)
When I was hired by ExpertPhotography, their existing website was quite dated and several core functions were executed with make do solutions (e.g. Membership Area for people who purchased company’s products had a completely different look to the rest of the site, products were sold trhough individual landing pages, etc). It was my responsibility to create a completely new version of the website.
I identified the key issues of the old website as the following:
- Dated visuals
- Messy information architecture
- Difficulty using and updating it for the team
- Suboptimal learning experience for people who purchased online courses with ExpertPhotography
- Lack of a general store page (each of the existing courses was sold through a separate landing page)
- Difficulties with reaching support
- The site had great free content, but browsing and searching through it was difficult
I needed to create the new website that would:
- Be simple
- Look & feel great
- Be easy to use & update by the team
- Provide a good structure
- Have a great learning experience
- Introduce the general store page with new product pages
- Have easy accesible support options
- Provide a great browsing experience
Stage 1. Discovery
Business Objective Analysis: Stakeholder Interview
My first step in the discovery process was talking to Josh, the CEO & founder of Expert Photography. I needed to know:
- What vision he had for the new website
- What problems of the old website he wanted to solve
- How did ExpertPhotography make money (revenue model)
- What user behaviours translated to profit (and needed enhancing)
During the course of several discussions I figured out the following:
- Site’s revenue model was based on content marketing: users subscribed to our email list through the blog with free content and later they received offers with our products
- The key behaviour we needed to enhance was users leaving their email (lead generation)
- Main ExpertPhotography products were eBooks, presets & online video courses on photography, but the existing site had no general store page where users could browse all existing products at once & purchase them
Which meant that with the new site I needed to address the following:
- Better integration of content marketing and sales
- Enhance lead generation
- Create a Store for all the products
Content inventory & Audit
The old site’s information architecture was incredibly messy, despite 90% of the site consisting of just blog posts.
I needed to create a simple content inventory which would outline all the types of pages & content on the site (not including the many articles, which were basically the same page type over and over again) to get a clearer understanding of what the site consisted of.
Some parts of the site weren’t even directly accessible by either menu or the footer, so I had to ask the team for help to make sure I didn’t miss anything. Browsing articles on the site was so difficult we had to create a visual guide for the users to show them how to do it.
After assembling the first content inventory during a whiteboard session we had a content audit and decided which parts of the navigation & content should go, and what new types of pages we wanted to add.
It was by no means a final information architecture, but it was something I could work with.
Stage 2. UX Research
Team expectations & Listening tour
My first step in the research phase was establishing the team’s expectations for the new website. They work with it on a daily basis, uploading and managing content, which makes them both our users and stakeholders at the same time.
Talking to our editor and our support manager proved to be invaluable. They showed me many issues people submitted to customer support which were caused by the old site not functioning properly. For example:
- New users needed to use the login & password that we sent them via after their first purchase, which wasn’t clearly explained. As a result users felt lost and didn’t know how to access their course. It was one of the most popular reasons why people contacted our support.
- Users kept buying the same digital product several times without realising that they already owned it, because there was no clear and comfortable way to access all of one’s purchases at once – making the support team having to issue quite a lot of refunds over this.
- Users also frequently made a typo when submitting their email at registration, and as a result didn’t receive a link to their product – and we had no means of contacting them. We needed to work on error prevention.
- It was difficult to find out the way to contact us: there was a “Write” section in the menu which lead to a “Write for us” page for photographers, but it was confusing for users who thought that it was a “Write to us” page and a means of contacting support. As a result our editor received a lot of support issues from the users instead of letters from new potential writers.
- There was no basket review which resulted in many accidental purchases (and many refunds issued).
- Membership area system status always showed a “Log Out” option – even if the user wasn’t logged in.
- There was no single page on the site where one could see all articles in the order of publishing.
- There was no way to browse categories on the site
- There was no way to track all of the articles written by same writer.
Talking to the team made me realise that there were enough clear issues that needed solving even before I got a chance to talk to the users. There was no point in accumulating even more issues by doing so at this point – that was something we would do once a new version of the site was out, so that we could keep constantly imrpoving it.
I still wanted to do a little user survey to create personas of our customers. I looked at some of our Google Analytics data, which revealed, for example, that our site’s visitors were predominantly US based.
I also reviewed a recent marketing survey of our customer base (people who not only read the free blog content, but also pay for courses) and saw that the majority of our customers were senior citizens (60+). That was something I wanted to confirm with th survey.
Generally, with this survey I wanted to understand:
- User perception of the existing site
- In what ways the site does and doesn not meet their needs at the moment
- What features and areas to prioritize and focus on
I sent out a simple survey via MonkeySurvey to a group of our customers, with 150 responding to it. Two biggest insights of the survey were:
- People preferred to contact us via email, and right now there was no clear contact information on the site
- 28% of the customers rated the “look and feel” of our site at 3/5 stars and 42% rated it at 4/5, with only 27% rating it at 5/5 stars. This confirmed my original suspicion that the existing site was extremely outdated visually and funcionally and was in dire need of refreshing.
Combigning the demographic information from our survey and my insights after talking to our support, as well as using data from the old marketing survey, I put together two personas of our users to help us discuss customer needs & help the content marketing team in their work as well.
Stage 3: UX Design
Information Architecture & Card Sorting
For the next stage I had a remote card sorting test with about 25 users to help me determine the final structure of the site.
This allowed me to see the clusters that made sense to our users.
The majority of users tended to sort things into the main 5 categories:
- Blog (50%)
- Shopping & Purchases (75%)
- Support & Customer service (42%)
- About Us & Contact (42%)
- Members Area (“corner”) & Account & My courses (67%)
I also learned more about the vocabulary our users were employing to describe parts of the site – something that I could later use when working on the site’s UX copy.
User Stories & Site Map
With the help of the team, I brainstormed the main User stories & sketched out the main User flows based on those user stories.
This helped me finally put together a more or less final site map.
Wireframes & First Prototype
I made some sketches of the main pages and sketched the key user flows to discuss with the team, but I saw that for many of the team members it was hard to understand the interface and see any issues with in the sketch form. They needed something closer to the final look, so I made the decision to create wireframes of the entire site & build the first prototype out of them.
This allowed us to test the site within the team for the first time. We tested extensively within the team and amongst family and friends, but even this small round of testing was enough to reveal certain issues with the site’s structure and figure out that layout of some pages didn’t work. After 3 or 4 rounds of testing and iteration I was ready for the next stage: UI design.
Stage 4: UI Design
With me as the only UX/UI person on the team and several outsorced developers we didn’t have enough resources for anything remotely close to a design system, but I still wanted to figure out the foundation of our site’s style early on so that building it would be easy for all of us. I used the brandbook which I’ve created for ExpertPhotgraphy earlier to establish a small visual style guide which both me and the developers could use.
After all the work I’ve done, working on the UI had been much easier. I pretty much only had to apply the styling to the wireframes and clean it up.
For internal reasons we could only do user testing when the site was mostly built, which is, of course, not ideal. But once we had the first functioning version of the site I had 4 moderated user testing sessions with our customers.
This round of user testing provided me with several important insights:
Search icon in the top right corner of the site went largely unnoticed, and instead people tried to use the “subscribe for a free video” form underneath the menu to search for articles.
Solution: This element was too confusing to work as a lead generator, and it would be a much better experience to turn it into a search bar instead.
We had close to 50 categories on the site, but users didn’t interact with the “Show All” element to see all of them and kept browsing the same top 10 categories.
Solution: I created a new way to browse categories, sorting them into groups.
I assumed that pressing the logo to go back to the Home page was easy for everyone to understand, but I was wrong: when asked to return to the Home page users were confused and it took them several moments to figure out how to do it.
Solution: We added a “Home” icon to the header menu.
The website was launched in March of 2019, but I keep constantly working on it and improving it.
For example, while going through some screen recordings of users browsing the site, I discovered that people who purchased physical products in our store (t-shirts or playing cards) and were automatically granted access to My Learning area as part of their registration were curious about it, but for them it was empty. So we put together a collection of free training videos that was accessible to anyone with an account on our site, even if they didn’t purchase any online courses.
Through many bugs and issues we saw that the original three-stages checkout form wasn’t working too well, so me and Josh came up with an easier-to-use one page checkout, which we implemented across the site.
Conclusion & What I learned
ExpertPhotography is my biggest project to date, and it’s also one that requires constant work. I didn’t finish the first version of the site and call it a day: I continued to redesign existing components, adding new functions, and testing new solutions.
This is my most productive experience of working in-house, on the same project day by day and looking for new ways to improve and optimise. I made important connections with many of our users through talking to them and testing different projects inside the general ExpertPhotography product, and that was the most inspiring and eye opening part of the whole experience.