The Publishers - Sign up

www.thepublishers.com

The Publishers is building the 'professional network for journalists and bloggers'.

This is something I built from scratch. It's responsive, and a very large project. I led a team of designers and developers. I'm going to run you through one of the key parts of the project with the process that was used to optimise it from a UX / IA perspective.

PROBLEM

  • The platform was getting lots of people searching for profiles but sign ups were almost non-existent. 
  • There had been an internal KPI change to better reflect sign ups rather than searches.
  • Our forgot password system was temporarily broken. No one likes passwords, so we wanted to come up with a better solution.

GOALS

  • Get far better sign up conversions and find an improvement to password management.

PERSONA

Before going any further, it's worth taking note of the persona that was developed for this project. It helps us identify who we're building this for and what problems they're trying to solve. I didn't develop this persona for this particular task. I developed it earlier, however, I thought it was worth showcasing regardless.

 


COMPETITIVE ANALYSIS

I started with LinkedIn, as they have legendary growth and it's clearly relevant to what The Publishers is building. We ran a few people through the sign up process and recorded their experience.

Most generally thought the process was fairly seamless though people had a certain level of distrust and confusion when it came time to enter their email to identify friends already on the platform. This is how LinkedIn grows their platform and it was one of the mechanisms we were planning to use to grow as well. 

 

Next up was ResearchGate which is a professional network for academics. They buried their invitation system a lot more than LinkedIn. No one noticed it when we ran tests.

We noticed that on both platforms, they made it incredibly hard to enter the website without signing up. From their homepage, it was actually impossible. They had a brief introduction as to what their value proposition was and a clear CTA to sign up. 

We had links all over our homepage and a big search box to find profiles. Clearly this was wrong with our new KPI.

BEFORE

You can see in the screenshot below all of the links, search box and a pretty unclear, crappy value proposition.

 

AFTER

We got rid of the search box and improved / clarified the value proposition. We kept the featured profiles and categories, but took the links off to showcase the caliber of profiles the platforms have and the categories it focuses on. 

We felt the new value proposition was so much better, there was no longer the need for a 'How it works' button. We ran this by a few extra people and we were wrong. Most people wanted a learn more section before signing up. We didn't have time for it during this build, however, we now know we need to build that section to reflect the new propostion.

We also noticed that all of professional networks we checked made it very clear their platform was free to use. We thought we'd pick up on that as there is clearly a good reason they all use it.

The only way to enter the site was to join. 

To make up for the lack of links and problems with SEO crawling, we created an in-depth sitemap with a far better link structure.

 

SITEMAP

Now that we had a good idea of what similar platforms were doing and how we could improve things, we decided to do a sitemap to outline the core pages we thought we needed to improve the sign up process and forgot password. You'll notice that forgot password no longer exists in this sitemap. We found a way to get rid of passwords altogether by having users sign in with the email address only. We then send them an email with a link which signs them in. We managed to kill the need for a password : )

 

USER FLOWS

Next up was user flows to better outline how these pages would work together and also identify where things were going wrong.

 

HAND-DRAWN SKETCHES

After some internal testing on the sitemaps and user flows, we were confident to move ahead with hand-drawn sketches. This was an iterative process and at times frustrating as we felt we knew exactly what we wanted and needed to dive straight into wireframing. We did this step regardless and I'm thankful as there were a few mistakes we were able to quickly rectify.

WIREFRAMING

It was now time to start some wireframes and unfortunately I only have the higher-fidelity version of this as we felt we had done most of the iterative steps in the hand-drawn section.

All wireframes were designed mobile first and scaled up to desktop.

PROTOTYPING

After further testing on the wireframes, it was time to put them into Marvel for prototyping. Sketch was used for the high-fidelity wireframing so it integrated very well and made the process incredibly seamless.

RESULTS

The new sign up / sign in process is going incredibly well with user testing. They love the fact that they no longer need a password and have generally been pleasantly surprised by our new solution. One of our testers said 'Why isn't every website doing sign in like this?'.

