See Me Speak : A responsive website redesign
Overview
See Me Speak
Responsive website redesign
My Role: UX Researcher, UX/UI Designer
Background
See Me Speak is a start up business run by an instructor in training who hopes to build her business and bring ‘spelling to communicate’ to her community. Spelling to Communicate is used as an alternative means of communication (AAC) for individuals with Autism and other motor challenges. All forms of communication require motor skills. This method takes the fine motor out of speech and brings it to gross motor by teaching purposeful motor skills necessary to point to letters to spell. As motor skills improve through consistent practice, students progress from pointing to letters on letter boards to spell to typing on a keyboard. Communication moves from concrete to abstract as motor skills progress. As a new business, the client wants to have a fully responsive website to introduce potential students and their families to the methods of S2C. The client would love to focus on flows including learning more about the methods, contacting the team, signing up for their newsletter, and guiding users to their other social platforms.
Empathize
Research Interviews
Questions
Some questions I asked included: What was your reason for visiting the See Me Speak website? What device do you usually access the site from? What information is important for you when navigating through this website?
Insights
I spoke with 3 participants who all touched upon the importance of information about the business, trust being built and adaptability.
Competitive Analysis
Key Insights
This competitive analysis helped me get a better understanding for what other Spell to Communicate organizations that were more established did with their websites and how they went about solving the same problems. This allowed me to see where we could improve See Me Speak and decide what areas we can focus on in order to stand out.
Define
Problem Statement
How might we design a user experience that builds trust and encourages the user to get in touch with the founders?
User Persona
Why
After conducting the initial research, I synthesized the findings and put together a user persona for See Me Speak. Key insights included users wanting a site that they can trust since the therapy would typically be for their children or loved ones.
Meet Cassandra!
User Journey
Image of my persona, Cassandra's journey through the existing website. Here I go through the initial navigation and what opportunities we have for growth in the new design.
Why
I wanted to map out a typical journey of someone who may land on the See Me Speak website in order to get an understanding of what improvements I can make to allow both the user and the business to benefit.
Ideate
Insights
To Include
With a new outlook on the needs and wants of the users, key insights that I wanted to focus on with the allotted time were information, trust & adaptability
Existing Layout
Image of website's existing screens.
Key Issues
The biggest issue was that the existing site was not responsive between different breakpoints. In addition to this, users reported their reason for visiting the site is to learn more information about the practice in order to help a loved one. If the site they go to visit looks unprofessional or does not feel trustworthy, they are more likely to leave the site and look elsewhere.
Low fidelity Wireframes
Version 1
I digitized my wireframes in order to get some feedback. My biggest concern was with the “Our Story” Page. Becuase the See Me Speak brand is new, the founders had a lot of information to display. I wanted to convey their original message without it being too wordy for the users who land on their site.
Digitized low fidelity screens
Version 2
With the help of my peers, I iterated upon the skeleton of the “Our Story” page. I decided to design cards for the team members, each one giving a brief description. Once clicked into, users are able to read the full story of each team member.This solution allowed me to save space on the individual pages in order to avoid overwhelming users.
Design
Mood Board
Goals
Describe what Spelling to Communicate (S2C) is Express and educate why S2C is beneficial Attract clients Schedule and book clients Inform clients of who we are as practitioners and what we do Highlight/showcase Caleb and Noah's story as the reason behind See Me Speak
Brand Values
Empowering Inclusive Presuming competence The future of treating Autism and other complex motor issues Redefining Autism Motivated Universal approach Community driven Supportive
Color Palette
Final Brand Colors
After some discussion about brand values and some collaboration with the See Me Speak Founder, we came to a final decision on the color palette. It was important to find colors that felt trustworthy and inviting.
Typography
Image of the fonts used in the redesign. Headings with Lora and body text with Nunito.
Why
Because See Me Speak is a new business that aims to teach a new method, their website has quite a bit of information. I wanted to choose fonts that would allow for the reader to easily digest the information.
High Fidelity Screens
Carousel of final designs: landing page and our mission page.
Carousel of final designs:
Carousel of final designs:
Prototype
Test
Usability Testing
Task
I gathered 5 participants to test using Maze.co and gave them the task to navigate to . thee about/ “Our Mission” page to learn more about S2C and then navigate to the contact page to reach out and learn more.
Results
100% of users followed the eexpcted paths to complete the task
Misclick Rate
23.6% of clicks were misclicks. After synthesizing this data I found that this was due to having a contact form on all pages. Due to the constraints of the prototype, this was technically incorrect but in a real world setting, the user clicking on the bottom contact form would be a correct path.
Findings
With the given time constraints and overall results, no further usability iterations were needed. In follow-up questions, users also reported that the task was simple to navigate and the overall visuals were clean & professional.
Conclusion
Next Steps
Features
Add in additional resources - include links to other blog posts to allow users to read more into the effectiveness of the therapy. Implementing a booking feature rather than just a contact page where users can book appointments online.
Challenges
The client was aware that I was doing this redesign as part of a UX Academy capstone project. She was very happy with the designs and eager to add even more features. I let her know that at this time those were out of my scope given my time constraints, however, I was happy to work on any new features slowly if she had flexible deadlines. The next step is to hand my design off to a developer of the client’s choosing.