I spent a few hours this week coming up with some more design concepts for my OpenCork app. We currently have the app in the iOS market and are going to be working on the Android version soon. I wanted to try and fix some of the UI/UX things that have bothered me about the app before this transition, while also giving the app a look and feel that I can be excited about.
One of the most important screens in this app is where we show the drinks that a location has. This is normally the first screen a user should see after selecting what location they are at. Here is what it currently looks like:
You can see a cluster of information at the top about the location, and then the drinks are listed below it. The first thing that bothers me about this screen is the haphazard placement of buttons, icons, text, etc all over the top of the screen. It's confusing for me to look at. The next thing is, where are the drinks? Oh... wayyyy down there at the bottom. You can only see one drink in this image - Apple. This is a problem because that information is probably more important to a user then anything at the top. I worked on a few concepts, and here is what I came up with to redesign this screen:
This mockup is not pixel perfect, but you should get the idea. I started these mockups using Sketch and I am still learning it so forgive me for any visual bugs. Here is what I tried to do with this redesign:
- Consolidate the information about the location, but still make it accessible to the user if they need it. This is what the "i" button is for next to the name. This will launch a modal, like this:
-
Now that the info is consolidated, the drinks list can take up more screen space and appear more towards the top of the screen.
-
The cells holding the drinks don't let you edit if you like them anymore. If you want to do that, touch the cell to go to the detail page and you can edit it there. I didn't like how much info was on the cell before, only for it to be repeated in the detail page. I wanted enough for the user to see the name, attributes, and if they already liked it or not. The "New Tasting" area is really the main place to be editing if you like it.
I imagined this page being used as a quick browse of what the place has, or as a review later on what you might of liked from this place, without looking through a tasting.
I got some inspiration from other apps, mainly researched here. I don't think my designs are done yet, but I like where I am headed. If you have any input or comments, let me know!
Comments