B2B Travel Web & Mobile App
A case study about the methodologies, challenges and learning for a large-scale project in my previous agency role.
Design Challenge
In 12 months, design & develop the brand new Cross-Platform B2B application (web + mobile) to breakthrough the industry and take on incumbent market leaders.
*This case study is based on a real project, but rewrote to exclude specific product details due to commercial reasons. However, my thoughts, challenges and solutions are 100% authentic.
My job was to:
- Lead the overal UIUX design & strategy of both the Web Portal redesign & Mobile App design;
- Work alongside the entire project team in a lean/agile development methodology (lean UX);
- Study existing products in the market and become an adept in domain;
- Create user flows for all the features of the platform (Web and App);
- Conduct research & competitive analysis;
- Create User Personas and User Journeys;
- Create Sketches, Low-Fidelity Wireframes + Prototype, then translate to High-Fidelity UI designs
My Team | Nick (UXUI Designer) + 1 Project Manager + 1 Business Analyst + 3 UI Designers + 1 iOS Developer + 3 Android Developers + 2 QC/QA Testers
Research Methods Used | Competitive Analysis, Heuristic Analysis, Hypotheses & Experiments, User Interviews, Low/Mid-Fidelity Wireframing
Design Tools Used | Adobe XD (Low-Fidelity Wireframe, Prototype, High-Fidelity Designs), OneNote (Sketches), Invision (High Fidelity Review/Prototype), Draw.io (User Flows), Microsoft Powerpoint (User Personas)
My job:
10% UX Research
15% Product Development / UX Strategy
35% Low-Fidelity Wireframe, Prototype, Reiterate
40% Hi-Fidelity UI Design (Web & App)
About The Project
The Client is a startup that is aiming to disrupt their industry with a digital product that targets to streamline client experiences with features not found in existing products in the market (aka their competitors).
Background Story
- The Client has been working with a separate vendor, which we shall henceforth refer to as Vendor X, to build a prototype Web Portal prior to my team’s involvement.
- Due to poor UI design and user experience, the Client decided to engage an additional vendor to supply professional design services, as well as to develop a brand new mobile App.
- Then, I played an instrumental role in clinching the project with my sales team by impressing the Client with our UXUI Design capabilities.
Step 1: Requirements Gathering & Research
Discovering the Product
At the discovery phase of this project, I conducted close to 20 hours of requirements gathering and interviews with the Product Owner to get a better understanding of the product and domain knowledge on their industry.
What I did:
- Interactive hands-on approach of sketching out features and flows on large flip charts to stimulate and elicit information from the Product Owner.
- The questions I asked comprised of a mix of “Whats” and “Whys” for me to understand the intended functions, and their corresponding business logic.
- What should a user be able to see at this stage?
- Why should this be here?
- What should a user be able to do here?
- Why can’t
- What happens after a user does this action?
The fruitful sessions gave me a much required knowledge about how the product should function, and how I can exercise empathy in my upcoming designs.
Step 2: User Flows, Personas and User Journeys
User Flow
I mapped out the users’ steps to see how I could simplify their journey to help them reach their most important goals with the product.
The User Flow always serves as a map for the screens that will come later. Without the User Flow, one will be lost and connecting screens together later will be challenging.
The User Flow is heavily based on the flow diagrams sketched together with the Product Owner during Step #1. Here, I polished up the different steps and constantly practiced empathy and good UX design principles to ensure the flow is intuitive and meaningful.
User Personas
Based on the defined User Flow & features of the product, three personas are crafted together to represent the three archetype of users.
These personas are referred to throughout the entire product development process, especially when designing features for their user journeys.
Each persona serve as a materialisation of the three user groups, and helped us to see:
- How they would use the product. Mobile or web portal?
- What kind of actions do they perform on said platforms?
- What features can we develop to enhance their experience?
- How can we better optimise the flow for each of these personas?
The personas are put into a presentation deck which was shared to the project team, and has since been used as a guiding pathway in the entire design process.
Step 3: Sketch, Wireframe, Prototype, Repeat
Sketches
I am a visual person. I usually like to sketch & doodle as many ideas as possible, and each new sketch is building on the idea of the previous.
The purpose of the sketches was to visualise the different steps of the User Flow into actual screens. Such low-fidelity sketches were rapidly created in less than a few days and then presented to the Product Owner for discussions.
The sketches were created using Microsoft OneNote.
- Sketches transform the User Flow diagram into actual screens. If the User Flow was the Map, the Sketches are the buildings.
- Sketching allows for me to visualise the sizing, proportion, and placement of key UI elements.
Certain key screens were created with a few variants. We kept the review sessions very hands-on, and the Client’s team had the liberty to contribute their feedback and ideas directly to the visuals.
“Measure twice, cut once.”
The carpenters’ way
Low-Fidelity Wireframe & Prototype
At this juncture, we have mapped our a clear User Flow, sketches visuals for the screens to populate the User Flow. With these 2 measurements, it is time to execute the actual design.
The Low-Fidelity wireframes serve as a much polished visual for presentation, testing & review.
The wireframe and prototype are created using Adobe XD.
I also strung the screens together to create a prototype (right) to do initial testings on our User Flow to ensure it is practical and does not take unnecessary steps to get to the end goal.
The wireframe and prototype helped to set features and UI in stone, and after approximately 4–5 rounds of review and reiterations, we were ready to proceed to skinning the UI with proper typography and colours.
Problems & Challenges
No projects ever run smoothly without hiccups.
The project was plagued with more problems than anyone would have expected, which created many challenges for me and my team. After the completion of Phase 1, we had to deal with:
- Turnover of Project Managers.
- Due to unforeseen circumstances, our team saw the change of 4 Project Managers.
- Sprint or not? The original idea of the project was to divide into 2 separate phases, with a ‘hybrid-waterfall-sprint’ methodology.
- Designs and Requirements Backlogs to be signed off before sprints commence;
- However there was a lack of an experienced SCRUM Master;
- That led to incorrect planning of iterations, which led to dependencies across iterations.
- Wrong Approach of design & development.
- Project was scoped to be Mobile First, Web last;
- Vendor X’s API team was not able to supply our mobile developers with APIs in time, which impacted development timeline.
- Lack of communication between Vendor X and my team.
- Due to commercial reasons, all communications between Vendor X and my team had to go through The Client;
- The Client did not want us to share high-fidelity designs with Vendor X, which resulted in delay in API design for the mobile app;
- This greatly restricted the accuracy of the designs.
- Approved Designs changed due to scope creep & API limitations.
- Due to the above problems, designs were approved with the Client’s requirements in mind, without consideration of API limitations;
- Once Vendor X reviewd the designs, many issues were raised which resulted in a redo of many key UI.
How I overcame the problems with my team
Giving up was not an option, neither was complaining. In the midst of challenges, I practiced learning from The 7 Habits of Highly Effective People — I tapped onto my protectiveness to work on my Circle of Influence and to make up for the weaknesses of others, while complementing their strengths.
- I proposed a change in development approach to go Web First, Mobile last, so that Vendor X could better contribute to the design process.
- I made sure communication between all three parties were clear, and took time to lay out all deliverables clearly within e-mails (screen-by-screen) so that they can be reviewed easily by all stakeholders.
- My proposed solution sped up the design & development process of Phase 2 by almost 100%, and the effective contributions of Vendor X meant all designs were accurate and finalised much faster.
Overall, the obstacles faced were extremely challenging, but provided a great learning experience in the running of SCRUM projects.
Step 4: Perfecting the Design
High-Fidelity UI Design
As we moved on to create the design for Phase 2’s UI, I eventually took over the responsibility of High-Fidelity designs as we condensed our process to skip Low-Fidelity Wireframes, due to time constraints.
We continued to move through several iteration of designs, based on new ideas from the Client, as well as the Alpha and Closed Beta testings that were conducted.
With the constant polishing of the designs, the product was almost coming to fruition, as we near the end of our 12 month long journey.
*The actual designs of the product can not be shown in my case study. Once the product is launched and publicised, I will be more than happy to provide a link to their website and product page.
Learning & Takeaways
What I learned from this project
The key takeaway from the project is the importance of good project scoping, management and proper methodologies. Even with an A-Team, with the wrong methodologies, problems will surface to strike everybody.
The greatest challenge I faced was the ‘scope creep’ and constant change of mind by the Client on the designs (typical client behaviour?). To overcome this, I had to exercise my innate pro-activeness to make sure designs are presented in a clear and concise way for review, and prevent miscommunication over e-mail — if you have to present the idea, you present it straight to the client face-to-face.
Overall, this project has tested my grit, determination and resolve, and whatever challenges I encountered only made me an improved version of myself from a year ago.
I am proud to have been part of this project, and see it push through its incubation to v1.0 release.
In summary:
12 Months Design & Development
3 Parties of stakeholders
>20 Total people involved
3 platforms across Web, iOS, Android
