Mostly about web design.

Redesign: LetsLunch’s UI — dashboard

I like Letslunch and what they’re doing. Anytime you get smart people together, awesome things can happen — two random dudes meeting serendipitously on Letslunch may trade ideas, shoot the shit, and very well create the formative beginnings for the next killer app. You never know. So, yeah, I’d like to make to make the site more attractive to use and increase lunching rates. 

This is their dashboard as of this morning.

And this is the rest of the page. Luncher recommendation and a newsfeed. 

This is my design: 

The options are generally the same, most of what I did was just make it cleaner and more organized. As you can see,  I took out “how to lunch” and put in a tabbed menu.

I actually contemplated putting in a progress bar to the left of the user pic if your profile is incomplete, and it’d say like, “Your profile is 75% complete, fill in xxxx missing fields.”, but couldn’t find a practical way to put it in and make it useful. 

The only major difference is the newsfeed which I thought was a bit noisy. I don’t care too much about who’s wishlisted or joined, but what’s relevant to me is who’s available to lunch. Plus I think sometimes people don’t know who they want to lunch with until they see someone who’s interesting and available. So I moved recommended lunchers elsewhere to make this newsfeed more visible. The “load more” on the bottom of the feed is purposely borrowed from Facebook because I have a feeling most people can’t resist their habits and will click it. 

What do you think? Will it work better? Hit me up!

HTML mockup is available here (modern browsers only). 

Memrise: Mobile App - part 1

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. 

By the way, my 52 card time on the $10k memory challenge is down to 2:42!

Memrise: Mobile App - part 2

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

——

Can’t wait to see what the (very talented) Memrise team have done with their app when it’s released in April; I assume it’ll be quite different from what I wireframed — in a good way.