UX Lead & Designer.
Responsive re-design in ten days.
Live website for Regis Corporation.
Regis Corporation is the largest operator of hair salons in the world, with over 10,000 salons across dozens of brands. While the individual brand websites are customer-facing pages used for salon information and bookings, Regis' corporate website is for investors, job seekers, and potential franchisees.
In July of 2018, Regis Corporation came to Deloitte Digital with my favorite kind of problem:
Here’s what the website looked liked, before the project began.
The website had not been updated in some time, and had plenty of room for improvement. However, what we do know in our experience as designers is that most designs begin with the best of intentions, and it would be important not to lose any benefits of the original site design. Furthermore, with a compressed timeframe, we would need to create a solution that would fit the client’s time and budget, and be feasible for our developers to quickly implement as well.
I was tasked with leading the User Experience for this project. I was the sole UX designer on this project, responsible for scoping, designing and delivering UX assets to our visual designer in 10 working days. There was no other budget or extra time in the schedule for user research.
One of the wonderful things about working at Deloitte Digital is complete autonomy as a designer: I was responsible for deciding on how to get my work done in the allotted time frame.
With just ten working days available for UX design, here's how I structured my time:
The morning of Day 0 was when I was assigned the project, knowing that it would begin the next day. On that day, I completed my plan for the work, and began some background research into the company. I also used that time to set up my design tools.
For a responsive website project -- especially one that involves multiple reviews and a tight timeline -- I can't think of a UX design tool I love more than Axure RP. I knew Axure would allow me to quickly create a website with multiple breakpoints, with unique preview URLs for easy client review. In my experience, having one place to go for the most up-to-date design is terrific.
Along with Axure, I used Sketch minimally to create personas, and PowerPoint just to guide conversations in client reviews.
And finally, since our client was based remotely, so all of our work was conducted over Skype.
Some Thoughts on Axure
I don't think Axure is the best UX tool to use in every situation. It can be a difficult choice for displaying complex animation, and the tool itself lacks the delightful, beautiful simplicity of Sketch (although I look forward to trying the more modern Axure 9.)
Given the short project duration, the kickoff meeting was a quarter of my real-time interaction with our client. So, we used this time wisely to make sure we were all on the same page, by confirming questions like:
Who are we designing for?
What problems are we trying to solve?
What was tried in the past?
Who will be signing-off on the work?
What is success?
We agreed to a primary UX deliverable of three wireframes: one for the homepage, and two templates to guide development of the sub-pages. These pages would include careful consideration of the ticker, and the website’s navigation.
With any project, I believe it crucial to get a strong understanding of the user and the problem to solve. Given the short timeline and lack of time and budget for dedicated user research, I knew we would use a 'guerilla' approach.
Given that the project's main persona was financial investors, and Deloitte has a huge financial practice, I looked for financial experts within the firm. After confirming with the client that our primary persona was individual investors, I interviewed an investment expert at Deloitte, conducting a semi-structured interview to collect their thoughts, along with gathering feedback on the client's current website and my preliminary sketches.
Keeping in mind the project's scope, problem, primary user, technology, and timeline, I defined three design principles for regiscorp.com. These were placed right in the Axure prototype.
Based on conversations with client, I came up with one primary persona, and two secondary personas. Like the UX principles, these were placed right into the Axure prototype as quick reference cards, to be quickly accessed throughout the project.
A key component of success was simplifying the site design, which entailed simplifying its information architecture. I reasoned that the site could be rearchitected by the primary task flows of the primary personas, and articulated this reasoning with a site map of the current design and of my proposal.
Combining insights from the user research, personas, and site maps, I sketched some concepts to address our primary concerns.
This design "checked all the boxes" of the design problem. It modernized the site design, while retaining all of its information and not drastically altering the navigation.
After design reviews, internal discussions, reflection, and iteration, a number of areas for improvement were identified, such as replacing the large footer with a comprehensive navigation, and removing unnecessary guides like "looking for a salon?". But the largest change was adopting a concept of "preview cards" -- along with using a grid and card-based layout, the concept was for each card to show a snapshot of information about the page it referred to. This progressive discourse allowed for much faster navigation through the system.
Final UX Design
Above & Beyond
Our initial proposition was to create one home page wireframe, and a wireframe for a representative sub-page. By creating a simple system and getting timely consensus from the team, I was able to go beyond the original ask by creating a new wireframe for every page of the website. As a team, this allowed us to create more treatments in the visual design stage, and a more refined developed product.
Visual design and development
The nature of our projects in consulting is as soon as you're done with one project, you're off to the next. This was the case on Regis -- I finished one, and started another.
As I wrapped the project, worked closely with our visual designer to see how it turned into visual designs. And then to see the final product.
While on my next project, was delighted to see the beautiful visuals that were put together, and how the wires informed them well.
The client was extremely happy with the final result, and the developers did an excellent job making the designs come alive. At the time of this writing, the final site is exactly as we designed it, with a clear line from initial concepts to final product.