Ironhack Project 3: Redesign an App
…
THE CHALLENGE
Our third project here at Ironhack and my favorite project so far. Our challenge was to choose one app to redesign. The only constraint is that we must select a well-known native mobile app. We had to redesign a minimum of three screens of our choice in three days.
THE APP
I knew right away what app I was gonna choose. I love to read and therefore I like to keep track of which books I’ve read, which books I should read next, and so on.
For that I have been using the app Goodreads and excuse for the bluntness but the app sucks. I think the reason for that is that the app was never designed as an app but it is a website that became an app — if that makes sense.
HEURISTIC ANALYSIS
I started off by doing a heuristic analysis of the app Goodreads. Heuristic analysis is an evaluation method in a digital product’s design to a list of predefined design principles (commonly referred to as heuristics) and identify where the product is not following those principles. Here below you can see those teen principles.
Again, sorry Goodreads but I could have gone on forever listing things that could have been made better in the app. But I decided to stop after listing sixteen things. Then I also had to rank them by severity and ease of fixing on the scale 1–3, 3 being the most severe or most easy to fix. You also add your recommendations of how to fix it.
RECREATION
Next up was to recreate existing screens of the app. Screens that we would later redesign. Its purpose is to get a better feel for the app. See what’s working and what’s not. What details are there and so on. Here down below are the frames I recreated.
RECREATION
There are different kinds of competitive matrixes you can use to compare yourself to your competitors and visual competitor analysis is one of them. That is when you look at your competition to identify the current identities that are being used within the market so you are aware of current trends and have an idea of what your customers may expect. It can also be useful to set your product apart from the competition.
I looked at four apps, some of them were direct competitors and others indirect, like Storytel. I looked at the logo, fonts, colors and the overall image of the apps.
REDESIGN
Now to the redesign of the app. I stuck to a similar color palette but slightly reduced the number of colors from the previous app. Also used a similar font.
The Home page
First page I redesigned was the home page. First off I personally do not like how it’s categorized. I wanted to have it more like the Netflix home page category. Instead of random “Trending this week in X genre” or “Popular on Goodreads in Y genre” I wanted to have the discovery page focused on the type of genres categories and the home page more just trending and popular in general.
So I categorized it like this:
- Trending this week
- Popular on Goodreads
- Most read this week
- New releases this month
For the navigation bar:
- The Search is an option on the top of the page and on every other page as well so I didn’t think it was necessary to have it in two places. Then I added filter option for the search too.
- The More option I also move to the top of the page instead of having it on the navigation bar.
- I moved the line over the icons below it because I thought it look like a scroll on the original page.
Change the outlook of scrolling horizontally instead of just one book at a time. Added the logo on the top of the page and changed the overall look.
The Book Detail page
First of all there is too much information and too much text everywhere on the original page. Many random colors and confusing information all over.
They have two share buttons, one in the corner and another one way too big in the middle of the page.
Book details button is also too big for the information it holds.
The My Books page
My book page looks like two different pages, the top of the page doesn’t match the bottom of the page in my opinion. Also wanted to have the same style of genres on the book details page and my books page.
The + in the left corner doesn’t offer any information that aren’t already on the page so I just dismissed it.
The Discovery page
I wanted to make the discovery page more personal and there you could look for books that match the ones you already read. Keep the information and ratings about the book without needing to go to the book details page. Also add the “want to read” button like on the home page.
PROTOTYPE VIDEO
Here you can see the prototype that I made. Of course it’s missing a lot of things like micro interaction. I have learned so much already and I love when I can see that I can make my designs even better.
SUMMARY
This was without a doubt my favorite challenge. There are a lot of things I wanted to do but ran out of time. I also got good comments from my fellow students when we did the design critique. I like the idea that you can always do better without needing to reinvent the wheel every time. You can also clearly see how important it is to keep your apps and websites up to date and add new features. Also how important it is to look at your own designs with a critical eye.
Thank you for taking the time and read my case study!
