A beginner’s design process for recreating an user’s interface

an experience one can’t forget easily

Introduction

Stumble upon- An application made and tailored for user’s specifically to their choices and interested topics like art, technology, politics etc. The app was launched for android approximately 4 years ago. It has over 5 million downloads with a rating of 4.5 and has had a successful journey up till now.

Key features:

1. Utilises less data than the web for searching

2. Share your interests on social media

3. Bookmark and prepare a list of your favourite topics

4. Collection of wide content in a single place

User experience

In this blog I have only tried to cover the appearance and layout of the screen as I still don’t have a proper understanding about design.

I have been using this app for a while now and will be sharing my experiences. I also took the liberty to ask one of my friends to share her thoughts as new user experience counts. Both these perspectives helped me in evaluating the benefits and problems in Stumble upon.

Pros

• Everything is in front of me and easy to navigate. The icons used are consistent.
• Variety in a particular topic which brings me back to the app
• Simplicity in appearance- use of limited colors which enhances the article
• Sharing updates and interesting data with friends
• Option of saving my list privately and publicly

Cons

• The icon on the bottom centre does the same thing which swiping left does i.e changing the article
• The navigation bar is not organised as per the need
• The home screen displays the entire article at once
• To look for articles for a single interest you need to use the tab on top, which is a long process
• The articles should have mobile reading mode rather than web mode

And the redesigning begins..

Now the major work begins, where I need to suggest improvements for a better experience. This is the most time consuming and thinking based task. I have sketched for really long to provide better placements and easier experience.

I sketched multiple iterations and versions before designing as I wanted to brainstorm and evaluate my ideas before investing time into actually converting them into high fidelity mockups. This would not only give me more ideas to consider but also would help me not get emotionally attached to any one particular design.

How does the home screen look like?

• On opening, it directly shows articles based on one of my interests
• A round icon at the bottom centre to move to another article
• A navigation menu on the left which takes me to other screens
• Drop down interest’s menu on the top

Screenshot of the home screen(Left), Mockup of the home screen(right)

At first everything looks perfect but when you recall the design lectures and think from different perspectives you eventually find out that there is always scope for improvements. All I did was ask the question Why?

• According to me there is too much going on in the first pop up screen of the app
• Removing and rearranging few items will give more visibility to the articles
• Navigation menu can be removed and a profile screen can be added to reduce the no. of screens

Below are few of my rough sketches on the appearance

Constraints with these sketches

· The homepage remains congested in most of these designs

· Layout isn’t user friendly

· It has irrelevant icons on the page

· Few layouts may not have articles highlighted as it should be

Realisation after the sketches

An important aspect I might have missed in my designs is the fact that Stumble upon uniqueness bringing the user’s direct information on the home page without clicking anywhere.

Also the fact that is may be a marketing strategy of the team to attract the investors by giving direct user interaction.

Therefore, I suggest one modification which would be removing the navigation menu and instead have a profile icon.

How does the profile link look like?

Screenshot of the profile screen(Left), Mockup of the profilescreen(right)

Constraints with the current page

· Profile screen can have other details which are present on the navigation menu of the home screen.

· As the menu is removed, showcased above, the information can be compressed and kept on a single screen.

· It can be simplified for friendly use

The image below represents the modified version from the problems.

Modified and compressed Screen

Areas of improvement on Modified Screen

· More usage of pictures in the design

· There are chances that the design may look too simple for a regular user, an advanced version can be worked on

· Information could still be few clicks less as it may annoy the user

· I might have missed some important tab or head

· The design could be advanced and neater

The Interest drop down bar

The Interest Menu is one of the most used feature for users to look for specifics or particular. It should contain all the interest details weather it is user’s added interest or new discovery. Pictures are always better representation than data for readers to understand. I will be showcasing the original and a modified version for this as well.

Original All interest screen

Problems with the existing one

· Too much of scrolling is involved

· Complicated for a new user to understand

· While scanning, a user may use for a tab he might actually find interesting

· ‘My interests’ covers most of the screen

· Missing a lot of space on the page

· Selection between the needs like photos, videos should be present

Modified All interests screen

Areas of improvement on modified screen

· Colour combinations could be different

· Tabs placement can be changed

· Rework on the pictures taken for each tab

Takeaway

The process has been exhausting but exciting throughout. There are so many things you can improve when you think about is deeper is surely one of my biggest learnings.

After completing this assignment on time, at least I can speak about my basic knowledge of designing any screen.

I have tried my best to cover and incorporate everything that crossed my mind in the past week. One of the major difficulties will always be documentation of the process as I am not a great writer. Although, here, there are various areas which is covered, if not, feedback is always appreciated as it brings different perspectives to the topic. It would be nice of the readers to connect with me for any discussion.