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.

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 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.

Different mockups for the mobile website

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

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

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

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

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

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.

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

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

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

Link to mobile prototype:

https://xd.adobe.com/view/56cbd61a-f9f8-4871-9139-d914a9c97140-0398/?fullscreen

Link to desktop prototype:

https://xd.adobe.com/view/59a102a2-710e-4e9e-8bf7-468025566c33-0cf2/?fullscreen