It should be live on www.thepublishers.com in the next week.

Nissan

My brief was to improve existing user flows, identify where things were broken in the sitemap, develop a finance calculator and an online booking system that adheres to existing design and functionality restrictions.

PROBLEM

  • Existing user flows were very confusing and often broken
  • They needed to introduce new tools that adhered to new designs but old functionality

GAAP ANALYSIS - MAINTENANCE & REPAIRS

They wanted me to start off with a GAAP analysis to help the team identify where the problems were and where we needed to focus.

USER FLOWS - MAINTENANCE & REPAIRS

I started off by reviewing their existing user flows to see what pages could be removed, added or improved.

It became clear quite fast how much worse Nissan's user flows were than the competition's. This task was useful as it allowed us to steal some good ideas while allowing us to match or beat even the best competition.

SITEMAPS - MAINTENANCE & REPAIRS

It was now time to start with the sitemaps to see where pages could be improved, moved or removed. I did version 1 and 2 for them.

WIREFRAMES - MAINTENANCE & REPAIRS

It was time to start wire framing to show how they could make a few improvements. They wanted me to highlight in purple where I had made changes to the originals. I did about 60 of these pages but I won't show you all of them here.

FINANCE CALCULATOR

Next up was finance calculator for Nissan's new site. This including flows, proposed CTA's and wireframes (web & mobile). I recommending clicking on the image below to see it clearer.

ONLINE BOOKING

The final step was creating the flow and wireframes for a new online booking tool. Again, I was very restricted in regards to design and features based on their requirements. 

Le Bone Marché

Le Bon Marché is the world's first department store. Now the property of LVMH, it sells a wide range of high-end fashion and lifestyle goods.

PROBLEM

  • They needed to create a multi-brand department store that accurately represented their incredible in-store experience online.
  • Because of their close relationship with LVMH, they have an opportunity to showcase brands and products that aren't available anywhere else online.
  • Provide a high level of service that could also potentially integrate with their offline store.

GOALS

After analysing what the problems were, we had a clear outline as to what the user and business goals should be.

  • Showcase hero brands in a unique and incredibly engaging way.
  • Build a tiered service portal that could identify high value customers and provide them with superior service.

COMPETITIVE ANALYSIS - BRAND EXPERIENCES

It was now time to see who else was trying to achieve the same goals and how they went about it.

The first step was to see how other online department stores were showcasing brands throughout their platforms. Surprisingly, there was little and in some cases none at all. This was clearly an opportunity to innovate in this area and stand out among the competition.

OTHER INSPIRATION

It was clear the competition weren't doing much in regards to showcasing hero brands beyond basic SEO optimisation.

We decided to look at other industries to see how they showcase hero brands or profiles for inspiration.

Looking outside of the direct competitors, we were instantly more inspired and could clearly see how we could go about showcasing brands in innovative ways within our vertical.

SKETCHES AND WIREFRAMING

From here we could start sketching and iterating fast. We came up with a variety of solutions that included dedicated, content rich brand pages and also displaying how we could showcase certain brands throughout other parts of the site.

These were some of the initial ideas we had to showcase hero brands in unique and engaging ways. We had access to very high quality brand content, so we thought we should create pages that take advantage of that.

Unlike our direct competitors, the solution we put forward was very content heavy, visual, yet still incredibly user friendly. While we wanted to showcase beautiful content from hero brands, we made sure shoppers could quickly understand and access core shopping features.

SERVICE

It was important for the retailer to provide a service portal for their customers and potentially create a tiered system that identified and rewarded high value customers. 

We came up with the 'Club LBM' that did just that.

 

NATIVE MOBILE APP

It was now time to start on a native iPhone app for LBM. This required a separate brief.

PROBLEM

  • The brief was to create a native iPhone app with core features at a thumb's reach
  • A scalable app that can accommodate thousands of brands

GOALS

  • Core functionalities should be incredibly intuitive and functional with one thumb and the user's eyes closed
  • Make sure the framework accommodates for tens of thousands of products and thousands of brands

