Redesigning GuzoGo

smartmockups_kn7zn19f.png

Project name - GuzoGo 

Project date - Nov, 2020 - Jan 2021

Overview

GuzoGo is a travel app since 2016, It is an app primarily serves people on their travel and booking needs. GuzoGo helps users to book their flight needs.

The app was created to help users book their flights without going to travel agency. It also aims to  serve with international as well as domestic flight tickets from all airlines worldwide. Mainly GuzoGo solves a problem where users can have access to all flight details and prices in one place.

And its users are anyone who travels and who wants to see all the booking options at one place.

smartmockups_knb3fgrw.png
smartmockups_knavdei5.png
smartmockups_kn9edapi.png

Project goal

This project focuses on creating an app for a travel app called GuzoGo, The project aims to bring customer satisfaction, to have more customers, to increase in yearly income, to increase the number of downloads of the app, and to help the company grow.

My role

I am half of the designer team with a team of engineers ,back- end and front- end developers. On this specific project I did most of the UX design process including research to understand the problem, define the research results, sketching, create low and medium wireframes including mockups and prototype which is ready for users to test. 

Challenge

The challenge of this project is to discover the pain points of GuzoGo users, to enhance user engagement, and increase users to come up with a solution that could help users to book their flights in the best possible engaged user experience.

The design process

  • Research

      - Data collection

      - Survey

      - User stories

  • Define

  • Ideate

  • Prototyping

  • Usability test

  • Development

Getting to know the business goal

When it comes to the design process the first thing i did was a kick off call, interviewing Fitsum who is the business owner, and collect as much necessary information from him,    how he want the product to be, and where we could work to find the best solution.

Target audience

To know my target users, Now from my call interview i know the target group to whom  i am designing for, my target users are any one who travels, business owners, who are busy to compare between airlines (mostly Ethiopians) and those who use a mobile device. 

Screen Shot 2020-12-04 at 11.15 1.png

HMW questions

While interviewing the business owner, i was creating the how might we(HMW) notes where i put insights from the business owner, so that i can have multiple ideas to understand the business goal, and shared with my team.

This helps me to choose which area to focus. 

Questions including; 

How might we guide users in a friendly, informative and engaging way?

How might we change the feel and look?, How might we create a simple user journey? … and so on

Understanding the problem

After collecting enough information from the business side i conducted a usability test and interview with 5 users on the existing app, for a survey i sent 15  questioners. And analytics on the numerical data.

and, i have found out that users  want simple user journey where they could finish their booking with few steps, they need a language selection part, they need to easily  compare prices and multiple ways to make payments,

smartmockups_kn7zn19f.png
smartmockups_kn7zn19f.png
smartmockups_kn7zn19f.png

Project interview process

Conducted the interview depending on clients availability, I conducted one to one personal interview, video and phone interview. Once I know what my 5 potential participants prefer I conducted the interview depending the convenience of my users.

Interview questions include but not limited to;

What are their booking history looks like?

How they use their smartphone and how often they use their phone for booking purposes?

Their preference in using phones or desktop computers?

If they face any challenge while using apps to book their flight needs?

What changes they need on the app or what they think is missing in the app to make it simple and usable?

Use persona

Frame 13-2.png

User empty map

Desktop - 3-4.png

User journey map

Desktop - 4.png

Storyboard

Besides creating the user persona , user journey map and emphasizing the user I have used my artistic skills in creating sketches of the story board for my user. I believe it is very important to create a story board so that I will clearly understand my user persona. That means i will know to whom i am designing for. And these sketches show the user persona or Hannas activities.

172601491_835861390348049_68163155727639
172299174_905513313573771_92129800077601
171639609_611146963176257_26357521589627
170632352_1181323642311322_5624681975943

Define

At this stage i combine all our research findings, Based on the interview i made with Ftsum, the usability test and user interview, in discovering where the problem exists. 

After carefully analyzing the data that has been gathered i combine them for a solution.

Card sort

171760967_302289154580970_33082221390788
172150242_1397584627277291_6606287040601

Information architecture

172804077_467196734703264_64041348513257

Sketching

After deciding on the structure of the website and i created the information architecture to find out how users can interact with the product. Then I came up with a range of crazy ideas where i can have multiple choice to compare and find out the best solution.(and of course discussed with my team)

171415744_1123703954778018_6369491229632
170488630_162434945657778_32729656236816

Paper prototype

The first step after the simple crazy sketches was to  draw this paper prototype on the selected idea, keeping the brand identity, users need and business goal.

171243863_754911668549233_70986785089211

Feedback

The design team came together and discussed on the project,  then i send the paper prototypes to the client Fitsum so that he could comment and vote on the best ideas to work on.

171393261_762185428003409_10609128629811
172120868_864703277594292_65324756113679
171707734_1421052341580731_7810854137659

Project process

