INDUSTRY DESIGN PROJECT
wiseHer
Figma
INTRODUCTION
wiseHer is a technology platform that provides business owners and professionals the ability to find, schedule and connect with experts in order to get advice to accelerate their business or career growth.
PROJECT GOAL
UX/UI Designer
I worked as part of a team of 3 designers: Fathima, Taylor and myself. We were given 40 hours to work on this project (total of 120 hours distributed among 3 people). We had to select methods that were most appropriate and efficient in order to find a solution to complete the project within the constrained timeframe.
PROGRAMS USED
MY ROLE
wiseHer’s primary user base:
Women, Age 35-50 (also available for Men)
Small business owners / Career climbers
Identify usability issues with the current wiseHer website and redesign parts of the website to create a more intuitive user experience and increase conversion.
​
SOLUTION
Discover the problem space by performing a design audit of wiseHer’s website and an analysis of its competitors. Synthesize the findings and create user personas in order to generate user-centered solutions to the usability issues.
TARGET USER
DELIVERABLES
Design Audit
(Alyssa)
Identify the strengths and weaknesses of wiseHer’s website to improve upon any potential usability issues
Competitive Analysis
(Fathima)
Research values and shortcomings of competitors to integrate the strengths of their websites into our design
User Personas
(Taylor)
Conceptualize three user personas to identify the motivations, needs, and pain points of potential clients
Wireframes
(Alyssa, Fathima, Taylor)
Prepare wireframes that will serve as architectural framework for future iterations and final design
High Fidelity Mockups
(Alyssa, Fathima, Taylor)
Prepare high fidelity screens of our proposed redesign
DESIGN AUDIT
The first step of our collaboration with wiseHer was to take a closer look at their website in order to identify any areas of improvement. For the purposes of this project, I focused on the journey a user would take to find an expert and book a call. The Design Audit and our website redesign focuses on this particular red route.
Homepage: Website Navigation
The website’s top navigation needs to be redesigned. Both rows need to be consolidated into one. The redesigned top navigation should be the same on every page of the website.
​
The Find Your Expert button repeatedly appears on various pages of the website. It is clear and is easily noticeable. When clicked, it leads to a page where the user can browse and search for experts. The Expert Area - which seems like an area that would have information for the experts and perhaps an expert login page - also leads to the same page where the user can browse and search for experts. This is confusing and inconsistent. It is surprising to see that those two seemingly different headings lead to the exact same place. There is a clear usability issue because it clashes with the user’s expectations.
Homepage: Text Layout
There is a good balance of text and white space on the homepage and the overall website, but some areas that have copy are too overwhelming and cluttered. There needs to be a more organized and consistent approach to text layout to ensure a legible and visually cohesive result. The typographic alignment of this page is different from the rest of the website, where it is primarily centered. This section has an unusual alignment and is hard to read.
​
Additionally, there are some inconsistencies with the Find Your Expert button. It should always appear the same, throughout the website. Here, it suddenly appears as a hyperlink. Instead, it should appear exactly like everywhere else: “Ready to get started?” should be part of the text and “Find Your Expert” should be a button.
Expert Page: Search Filters
The search filters on the left-hand side of the Expert Page are a practical way of narrowing down the search results when browsing for an expert. Perhaps the “Categories” filter could be renamed to “Areas of Expertise” to highlight that these experts have specialized knowledge.
​
It’s useful to be able to search by Location and by Language. However, the languages are currently organised in a seemingly random fashion. They should appear in alphabetical order (like the categories and locations). For more specific expert searches, users could input keywords in the search text field.
Expert Page: Short Profile
The expert’s short profile needs to be more structured, more standardized. It currently lacks consistency. Some headlines are only one word; others, are 3 lines long. Some headlines have a professional style; others, are more casual. The user shouldn’t be reading a very long headline trying to decipher information in order to compare experts to one another. This makes the expert search quite complex.
​
The areas of expertise and years of experience need to be clearly presented. This information needs to be included in the expert’s short profile to allow users to easily scroll through the Expert Page and decide which expert to contact for a call. To ensure that clients book expert calls, we need to remove any hesitation from the expert selection process. It has to be straightforward and smooth.
Request a call: Pick a time slot
WiseHer makes it very easy to request a call with an expert. Once the user selects the expert and requests a call, an overlay window appears with a timeline at the top. The call request process is separated into 3 steps: pick a time slot, scheduling info and payment. The user can therefore easily visualize the process and knows exactly where they are and what to expect. All the necessary information appears on the screen to pick a time: time zone, duration of call, calendar and available time slots.
​
It would be useful to add the expert’s name and profile photo to this overlay window for the user to be able to see who the call is being booked with.
Request a call: Payment
It’s a very good idea to reiterate the fee structure at this stage and to offer users the option to either pay for a single call or to get the subscription to save money on calls.
​
The country code for the cell phone should list the country’s name as well as the flag. Having only the flag makes it harder to navigate the list alphabetically and to find the right country.
​
Accepted payment methods should be added to the payment section.
Pricing: Alignment and Design
There is an alignment issue with the three monthly subscription options. They are currently vertically centered, which is visually problematic because they appear misaligned. They need to be properly aligned at the top. The prices all need to be on the same line.
​
The order should also be changed. They fees should be organised from least to most expensive from left to right: $129, $149 and $199. Perhaps the $99 single call option should also be moved to a vertical rectangle and placed near the subscription fees in the following order: $99, $129, $149 and $199. By visually reducing the gap between the single call and subscription options, more users might decide to go for a subscription.
​
The payment plan descriptions are confusing and inconsistent. When presented in this way, it's difficult to see the distinctions between each option. It would be best to display the benefits of each fee in the following manner:
Grow: Everything in Go + x
Thrive: Everything in Grow + y
Sign-Up and Login
It is unnecessary to have two distinct pages for the Sign-Up and Login process. This can easily be consolidated into one window that would offer both options.They can simply be overlay windows like the Request A Call window.
​
There is an inconsistency in the terminology used to describe the Sign-Up Page. On the wiseHer homepage, it is named “Sign Up”, but the page itself is named “Register”. In other instances, the word “Join” is used. It is important to decide which term to use for the overall website and only use that one word in all instances.
​
Additionally, on the Sign-Up Page it says “Register” and “Or Login”. On the Login page it says “Login” and “Or Register”. The word “or” should be removed.
Mobile Web Experience
The website is not mobile-friendly. With so many users accessing the web from their mobile devices, a responsive website is an absolute priority. Here are a few examples to show some of the formatting problems and glitches that were observed when accessing the website from a mobile device (iPhone). This needs to be resolved to provide a good user experience to wiseHer’s existing and potential clients.
DESIGN AUDIT: NEXT STEPS
With the Design Audit, I was able to uncover strengths and flaws in the design of the current wiseHer website. The usability concerns identified in this document were used as a starting point for finding ways to redesign particular portions of the website and provide a more intuitive user experience, hopefully resulting in an increase in the number of clients and scheduled calls.
We suggested to rework elements from the following areas of the website:
-
Homepage
-
Top Navigation
-
Expert Page (with short profiles and full profiles)
-
Sign-Up Page
-
Login Page
-
Request a Call Window
-
How It Works (Fee Structure)
COMPETITIVE ANALYSIS
The Competitive Analysis was completed by Fathima, who looked at wiseHer in comparison to some of its competitors:
​
MicoMentor
Coachspace
Guidely
Prox
USER PERSONAS
The User Personas were created by Taylor. She created three personas for wiseHer:
​
Theresa: Software Developer, Age 36
Mira: Founder of financial services startup, Age 51
Sean, Founder of dog-walking business, Age 35
LOW FIDELITY DESIGN: WIREFRAMES
We used the findings from our Design Audit and Competitive Analysis and the characteristics of our User Personas to create low fidelity Wireframes of our proposed wiseHer redesign.
​
Taking advantage of Figma’s collaborative nature, we brainstormed together to design a wireframe for the Homepage. I then took over and designed wireframes for the other screens using the format we had agreed upon for the Homepage.
​
HIGH FIDELITY DESIGN: MOCKUPS
Using the structure of the Wireframes, we started designing the High Fidelity Mockups. As a first step, we focused on the high fidelity design of the Homepage. This gave us the opportunity to try different colors and fonts and to see what works and what doesn’t. We were aiming for a clean and sophisticated look, as requested by our stakeholder. We put together a small Style Guide with a color palette and typeface and started designing the other screens following the format and UI that we agreed upon with the Homepage.
Color palette
#FFFFFF
#E8F6FF
#BDD5EA
#1792DF
#0067A8
#577399
#404041
#F56A20
Typography
Aa
Open Sans Regular
Aa
Open Sans Bold
To maximize our time, we worked on the designs simultaneously. Before submitting our final designs, I double-checked all the layers for consistency:
Pricing page & Request a Call window overlays
(Alyssa)
Homepage & Experts pages
(Fathima)
About Us & Login/Register window overlays
(Taylor)
Here is a selection of Wireframes and corresponding High Fidelity Mockups for the Pricing page and the Request A Call Overlay window.
Pricing
I redesigned the fee structure to ensure that the prices are properly aligned and visually clear. The subscription fees are now organised from least to most expensive and the descriptions are clear and consistent. The distinctions between each option are displayed in the following manner:
Grow: Everything in Go + x
Thrive: Everything in Grow + y
Request a Call: Pick a Time Slot
I kept the initial structure of the Request a Call overlay window. I made some small changes to the layout to ensure consistency between each of the 3 steps of the booking process.
​
I added the expert’s profile photo, name and area of expertise. This will reappear in each step of the Request a Call process for the user to be able to see who the call is being booked with.
Request a Call: Scheduling Info
This is the second step of the call booking process. To keep visual continuity with the previous step, I kept the same format. Like the previous screen, this one also includes the expert’s profile photo, name and area of expertise. It also includes the chosen date and time for the call. In addition, I added the ability to submit attachments, which was missing from the original website.
Request a Call: Payment
This third step of the booking process gives the user an option to select different payment options before proceeding with the call booking. I kept this section as it was in the original website, I simply updated the payment options based on the most recent fee structure provided by wiseHer. I also added accepted payment methods to manage the user’s expectations and to avoid any surprises during the payment process.
This collaboration with wiseHer has been a very valuable experience. With my other design projects, I was responsible for all aspects of the UX/UI Design process. With this project, I got to experience a different perspective by working as part of a team and sharing responsibilities. This was a great way to simulate the type of work environment that exists in large design teams, where several designers often work simultaneously on the same project by following a style guide and the company’s established guidelines.
CONCLUSION
Due to time constraints, we were unable to complete a redesign of wiseHer’s complete website and chose to focus solely on the main red route: finding an expert and booking a call. If we could have more time to work on this project, we would:
-
Explore other red routes and edge cases
-
Complete user testing to identify any usability issues
-
Review the website’s analytics to check if there is an increase in conversion as a result of our redesign
-
Work to make our website redesign mobile-friendly
-
Design the wiseHer app