COMPETITIVE ANALYSIS - A THUMB'S REACH

I started by analysing native apps that try to solve the problem of creating core experiences at a thumb's reach.

 

I then wanted to provide examples of other apps with interesting features that aren't necessarily related to shopping.

 

Now that a thorough competitive analysis was in place with some additional examples of other innovative apps, I wanted to highlight some of the latest iPhone technologies that should be implemented.

 

NATIVE VS. MOBILE WEB

They wanted to know the advantages of both and the differences. I provided a short analysis around this.


WIREFRAMES

It was now time to start wire-framing. I wanted to show some examples based on the ideas from the analysis I did earlier. These wireframes were simple discussion pieces to help kick the process off.



TOOLS

I used Sketch to do the wireframing / annotations and Invision to do the prototyping.

Mercedes

My brief was to optimise existing user flows, design a new equity tool and improve the layout of the existing homepage in Mercedes Finance Me.

PROBLEM

  • Existing user flows were very confusing and often broken
  • They needed an equity tool to help convert existing customers into upgrades
  • They needed to improve the layout of existing pages

GOALS

The overall goal was to upgrade as many existing customer as possible while reducing inbound calls.

USER FLOWS

I started off by reviewing their existing user flows to see what pages could be removed, added or improved.

I did a visual version of the user flows for presentation purposes.

WIREFRAMES

I then started work on the equity tool wireframe. The aim of this tool was to make sure customers keep the condition of their car up-to-date to give an accurate estimate of their upgrade options.

 

 

LAYOUT IMPROVEMENTS

They wanted me to look at the existing Mercedes Finance Me pages to see where things could be improved. Please find the before and after below.

BEFORE

There was a complete waste of space in the body of the page. The links in the header who duplicates or irrelevant. Basically the whole page was a mess.

After

They mentioned that live chat was a feature they wanted to highlight so I put it in the top right of the header, next to call and email. Call and email were previously hidden behind the 'Help & Contact' page which in my opinion was a waste. I made better use of the space in the body with the main CTAs very clearly displayed.


The Publishers

www.thepublishers.com

The Publishers was created to become the 'professional network for journalists and bloggers'.

PROBLEM

There were professional networks for business people (LinkedIn), designers (Behance), developers (Github) and even scientists (ResearchGate). There wasn't a community and platform specific for journalists to connect with each other, share information and discover relevant jobs and content

GOALS

Journalist / blogger goals

After analysing what the problems were, we had a clear outline as to what the user and business goals should be.

  • Be discovered for relevant content
  • Be discovered for relevant jobs
  • Be part of a relevant community that makes their job easier and more enjoyable

Business goals

  • Make it incredibly easy to post jobs
  • Make the platform as engaging and sticky as possible for journalists and bloggers

COMPETITIVE ANALYSIS

It was now time to see who else was trying to achieve the same goals and how they went about it.

This was a mixture of interviewing publishers and brands to see how they went about things. I did this with a questionnaire and talking with them face-to-face.

VISION STATEMENT

I needed a vision statement I could always refer to when things got a little hairy. This statement was constantly used to keep me on track and motivated.

To be the central hub for the world’s publishing industry

This was an ambitious vision statement that was focused enough to keep me on track.

CONTENT STRATEGY

The content strategy was best developed by being very clear what The Publishers was not. It was not a news reader, it was not a consumer product. It needed to provide unique value to journalists and bloggers that kept them coming back every day.

CARD SORT

Once we had an idea of our content strategy, it was time for a card sort to see where things belonged. 

SITEMAP

The sitemap was crucial to keeping us organised and knowing what pages were required and what was missing.

HAND-DRAWN SKETCHES

I was hesitant to do hand-drawn sketches as I knew what I wanted and was eager to jump into computer drawn wireframes. 

I managed to resist the temptation and I’m thankful for it. I did more variations on the designs than I expected and was able to iterate much faster as a result.

WIREFRAMES

Once I learned a bunch of lessons from our hand-drawn sketches, it was time to draw them in Sketch and prototype in Marvel.

