Glider

In this study, I will explore the design process of creating a seamless and intuitive experience for users of this bike app. The app is designed to cater to the needs of bike enthusiasts, making it easy for them to track their rides, share them with friends, and discover new routes. 

As a UI/UX designer, I will dive into the design process, starting from understanding the user's needs, creating wireframes and prototypes, and finally, delivering a polished user interface. The goal of this case study is to showcase the creation of an engaging and delightful experience that keeps users coming back to the app.

"This design project was more of a team collaboration task, and I was part of a three-person team. As designers, we were all free to take part in as many design roles as we wanted without regard to any preferences we may have."

Project Brief

Client: Lagos State Nigeria, Lagos State Transport Corporation (LSTC)

Client Brief

The Lagos State Transport Cooperation is developing a bike rental service. Users need to be able to rent and use these bikes via their phones.

Functionalities

  • A unique client profile

  • Map showing locations of all bikes location and availability in real-time

  • Unlock and lock bikes after use 

  • UI & Visual Designer

  • UX Designer

  • UX Architect

  • UX Researcher

My Design Roles

Plan

The first step was to create an initial strategic plan. It marked the beginning of the UX study. It was easier to lay the foundation for the UX research during the writing of the strategic plan. As a result, we understood the LSTC's motivation in wanting to create this application. What are the specific business objectives and criteria that the mobile app must meet? Who are the potential users, and what processes and circumstances they might encounter?

Proposition and Strategy

Commuting easier, faster and smarter cycling around the vibrant city of Lagos. Avoiding the city's congested traffic. Discovering the quickest routes to your location.

Product Vision

An easy-to-use solution that offers the cheapest way to commute around the city.

The rationale behind its use

  • Commuting the city of Lagos made quicker and simpler.

  • Exploring the city and discovering new routes and locations.

  • Eco-Friendly way of transportation.

  • Having a healthy lifestyle while riding and having fun.

Goals

  • Reduction of  traffic congestion in the state and improve commuter conditions.

  • Improve, ease, and give citizens and tourists a better experience of the city.

  • Making Lagos state greener (by lowering carbon emissions) and generate more revenue for the State.

Product Tasks and Scenarios

This phase will involve the tasks operation of the apps of two key users, which is the citizens of the state and the tourists:

  • User 1 (Citizens): They need a simple, quick, and affordable mode of transportation while travelling and navigating the city, avoiding major road traffic.

  • User 2 (Tourists): They need quick, affordable and convenient transportation modes around the city that will allow a comfortable outdoor exploration.

Target Users

  • Tourists (Discovering the city).

  • Citizens between the age of 16 - 40.

  • Interested in technology and new experiences.

  • enjoy engaging in physical activity.

  • Tech-savvy

  • People having average income and allowances.

  • want to lead a healthier lifestyle.

  • Citizens of Lagos State Nigeria (alternative mode of transportation).

Strenghts, Weaknesses, Opportunities and Threats (SWOT) Analysis

A SWOT analysis will evaluate the strengths, weaknesses, opportunities, and threats of a particular business or project. In the case of a Glider app, The SWOT analysis will help identify key areas of success, areas that need improvement, potential opportunities for growth, and potential threats to the business. we can develop a strategic plan to maximize strengths, minimize weaknesses, capitalize on opportunities, and mitigate potential threats.

We received some useful information from the SWOT analysis, which enabled us to identify current business possibilities and needs that have not yet been addressed.

Opportunities/Possibilities

  • The introduction of innovative features such as electric bikes, real-time parking information, and bike insurance can help differentiate the app and attract new users.

  • Creating a simple, easy, and safe platform

  • Collaboration with local municipalities and transportation authorities can lead to government-backed funding and increased app usage by residents and visitors.

Personas

After carefully considering the business strategy and receiving insights, we were prepared to shift into a more detailed analysis phase and learn more about our users' demographics, requirements, and expectations.

In addition to the main persona, we developed two supporting personas. Our entire design process was centered around their needs. It was important to us that the people we based our personas on were real people we spoke to during the research process. As a result, we were able to be as precise and realistic as possible. Building a product that is useful and meaningful is possible when you design it for real people with real needs and expectations.

Note: "People involved in the research were real, and did not want their pictures uploaded in the case study process, hence an avatar was used."

The user personas' interests, motivations, and pains and frustrations were the most important data we gathered and embodied. This provided us the flexibility and confidence to begin gathering requirements and creating a list of product features that would take care of the most common user demands and any issues they might be experiencing.

The following are some of the aims, motivation, and complaints of our user personas:

Interests:

  • Explore the city

  • Get to work within 30 minutes

  • Save money from commuting in the city

Motivations:

  • Explore and discover

  • Have fun

Pains and Frustrations:

  • Air pollution in the city

  • Heavy traffic

  • Not able to get to certain locations

  • Confusing transport routes

Agile Epics

The next round of the UX research involved developing epics and at least three user stories for each epic. It ensured that we wouldn't overlook any user scenarios and would take all of their needs into account.

Epic Section 1: Optimizing Commute

  • Story 1: As a user, I want to know where the closest bikes are located and if any are still available so that I may be sure to grab one.

  • Story 2: As a user, To avoid wasting time returning the bike, I would like to know where I may leave it close to my destination.

  • Story 3: As a user, I would like to explore additional transportation choices so that I can integrate riding with other modes of transportation.

Epic Section 2: Exploring and Discovering the city of Lagos

  • Story 1: As a user, I want to recommend experiences to my friends and discuss the locations I visit with them.

  • Story 2: As a user, I want to be able to navigate around the city as long as I can with the fares not being overly expensive.

  • Story 3: As a user, I want to receive promotions and deals that will earn me extra free minutes for my trips in the future.

