Work
Desktop web design for an online forum for prospective liberal arts students
Desktop web design for a speechwriting service
App design for a local day spa
Mobile web design for a medical clinic for homeless patients
Liberally Yours
Student run startup that gives prospective liberal arts college students an online platform to learn more about potential schools.
The Goal
Create UX mockups for the client’s new (and first) website.
The Team
Bridge Strategy consultants Claire Yang and Audrey Mock. Under the supervision of project manager Kathryn Cross.
UX Best Practices
We began by reviewing websites with similar goals and identified three key sites: Niche, Naviance, and College Confidential. We performed an analysis of key features on all three sites, as well as features that set the three sites apart from their less successful counterparts. We narrowed down the results of our review to the following:
-
Ability to filter searches based on specific criteria
-
Highly customizable search function to allow students to find schools based on criteria pertaining to prospective students' academic, social, and personal interests.
-
-
Data-based recommendations
-
Provide users with school recommendations based on the schools that users with similar interests have viewed and/or to which they have applied.
-
-
Opportunities to talk with current students
-
Allow users to receive direct advice from current students about their respective universities.
-
User Research
To best understand the client's ideal user, we conducted interviews with prospective college students (at our respective high schools) with a particular interest in liberal arts
schools. We also interviewed first-year students at Wellesley College, who recently went through the college application process.. Our interviews centered around the question, "as a prospective college student, what do/did you hope to learn from a college blog/forum?" Common answers included the following:
-
What does x school look for in an applicant?
-
How does x school compare to y school?
-
What scholarships are available for x school, and how do I apply for them?
-
Where does x school's student body fall on the competitive vs. collaborative and "work hard" vs "play hard" spectrums?
The Design
Click on each image for a full view, as well as a description of UX design choices.
Word of Mouth
Speechwriting service for nonprofit leaders, political candidates, and business executives.
The Goal
Create UX mockups for the client’s new (and first) website, based on two of the client’s favorite websites.
The client had two additional requests for the UX Design: integration of the color purple as a symbol of royalty, and a "and sexy feel."
The Team
Bridge Strategy consultants Shirley Tan and Audrey Mock. Under the supervision of project managers Shirley Lei and Alice Pan.
UX Best Practices
Rather than perform our own best practices and user research, the client requested that we draw inspiration from two specific websites:
-
Refer to Fenway Strategies' website for "look and feel."
-
Refer to West Wing Writers' website for "distinction of services."
We narrowed down three main characteristics of Fenway Strategies' "look and feel":
-
Low exposure photos with color overlays; the color used for overlays also appears as "pops" of color throughout the website.
-
Highlighted, bolded, circled, or otherwise visually spotlighted spotlighted text to call attention to ideas they want to emphasize.
-
A sleek and modern aesthetic created by sans serif fonts, ample blank space, and clean straight lines.
We then selected two key features of West Wing Writers' "distinction of services:"
-
Three defined aspects of the speechwriting process (West Wing Writers use "develop ideas,""express ideas," and "amplify ideas").
-
Detailed explanations of each step of their process, listed in chronological order.
The Design
Click on each image for a full view, as well as a description of UX design choices.
Mai Thai Spa
Massage and skincare spa located in Wellesley, MA.
The Goal
This was a passion project that I embarked on to further my UX skills (and for fun!). I had two goals in mind:
-
Practice mobile app design
-
Expand my knowledge by performing research on an industry with which I had little experience.
Getting Started
Approaching this project was different for me, as most of my previous work had taken place both within small teams and in direct collaboration with the client. Without any direction from a client or project manager, I I chose to begin by identifying issues with the current website via user testing.
User Research
According to the American Med Spa Association, the average American spa client is a woman between 35 and 54 years old. While I did draw my own observations about the website's current state, I decided to consult six women who fall in this target age range. I asked them to consider the following questions as they explored the website:
-
How easy is it to navigate the website? Are any features more or less difficult to use than others?
-
More specifically, how easy is it to book appointments?
-
-
Do you like the aesthetics of the website? Does it appear outdated, cohesive, welcoming, unique?
-
Are any sections too text heavy?
-
Does this website leave you with a positive, negative, or neutral impression of the company?
-
Do you have other comments about this website?
Common answers from the test group included the following:
-
The booking process is unclear and difficult to use.
-
Users cannot book directly from the page they are currently on; they must navigate to a separate booking page where it is hard to find specific treatments.
-
The "book now" button does not stand out/is not obvious to the user.
-
-
There are some inconsistencies with fonts and font sizes.
-
Very wide margins create excess white space and an "unfinished" appearance.
-
The muted green and brown color scheme creates a relaxing, natural aesthetic.
-
The home page feels visually cluttered with a variety of colors, backgrounds, images, etc.
-
Detailed descriptions of each treatment are quite useful to the user.
From this data, I narrowed down two main goals for changes:
-
Facilitate the user booking process.
-
Create a more cohesive aesthetic.
-
Minimize visual noise/clutter while avoiding excessive blank space.
-
Standardize fonts and font sizes.
-
The Design
Click on each image for a full view, as well as a description of UX design choices.
Boston Healthcare for the Homeless Program
Medical clinic providing health services for homeless patients in Boston, MA.
The Goal
This was another passion project. I had previously provided UX recommendations for a mental health clinic through my work with Bridge Strategy; however, that client did not request actual UX mockups. I was fascinated by the UX research I did for the clinic and wanted to apply that experience to another healthcare UX design project.
While past projects of mine had focused on desktop web design and mobile app design, I had not previously focused on mobile website UX design. Therefore, I chose to use that format for this project as an opportunity to expand my UX design skills.
Best Practices: Healthcare
I reviewed the websites for several similar clinics in major cities across the United States, as well as websites addressing healthcare UX, to determine best practices. I determined the following design guidelines:
-
Opt for one of the two common approaches to describing conditions:
-
Fact-based address: best for patients who have a preexisting diagnosis.
-
"Tuberculosis is characterized by x, y and z."
-
-
Direct address: best for patients who have not yet received a diagnosis.
-
"Are you or a loved one experiencing x, y or z?"
-
-
-
Break up text to enhance readability.
-
Implement photographic tours to "invite viewers in."
-
Provide clear contact information.
-
Emphasize key statistics (number of patients treated, how many patients suffer from x condition, etc.).
-
Use positive language (especially in the mission statement) .
-
Instill sense of hope and control in prospective patients.
-
Instead of "patients who are unable to find relief of their tuberculosis symptoms”, say “patients seeking to address their tuberculosis symptoms.”
-
-
Current Website vs. Healthcare Best Practices
Based on these best practice guidelines, I performed an analysis on the current website to determine what met the standards, and what could be improved upon.
Best practices in place
-
Positive language in mission statement
-
Use of significant statistics
-
Clearly presented contact information
Best practices to implement
-
Shorter paragraphs to minimize text-heaviness
-
Photographic tours of clinics
*Because Boston Healthcare for the Homeless Program focuses more on providing patients with resources than identifying ailments, I considered the approaches towards describing conditions irrelevant.
Best Practices: Charities
Boston Healthcare for the Homeless Program heavily relies on donations. Therefore, I decided to research UX best practices for encouraging user donations. After consulting several online case studies, I narrowed down four golden rules to increase user donations:
-
Demonstrate the impact of donations.
-
Example: "A $50 donation can feed eight children dinner."
-
-
Make the donation process easy and simple.
-
The donation button should be easy to find, and the process should require as few steps as possible.
-
-
Encourage desired donations with pre-selected amounts, while still allowing users to donate a different amount of their choosing.
-
Eliminate distractions on the donations page to keep users focused on donating.
Current Website vs. Donation Best Practices
Based on these best practice guidelines, I performed an analysis on the current website to determine what met the standards, and what could be improved upon.
Best practices in place
-
Impact of donations is clearly represented
-
Easy-to-find donation button
-
Pre-selected donation amounts
-
Simple, one-page donation process
Best practices to implement
-
Minimize distractions on donation page