top of page

Speakeasy

Working hands-on with kids over the past 4 years, I have seen the need for a service of this kind. Too often are students ill-equipped to handle the professional workplace when it comes to being confident in sharing their ideas and work. View designs from start to finish including wireframes, mockups, and low/high fidelity prototypes on the newest education service, Speakeasy.

Wireframes

First wireframes outline the bones of the mobile project. You can see notes on certain design choices such as the hamburger menu being fixed to the screen so that users can access it throughout their user journey.

Wireframes

Wireframes of the desktop site. This was developed first as a part of graceful degradation, as most users will likely be using laptops or desktop computers for educational purposes. 

Mockups

Different mockups for the mobile website 

​

Designs

Current designs left the logo behind and just use photos showing SE's tutors at work. 

Overview Speakeasy

Here you can see the overhead view of the different mobile page designs.

User Flows

Designs progressed to low and then high fidelity prototypes showing user flows to and from the home page. 

Wireframes

Wireframes for the desktop site shows the outlines of the landing page, subscription page, upload page, and finding a tutor page

Mockups

This is one of the first mockups of the landing page for Speakeasy's desktop site.

Speakeasy Home Page

Current landing page for the desktop site. The hope is for users to be able to access any page they'd like from the home page without it being too crowded.

User Flows

Snapshot of flows from the home page. Designs are linked at the bottom so you can go through them yourself. 

Mockups

More mockups for the desktop site showing an upload screen, subscription selection, reviews, and finding a tutor. 

User Flows

Flows from the pages shown in the previous picture. Click the links below to view up to date prototypes.

bottom of page