USER FLOWS

The most important one to outline for the developers was the add profile flow. Initially, I didn’t do a user flow for this. They got a few things wrong and it wasn’t until I did the flow that they were able to complete the project properly. 

I should’ve done this from the start.

PROTOTYPING & ANNOTATION

Marvel was used to finish the prototypes and the annotations were done in Sketch. 

Overall, the feedback from the developers was extremely positive and the development was fairly seamless.

RESULTS

The product is being rolled out slowly at the moment. I’m currently doing live user testing to iterate and improve further.

You can see it here www.thepublishers.com

NUJI - iPhone app

 

www.nuji.com

Nuji was one of the pioneers of social commerce back in 2010. Over the years, a lot was learned about how people shopped then and how they wanted to shop in the future. 

One of the biggest shifts during this period was the switch to mobile. More than 50% of Nuji's customers were mobile shoppers by 2014 and it was increasing weekly.

We dug a little further and found that 90% of our mobile customers were iPhone users.

We decided it was time to build a native iPhone app.

PROBLEM

To understand the problem better, we decided to do some deep diving in Google Analytics and interview some of our customers. 

Google Analytics told us that while we had plenty of mobile traffic, we had terrible conversions.

Our face-to-face interviews included watching people try to shop on Nuji with their mobile device. It told us how frustrated people were with the Nuji mobile experience.

We asked people what their core use case would be and it they wanted a seamless way to search for products on Nuji while they were shopping at a physical store.

We also discovered that people felt less secure buying on their mobile device and preferred to browse on mobile but transact on desktop. 

After analysing what the problems were, we had a clear outline as to what the user and business goals should be.

USER GOALS

  • The ability to search and compare prices while in store
  • The ability to browse on mobile and save for later to buy on desktop

BUSINESS GOALS

  • Provide a more pleasurable, frustration free experience for our mobile customers
  • Increase sales by making it easy for customers to browse on mobile and buy the same items later on desktop

COMPETITIVE ANALYSIS

Now that our goals were crystal clear, it was time to see who else had the same goals and how they went about achieving them. 

Because this was an app, the best destination was the app store reviews. It was a gold mine to see where our competition was going right and wrong.

From here we could create a matrix of the things we should build and avoid.

VISION STATEMENT

It was now time to solidify our vision statement and make sure the whole team was completely on-board with it. We needed something we could rally towards.

A department store in your pocket

This vision statement expressed how ambitious we were with this project. It was something the whole team could get excited about and understand very clearly.

It was to drive home the message that if you ever wanted to shop or compare prices while in a physical store, you've got another one in your pocket.

CARD SORT

Once we had an idea of our content strategy, it was time for a card sort to see where things belonged. We paid a few of our customers to come in and go through this with us. We asked them to place the cards where they thought they belonged and it became crystal clear that a few sections weren't even needed.

We also realised that some of the core features we had been trying to shove down people's throats were not just unnecessary but quite annoying for some people. This process was invaluable!

SITEMAP

It was now time for the sitemap. This was a crucial document that we also came back to, amended and used as a guide for core features and pages. 

Ideally we would've brought customers back in at this stage but were running very short on time. If I had the chance again, I would've made the time.

USER FLOWS

When we were happy with the sitemap, it was time for the user flows to double check everything and make sure we were optimising things as much as possible. 

HAND-DRAWN SKETCHES

From here we could experiment with some quick and not so pretty sketches. It was time to put some ideas down on paper and talk about them as a team.

This was a very iterative process of drawing, feedback and draw again until we were happy with the direction we were heading in.

WIREFRAMES

Once we had every single page hand-drawn, iterated and tested until we were blue in the face, it was time to start drawing the final versions in Axure. 

PROTOTYPING & ANNOTATION

We used Keynote to prototype the final project and do extensive testing. This prototype was crucial for the final development of the project. 

In addition to the prototyping, I provided a fully annotated document.

As a result, the development was extremely efficient and faster than any of us expected. 

RESULTS

The app has nearly all 5 star reviews.