MY ROLE
UX Lead & Designer.
THE PROJECT
Responsive re-design in ten days.
THE RESULT
Live website for Regis Corporation, regiscorp.com.
Background
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:
“We know our website needs an update, but we’re not exactly sure what to do. We have a small budget for this project, and a short time-frame.
Can you help?”
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.
My Role
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.
Scoping
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.
Kickoff
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.
Ticker.
Page Navigation.
User Research
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.
Principles
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.
In every project, I always like to come up with a set of key experience principles. Why are we doing this? What is the point of view for our design? How do we know we're in the right direction?
Personas
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.
Site Maps
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.
The original website was oriented around historical conventions.
I proposed a new information architecture structured around the primary personas.
Initial Design
Combining insights from the user research, personas, and site maps, I sketched some concepts to address our primary concerns.
At the top of the page, I used a simple persona-based header menu to replace the existing navigation, and large tappable cards to create interesting launching points throughout the design that could easily adapt to a mobile layout.
At the bottom of the page, I replaced the existing brand ticker with a footer of the main salon brands, with a link to details about all 32 brands.
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
The site map footer was replaced with a “megamenu” at the top of the page, to help provide quick access to the most-needed tools of the site.
The page footer was simplified to just include brand images and essential legal information.
Sub-pages, like the Investor landing page, used a card methodology to progressively disclose information.
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.
Every page of the site was re-designed.
Epilogue
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.
The new RegisCorp.com.