SpectroSam Website Redesign

macbook-pro-mockup-scene_2x (3).png

Timeline

September - December 2021

Role

UX design, UX writing

Team

Pratyusha Karnati (Project Lead)

Yian (Nicole) Zhao (Design Lead)

Yifei (Effie) Wang (Designer)

Hussain Miyaziwala (Development Lead)

Samuel Stentz (Developer)

Nitya Tarakad (Developer)

Abhinav Tirath (Developer)

Tools

Figma, Illustrator

The Challenge

How can SpectroSam attract more customers and clearly convey the essence of the SpectroSam's gamified speech therapy?

The Solution

A new version of SpectroSam's official website where customers can get information about the company and its product.

📄 Overview

I worked as a UX designer with SpectroSam, a start-up whose mission is to help children with hearing loss or speech delays improve their articulation skills and enter mainstream education as soon as possible. I worked alongside with two other UX designers, four developers, and one project lead. For this semester, my primary task was to lead the redesign of the official website of SpectroSam.

 

Why Redesign?

 

SpectroSam wanted a redesign because the original design of the website did not fit the current branding of the project. The aim of the redesign is to convey updated information of the project in a clear and concise manner and to enhance the brand image.

To begin the process, I analyzed the original website and summarized some of the key pain points:

  • Some of the main features / best selling points of the product were not mentioned on the home page, but were in the FAQs.

  • Current features mentioned on the home page are vague; it is difficult to know how SpectroSam is unique compared to its competitors.

  • The process of reaching out or contacting team members is overly complex.

🧐 Problem

Screen Shot 2021-12-18 at 1.02.09 PM.png

Image: SpectroSam original website analysis

Website Objective

 

After analyzing the original website and communicating with the project lead, it is clear that the objectives of the website include:

SpectroSam Portfolio.jpg

And the key features that should be emphasized on the website include:

key features miro notes.jpg

🔍 Research

User Persona

 

To begin, I created user personas based on previous research and documents done by the company. The target audience of the website include speech-language pathologists, parents, and school administrators.

SLP.png
Parent.png
School Admin.png

Journey Mapping

 

To better understand the user needs, I created a journey map for one of our personas, a speech-language pathologist. By going through this process, I was able to come up with four different opportunities that could be applied to the website as shown in the image below.

SLP Journey Map (2).png

🖥 Prototype

User Flow Diagram

 

In order to ensure that the website has a logical flow, I created a user flow diagram of the website.

SpectroSam User Flow (2).jpg

Style Guide

Style Guide (6).png

Final Prototype

Home Page

Home-3- (1).png

Who We Are

Who we are -3 (1).png
Request a demo-3 (2).png
VocoPortal-3 (1).png

💭 Reflection

It has been a fun semester working with such a group of talented people! I’m thankful for the advice I received from other designers on the team for the website redesign from the weekly design meetings. The weekly team meetings where everyone was present was also valuable for me as I was able to see what other team members had been working on, and I was also able to receive valuable feedback about the design from the developers and project lead. The next step for the website would be logo design, as the company has just decided to change its name to Voco. Looking forward to working with the team next semester as well!

Screen Shot 2022-02-22 at 12.30.31 PM.png

.