Then the business owner commented and voted on the idea he likes and ask for more explanation in some sketches.

Group 235.png

Eterate

Eterate

Group 223.png

Eterate

Wireframing

setting.png
Group 231.png
booking.png

Mockups

And continued creating the tactile representation of the app by building the UI elements and the visual design including typography, color, icons, button, space the feel and mood of the website in to a high fidelity mockups  and a prototype which is ready to test.

home-5.png
X - 38.png
setting.png

Mockups

And I came up with an idea of a simple landing page where users will have a space when opening the app.

 as you can see the one on the left was the old version which has almost full screen with lots of information and has a clutter look, what i created on the second one is to have a space with a simple search button

Group 234.png

After i have finished the full prototype i put it in the hand of real users for test. 

while testing i was also asking  questions and i also told them to speak out loud while going over the product, but the result was not as expected, 3 out of 5 users didn't like the landing page and the user journey to book a flight, it didn't match with their expectation and experience.

User test

home-5.png

Having all the feedback from users and observation from the prototype test, we came back together with my team to analyze and discuss results,  and after multiple discussions with the business owner,  we came up with three  basic questions to answer 

1st.How can we make the landing page simple but functional?

2nd. How to minimize user journey with simple steps while allowing them to see all their options? 

3rd. Can we give users a sense of trust especially on the payment section?

To answer our biggest questions I  come up with this new sketches, with new idea. 

Also we voted and discussed on the best solutions to start working on our design again.

Group 243.png
Group 244.png
Group 245.png
Group 242.png

Style guide

Here is the style guide for the visual design system, the typography, color, buttons, icons, interactive state. 

The actual style guide hsa more features but i compose  this for this presentation purpose. 

also  I have been aware of the accessibility guidelines and use them in grouping related contents, adding more color contrast, easy to spot text, adding visible indicators on icons and buttons  and using different interactive states.

Style guide.png

Out come

Ideas to action:

I sketched countless ideas and brainstormed various possibilities with my design team and created low-fidelity wireframes and prototypes to test. Even though we took some important aspects  from the first design, we came up with the second prototype which is similar  but have much more changes, with clear, simple but most importantly meets the experience of our users.

smartmockups_knjn5sv9.png
smartmockups_knt901oe.png
smartmockups_knt98wfq.png

Solutions

I have changed the landing page to simpler screen, i created a space so that the page will have a room to breathe , importantly return and one way can be spotted clearly, 

i use a darker image as a background so that the main text fields can be seen clearly,

 i enlarged the size of the button, and changes on the text.

 And i changed one of  the bottom navigation to something functional which users interact most, 

so  profile was not that important in this app and i replaced it with settings.

I have created a visible text and a clear image so that anyone can see it from any mobile device and communicate with the app. 

Organizing items by creating a group to the listed items in the app is the best solution we came across in order to minimize time and effort of users that might frustrated using the app.

I have created a page to track the orders and also put accurate and updated information on all the items, plus I will create readable short text to the terms and conditions.

Among the solutions to our app we created a custom tip for the delivery so that users can tip the amount they want to tip.

smartmockups_knt98wfq.png
Group 234.png
Payment-6.png
Payment-7.png

Accessibility

Accessibility is inclusive design. Designing accessibility in mind is the power of better design and it removes barriers to empower all users to be productive and connected. In accessible design whether it is permanent, temporary or situational disability all are experiencing limited mobility. I have put all the necessary effort to make the product accessible by people with disabilities and also by all equally. I have created the design elements and content of the app using the web content accessibility guidelines (WCAG) to the best of my knowledge to make it perceivable where people can see and hear the content, operable where people can use the product by type or voice, understandable where people can get clear and simple language, robust where people can use different assistive technologies. I have used text size, clear color contrast, focus state, grouping similar items, and multiple visible indicators to make the product accessible by everyone. After all inclusive design is simply a good design.

Success metrics

I came up with the solution by identifying the areas I need to focus, we discussed all the problems as a team to create the best possible solution for users and the business goals.

We measure our success because we meet our goals and guzo go has 6% more downloads, 4.8 customer rating, $500,000 dollars in revenue (which increased by 300,000),  and created 10 more jobs.

Learning

One of the new things that I have learnt from this project is to get to know customers needs and how they respond to different products. 

Prototype looks simple but I am sure it is more complicated than I am thinking. I saw how users interact with the product, and the way we created our prototype helped us to create simple and usable product.

I have also learned how to make interview and usability test during different situations and time where people can't meet in person.To solve their pain points we use video call interview in our usability test. I created new pages and I have learned a lot since I etrate it again and again.

 

Shipped

After the feedback and testing with five users ,we were able to hand off to the developers with all the specs and most importantly side notes. 

Finally we are happy to see GuzoGo shipped and can be downloaded both on Apple's app store and Googl's Google play store.

2da227c49f860892a83c14306e4c65d0.jpg