Epic Section 3: Avoiding the Traffic in Lagos State

  • Story 1: I want to be able to get information on traffic either street closures or roadblocks, to plan my rides.

  • Story 2: As a user, I want an approximate time of arrival and distance travelled so that I can better plan my time.

  • Story 3: I want to be able to choose from a variety of route suggestions as a user so that I may find the most efficient cycling path to take.

Also, we were able to set the framework for requirement collection and feature listing by developing the epics and each user story.

Requirements

One-on-one user interviews and more comprehensive surveys that we delivered to participants in the research served as the foundation for our demand-gathering process. We were able to talk to people from different Local Government Areas and we were able to be more realistic about the business and technical requirements.

Business Requirement

Scope:

  • Developing a bicycle rental and navigation app.

  • Seasonal availability of rental services.

Business Goals

  • Ensuring GDPR compliance

  • Encouraging user loyalty

  • Collecting user behavior data

  • Decreasing carbon emissions in the city

  • Ease traffic in the city

  • collect payments through a secured platform

User Requirements

  • Secured payments

  • Affordability

  • Easy to use

  • Route suggestions

  • Display cycling infrastructure on the map

  • Guarantee bicycle availability around all areas

  • Share biking experience with friends

  • Maximum outdoor UI visibility

Technical Requirements

  • IOS and Android version

  • Using QR and bike ID numbers to identify bikes

  • Google maps integration

  • Website

  • Shopping baskets mounted in front of bikes

  • Phone holder on the bike

Content Requirement

  • Pinpointed the location of bikes around the area.

  • Multi-Language version to help tourists.

  • Cycling infrastructure

  • Pricing 

  • Distance Travelled.

Information Architecture

Recognizing the significance of the step, we invested a lot of time and attention into the information architecture and overall layout of the app.

To create a clear and organised product and avoid future "scope creep," we made every effort to keep the architecture as simple as feasible. We had four key characteristics:

  • Profile

  • Map 

  • Reporting a problem

  • Live Statistics

We arranged all the subfeatures and their connections among one another under each primary feature. It provided us with a clear understanding of the internal structure and dependencies between elements of the product. We were prepared to create the user flows for the wireframe building.

User Flows

This was the final action before designing the wireframes. We made an effort to follow the user flows exactly and avoid missing anything. Following the information architecture we just established, here's the user flow

The team had to create the user flows before they could begin the enjoyable phase, which was creating the initial wireframes and starting the user testing.

Wireframes

Wireframe design was the last phase of our UX study, and the project was gradually moving towards the visual phase. We built the wireframes based on the user flows. Although we wanted to develop wires that had significant visual accuracy and detail rather than just low-fi wireframes, the visual and interaction design were the most problems for us. When we began the user tests, this choice greatly aided us. With Figma, we produced all wireframes and high-resolution mockups.

User Testing

When we were done with the first wireframe design, it was time to test it out to see how it worked and how the users would respond. Below, you can see one of the tests I ran and my analysis.

  • Objective: Find and Unlock a Bicycle

  • Result: Successful

  • Time: 1 Minute

  • User Mood: Positive

User Feedback

Generally positive reviews. The user thought that the notification to lock the bike after using it was quite useful in the sense that if the bike is not locked, it is still considered that the bike is still in use despite not being in motion, which will in turn cause additional charges from the users account.

Findings

  • Most people skip the Onboarding page

  • Most users were satisfied with the prompt to lock the bike after use.

  • Users demand a similar experience because they are so accustomed to the widely used navigation apps (such as Google Maps).

User Interface/Visual Design

Setting up the layout and grid system I'll utilise for the final design was the first step in the UI design process. Here, we made the decision to divide the team, allowing each of us to work independently on their respective hi-fi mockups and prototypes. The decision to explore and learn more as individuals was based on the reality that none of the team members had any prior design experience. The mood board assisted me in choosing the app's first colour scheme and feel. The visual study gave me the confidence I needed to use the design elements, such as layouts, buttons, and icons.

Layouts and Grids

I utilised Figma's default iPhone layout, which has a 10 px gutter, 78 px column width, and a 16 px layout margin. Moreover, I used the conventional 8px grid scheme. The grid structure is, in my opinion, the basis of all UI designs. It helps with everything you need to develop a successful visual design, including alignment, size, proximity, hierarchy, and more.

Fonts

I decided to use the font SF pro Text (Regular, Semi Bold and Bold) for the final project. I believe that these fonts have great readability and also meet the normal standards of designing an IOS App.

Colors

My mood board and the assessability tests I carried out while considering what colours to employ served as inspiration for my colour scheme. I was adamant that the final edition would contain all design aspects with AAA or at least AA.

Icons

I made the decision to use the already-existing material design icons for the icon set straight from the web library. The icons are practical and appropriate for the purpose, in my opinion.

Buttons

I chose the two primary hues from the aforementioned colour scheme for the buttons set, and I styled them in accordance with the button design material specifications.

Visual Elements

I followed the material design principles when creating all of the app's visual components. By doing this, I was able to develop a UI design that was consistent throughout the entire product.

Final UI Design

While I worked on the final design, I was able to build a single style guide document in Figma that had every element of the UI design, ensuring that I would always have the elements available when I needed to construct a new screen. The style guide, in my opinion, is one of the key elements to successful collaboration with other designers, as well as with those outside the design team, such as developers and marketing business stakeholders.

Conclusion

I gained knowledge about the process' structure, the significance of each phase, and how to mix several design roles without losing oneself. I now understand that I will act as a user advocate throughout the entire product development process without compromising the objectives and requirements of the company I would work for. 

I choose to use the pre-existing material design icons for the icon set directly from the web library. The icons, in my opinion, are practical and suitable for the undertaking. Only the custom-made bike pin-point icon, which wasn't part of the material collection, was present.