Re-Designing Gramedia Application
--
Tackling Binar Academy’s Re-Design Challenge
Hi, Guys!
My name is Sasha, a UX Design newbie. This is a huge deal for me to be writing on Medium. But because this is part of my assignment from Binar Academy’s UX/UI Design Bootcamp, here I am writing to you.
In this assignment, we were challenged to re-design an application of our own choosing, as well as implement the Agile Scrum methodology and Design Sprint in our process. We were split into groups of 5, and I had the honor to be working with the Azul Team (shout out to my team mates: Alvian, Hario, Ega, and Wawan). In summary, we only had 2 weeks to finish this challenge and by the end of it, we presented our re-design in a “Sprint Review” session.Guys!
Background
For this challenge, we unanimously decided to re-design the application from Gramedia. FYI, Gramedia is Indonesia’s largest bookstore chain and you can literally find them anywhere in the country. But, two years ago Gramedia launched an application to provide a seamless online experience for its customers.
So the reason we picked this app is because one of our team members suggested it. The rest of us were not even aware that this app existed so we all downloaded it and thought “Yes, there is potential to work with this”.
We decided to tackle this challenge in 2 sprints. The first sprint is centered around understanding user pain points, defining the problem statement, and prioritizing areas/features that needed to be redesigned. The second sprint is all about the re-design process, which includes wire framing and creating the Hi-Fi design. For reference, these steps were basically influenced by the Design Thinking framework (you know, Empathize — Define — Ideate — Prototype — Test).
Step 1: Understanding User Pain Points
In order for us to unbiasedly understand user pain points, we decided to conduct Usability Testing (UT) of the current Gramedia app. But before we did the UT, we went through the app ourselves and dumped all of our assumptions on the pain points that users would point out. This also enabled us to create the tasks that we wanted to test during the UT, which include:
- Searching a book from a specific category
- Searching a book with a specific title
- Searching a book written by a specific author
- Select a book of their own choosing to buy
- Change the amount of items in their cart
- Check-out to payment using the payment method “BCA Virtual Account” (note: we did not ask our Respondents to actually pay for their books)
So, who did we UT? We recruited 6 Respondents who are in the Millennial age group, have purchased a book from Gramedia, and have never used the Gramedia app before. We decided to focus on this group because we personally see a lot of Millennials visiting the bookstore. Plus, since this was an app-based testing, who would be a better Respondent than Millennials?
Step 2: Defining the Problem Statement
After we conducted the UT, we found that overall Respondents did not have any issues completing the tasks. For example, when checking-out after selecting a book of their choosing, Respondents generally completed the task within 2 minutes. But even though they were able to complete the tasks, it does not mean they did not experience any pain points.
We found that Respondents viewed the UI of the application to be lacking. Several Respondents compared the app to Tokopedia (see below), especially for the Cart menu and the payment process. Our Respondents also nitpicked very specific details in the app; like the overall look and feel of the app, and the inconsistency of the typeface and font used.
Through these findings, we collectively concluded that this app was able to serve its purpose: allowing users to buy books online. But the UI hindered the users from having a seamless experience. Therefore, we started thinking: “how might we improve the UI so users could buy their books on the application easier?”
One tool that we used to help visualize the proper design is a User Persona, which you can see down below.
Step 3: Determining Features/Screens to Re-Design
Our solution is pretty much focused on conducting a complete re-design on the UI of the Gramedia app. However, we limited the scope to only include screens that would be involved in the process of purchasing books. This includes the layout of the Home Page, Category Page, Cart Menu, product details/description, search result, check-out process (from inserting address to selecting payment method), and order details.
Step 4: Wire Framing
Since we determined the scope of the re-design, the next step is to wireframe. This part is quite straightforward. We created a series of wireframes first so we could determine the best design for the Gramedia app, with the User Persona in mind. Then we created a wire flow to make sure that we had all the screens needed to fulfill the scope that we already determined. To see the overall wireframes, you can check it out here.
Step 5: Creating Hi-Fi Design
This is the final step! We liked the wireframes we created and they seemed comprehensive. So it was time to create the High Fidelity Design (shout out to all of my teammates for spending time in this phase).
In this Hi-Fi design we wanted to make sure that the UI was as clean as possible and used popular applications, like Shopee and Tokopedia, as reference.
Closing and Reflection
Gramedia app is technically usable and serves the purpose for book purchasing. However, the uninteresting UI doesn’t really leave a good impression to its users.
If you’re getting a “cliffhanger” vibe from this article, you are not wrong. Our objective was to make the UI of the app better so that the users would have a more seamless experience. BUT! We, unfortunately, did not UT this (although it is possible that some of my team members did). This means that we cannot say that this re-design has fulfilled our Design Objective 100%. So that would be my personal homework to see if this re-design has really solved the pain points we discovered earlier.
On that note, I would like to thank you all of you for reading all the way to the end. Big thanks to the Azul Team. Hopefully I would get a chance to update this article if I had the opportunity to UT this re-design.
