#fluidui

A few screenshots of a prototype of an app I am currently developing.

These were created using FluidUI

I pretty much ported the web version over the mobile and it seems to work fine. Why fix it if it ain't broke, right? 

Course sections

Mem selection with picture

Users will be able to swipe left/right to browse mems

Mem selection with text

Multiple choice question

Multiple choice answered

  Text question

Keyboard will be pulled out and ready to type without having the user select the text field

Text question answered

Mem review

hitting "try another mem" will bring us back to Mem selection screen

----

I looked back at Letslunch app design I put up earlier in the year and noticed a lot of things I didn't like: lack of consistency, too much clutter, not designed for fat finger syndrome, and just not that aesthetically pleasing.

So I've been reading and learning a bit in the meantime. 

It also happens so that Memrise is due to release a mobile app this April after being in production for the past year, so I wanted to design something real fast, work independently, and see what I come up with in comparison to the official app. Everything I have designed here is based off assumptions from my personal usage of the website and created with Fluid-UI. 

Goal: Design an app with minimal chrome, works well with fat fingers

also: see my previous post on Memrise registration flows

Dashboard

Displaying "latest courses". Swipe to see other courses. A previous iteration did not display user stats - it would probably be hidden underneath the profile page, but you know the saying, "out of sight, out of mind." 

Drop down menu reveals course display options (oh yeah, I realize the arrow should be pointing up. too late now)

Showing "All my courses". Tap top left button to browse courses. I know that icon is exclusive to Memrise but I think the learning gap is small enough to justify having no label. 

Browse Courses

Displays categories by default - Perhaps it should display courses by default instead?

Breadcrumbs appears under menu bar when tapped 1 or more levels down

Dropdown reveals display options

Browsing Spanish Category - Now showing "Popular" courses

Spanish category - Showing "Popular" courses with dropdown retracted (ignore color scheme differences, just testing)

The downside about having minimal chrome is: it takes quite a few taps on back to go home if you're keep into course categories. 

Displaying a course

This shows after tapping a course you're not currently learning. CTA on the bottom will be in a fixed position

Hit CTA and now enrolled in the course. Menu drops down to reveal additional options.

Enrolled in course - scrolling down - Another iteration had breadcrumbs in fixed position, but again, I want as little chrome as possible to make room for content.

----

Taking a break for today - I'll work on the learning section later in the week.