Speakout

Web Design

Problem

The landing page doesn’t adequately serve needs of the stakeholders. Registration isn’t properly tracked online and users find it hard to remember tuition dates.

Solution

We re-designed the landing page, steamlined the registration for students and simplified tuition payment.

My Contributions

During the research phase I assisted in conducting research on the targeted audience. The information structure of the website was poorly designed and displayed a lot of repetition throughout the site. One of the key components to good UX is good information structure, I gathered all the information on the site and structured a sitemap. All the information was filtered through key words that were correlative, I also used card sorting for more efficient results. In addition, I designed the landing page for mobile and desktop. I synthesized the feedback from user testing to create multiple iterations of the landing page design.

Establishing who our users are

Before making any decisions we established who are the users we are designing for. We created our personas from the information we gathered from the stakeholder. We generated two personas, a parent and a child. These personas will help the team keep in mind who we are designing for.

Creating the style guide

One of our first observations within this project was the lack of a style guide. Speakout already had a logo which we weren't allowed to make any changes to. We used the colors from the logo to establish a consistent style guide. We decided to poppins for this project due to the versatility of the fort and the ablity to combine it with another font if needed.

Restructuring the site map

The original site map consisted of many pages with repetitive information the could be consolidated into lesser pages for a better user experience. I restructured the site map with with the all of the information gathered and sorted into a more efficient sitemap.

Using card sorting to organize the site information

With all the information gathered onto one board I was able to effeciently gather all the information within the site and filter them to appropriate pages for optimal navigation within the re-design of the site.

Lo - Fi Wireframes

We designed wireframes with all the necessary components for a successful landing page. The wireframes provided direction for the high fi composites and what the final design would possibly look like. The wireframes provided the basic functionality of the page rather the visual detailed aspects of the product.

The previous design

The landing page re-design v1

I created this landing page based off of the some sketches and wire-frames I made during the design phase. I drew inspiration from examples I gathered online. Although at the time I believed the design served the needs of the stakeholder I believe that my attempt at re-designing the landing page did not meet my personal expectations of what I intended. The new design was presented to the stakeholder and was met with gratitude but the stakeholder thought it was best to go in another direction with the product.

The landing page re-design v2

After the first presentation I decided to revisit the product to find areas where I could improve on the design. I recreated wire-frames, analyzed other platforms with the similar goals, re-iterated on designs, established a theme and voice for the re design. I decided to let the design breathe more by utilizing white space, establishing a spacing scale, reduced the amount of colors used on the page and changing the font. The design below was not presented to the stakeholder due to their decision to go with another design.

Final thoughts and takeaways

One of the most important things I was able to take away from this project was the importance of being able to go back and iterate on designs through wire-frames. I have developed better researching methods that benefited the design phase.
I was able to establish a consistent style and design by following the style guide created. I incorporated certain elelments from other style guides into the one created for a consistent feel overall while maintaing what the stakeholder wanted to express.
Never fall in love with a design and the first solution is not always the best solution. always ask for feedback and when in doubt go back to iterating until the problem space has been resolved.