Tag: Design Thinking

HealthFitness app
The health and well-being of working people to get a better life is essential. Through communities and connecting people in a holistic way, we created the HealthFitness app for the Trustmark company. I worked remotely from my home in Bogotá for the Trustmark located in Chicago USA. All this was possible thanks to a great multidisciplinary work team, very focused.
The challenge
The HealthFitness team expanded its strategic horizon and positioned itself as a cutting-edge company, which is why they wanted an app. They looked for Globant as a strategic and technological ally and thus be able to develop their business idea in digital.
We went through several stages to get from the initial ideas to the development of the mobile MVP. We had a discovery stage to understand the business challenges and objectives. Later we focus on designing and developing the MVP ideas with the features chosen for the first release.
This is the story of the HealthFitness app that went from post-its to launching an iOS and Android app in 9 months.
The Process
The work process was quite positive because there was camaraderie between the client and Globant, therefore the relationship was very positive. Discovery’s 4-week process was hard and complex work. However, it turned out very well because it was the strategic tip of the development. During the discovery we carry out these activities
Stakeholder Map
During this process we made a clear identification of the participants. With this tool we understood the relationships of all stakeholders and the needs of each one.
Product Goals and OKRs
This was one of the most entertaining activities on Discovery. The reason is that there were many general ideas about what should be the most important features of the HealthFitness App. For this reason, we did a divergence exercise to understand the different visions of what the product was and was not.
User Personas
Trustmark is an innovative company, since its design team had already identified its user personas. With the user personas we did a recognition and analysis of the pain points. We also discovered that their customers were very different from their users. The user archetypes could be summarized as:
1. Manufacturing workers: People who worked in industries and factories
2. Remote white collar: People who work from their homes or places of residence
3. In-office white collar: People who go to an office every day
Journey Map
As a team, we designed the Journey Map of the digital experience and thus we had a clear idea of the stages that a current HealthFitness app user goes through and how we could extrapolate this to the HealthFitness app. With this exercise we obtained valuable information on the steps that would have to be taken in the following exercises.
Accessibility
We conducted an analysis of our users and we discovered that many of them had physical and motor disabilities. Our users needed an accessible and adjusted HealthFitness app according to their needs. This is why we used the WCAG 2.1 standard and the mindset was generated among all the accessibility team.
Brainstorming
We held a brainstorming session where the team generated new ideas around the HealthFitness app. In this session, very interesting ideas arose that the client hoped to have in the first version of the MVP written in the form of Pain Points and Jobs to be Done.
Spiders
With the brainstorm user centric design exercise we had a first approximation of the needs, objectives and tasks of the users. So I decided to create something that I call Spiders. The spiders are to give answers and solutions to the jobs to be done and the pain points with this formula:
I organized and put the jobs to be done and the pain points in circles of the stages of the Journey Map to generate a spider of solutions to each of the challenges. In this way we generate this graph with all the ideas solved by stage of the Journey.
Potential List of Features
Later we had the opportunity to do a Buy a Feature as in Honda Motorcycles, but in digital. This allowed us to prioritize the features that we wanted to make for the HealthFitness app MVP.
Top Features
With this prioritization, we once again made a matrix to understand which of these functionalities best met the needs of our users.
Value complexity Matrix
With this complexity matrix we prioritize and further refine the tasks to be performed within the HealthFitness app MVP. And this was the initial input to be able to start with the task of Wireframes and Prototyping.
Wireframes
It began with the first draft of wireframes of the functionalities that would later pass to the MVP. With these wireframes we had a much clearer vision of what was going to be designed and developed later.
Value Proposition Canvas
With all the ideas I made a Value proposition canvas to verify the product Market Fit. This is one of the most interesting exercises as a strategic designer since it allowed me to have a clearer idea of the HealthFitness app. And we generated the product market fit that we were looking for from the beginning. On the one hand the product, the benefits, the features and the experience and on the other the jobs to be done, the pains and goals of our users.
Mockups
With all this process, the Mockups of the application were developed, which were in charge of Victoria Quevedo, the VD of the team. She did the screens and flows for each of the features.
Development and release
Finally, with all the work done through the SCRUM methodology and with the validations with users, we launched the app to the Apple Store and the Play Store. This was a great event because the whole process was very valuable to me.
The Results of HealthFitness app
We discovered, built and launched a health and fitness app for Trustmark users and their HealthFitness App in just 9 months.
We design and develop the apps for iOS Play Store and Android Play Store of the HealthFitness360.
In the iOS app Play Store we have 5 star rating by our users.
What I did in HealthFitness app
- Design and moderation of Workshops
- Strategic design to understand the business goals
- UX persona analysis
- Accesibility (A11Y) definitions based on the WCAG 2.1 and AA criteria
- Wireflows and prototype for the Discovery
- Medium fidelity Wireframes
What I learned
1. Focus can beat anything in this kind of developments
2. Clarity from the start helps things go faster
3. Whenever there is a good idea, it is better to launch it than to keep it.
Dates
October 19, 2023 and July 15, 2024
Tools that I used
1. Miro
2. Mural
3. Google Slides
HealthFitness app team
- Rubén Ávila H – Strategic and UX Designer
- Victoria Quevedo – Visual Designer
- Fager Barh – Tech manager
- Carlos Arteaga – Product manager
- Evguenia Stepanian – Delivery Manager
- Oscar Avilan – Back End Architect
- Fernando Portal – Mobile Architect
- Jeff Klein – Technical Owner
- Jennifer Cary – Project Manager
- Jeff Fitzpatrick – Product Owner
- Prince Kuman – Solution Architect
- Michael Sauer – UX and Design Lead
July 19, 2023
Honda Motorcycles
We ensure that Honda Motorcycles is the engine of Colombian society because we discovered that a motorcycle is more than a vehicle. Honda Motorcycles are dreams that come true. We designed the new Honda Motorcycles website with user centered design between calls, meetings and workshops in Cali and Bogotá, this is the story behind the design and technology team creating high-quality experiences for everyone.
The challenge
Despite encountering initial challenges, the marketing team at Honda identified three key goals that guided our approach to redesign the website’s UX and these goals include:
1. Create and explore new sales with the website
2. Design a mobile first and modern world class website
3. Generate valuable metrics based on understanding the digital personas
Purchase a motorcycle in Colombia have many obstacles and the website also does not help to the users goals. We identify that the photos of the motorcycles were old, the website had only a desktop version, the pricing was not clear, and the look and feel was not aligned with the Honda Motorcycles websites around the world in other words we needed a new website.
Product Page old website
Product features the old website
I started to review all the data and I discover that 80% of our users navigate especially with their mobile phones. Honda needed to integrate a CRM based on inbound marketing to generate leads and of course get data reports to impact the business. So the development team decided for a new technology to support all the features that we started to discover in the process.
However we had six months for the new Honda Motorcycles UX design and all the coding in the new website. We faced another challenge, the agency and the client had a team unaware of agile methodologies, Scrum, and Design Thinking.
The Process
Goals and Benchmarks
We align and define the KPIs with the client. I explained all the process of the new Honda Motorcycles redesign and at this point we started with the co-creation of the future of the website with User Centric in mind.
Understanding the Journey Map of the Users
We created a Benchmark with Honda Motorcycle websites around the world, some competitors in Colombia and brands that inspires us with their digital assets. I performed an Heuristic evaluation to understand the website and some tweaks that we needed to include.
The team reviewing the Benchmark based on features per motorcycle
User Personas
We perform at least 10 interviews with stakeholders, salesmen and people who daily serve clients who wants to bought a motorcycle. I visited 3 motorcycle stores, one of them a luxury store because the website needed a division between regular and premium motorcycles. Later we started to create a proto personas based on the empathize phase that we archived. I found 6 personas but we centered the design in just 3:
Los chicaneros and full gas: people with skills, motorcycle experts, and participants of motorcycle communities who roads over the country
Los moto-millennials: young people tired of public transport in large cities who use the motorcycle to get to work or university
The Ants: people were living off their motorcycles, such as messengers, delivery workers, and motorcycle taxi drivers
Personas UX Honda Motorcycles based on the research
Workshops
In the definition we had 4 workshops in Bogotá and Cali, we co-created the vision of the new digital experience for Honda Motorcycles website with the stakeholders. During the workshops, I spoke with experts in logistics, workers of the factory, premium sellers, providers, digital teams and traditional marketing teams.
Working on the Value proposition in Cali Workshop
We worked together with the CRM agency in charge of the inbound marketing and lead generation. I worked with the social media strategists to create a full panorama of the redesign. We even had the opportunity to speak with famous Honda Brand ryders in Colombia, Tatán Mejía and Juan Reyes.
Information Architecture
The information architecture was another interesting challenge because the SEO and SEM strategy requires validation of different areas involved in the creation. The marketing team understand the differences between the navigation in the website for the users and the motorcycle client product in references. We had 6 different iterations keeping in mind our user needs and business legal requirements.
Paper Wireframes
In each workshop, we recorded the ideas in paper “wireframes”, having a puzzle of the Honda motorcycles. Then we unite with the team all the pieces to have a first draft of the website with the proto personas, the initial understanding of our users goals, needs, characteristics, frustrations, and personalities.
With this validation, the proto personas and other interviews, we understand the needs of our users, the use of the web, the context in which they would use, and the different categories of motorcycles that the brand offers.
Wireframes and sketch ideations based on the ideas of features
Accesibility (A11Y)
In addition to improving user experience, integrating WCAG 2.1 A into the Honda Motorcycles Colombia website ensures compliance with legal requirements. Many countries, including Colombia, have laws and regulations that mandate equal access to digital platforms and services for individuals with disabilities. By aligning with these accessibility standards, Honda Motorcycles 🇨🇴 demonstrates its commitment to inclusivity and accessibility, reinforcing its reputation as a socially responsible brand.
Prototype
I designed the entire user flow in medium fidelity wireframes with Sketch, then I assembled the prototype in Marvel App to test, based on the information architecture, proto personas and wireframes that I already have.
The new Honda motorcycles website was too diferent from the previous, so I tested it with real users; the new information architecture, the new features, the new categories, and the new services.
See the live prototype tested with users
User Research Test
My main goal was to create a usability tests with 12 people distributed in 4 of each segment. It was a complex job to set up the tests because I adapted a meeting room as a research laboratory; I covered all the windows, connected an external TV with sound where the client would be watching the process in real time, and prepared the testing software. For the user research I use this tools of Design Thinking and we run the tests with:
1. A semi-structured interview to validate the UX persona – 10 min.
2. A usability test using the mobile prototype – 10 Tasks ~ 30 min.
3. A card sorting to validate the information Architecture and users’ mental model ~ 20 min.
Visual design
I created 3 Style Tyles with the help of art directors of the Honda Motorcycle, and together we define the new site’s look and feel. And I think, uhmm we are near to the end…
I created the visual language, the visual schemes, the layout and the interface design with a UI kit to extend all the possibilities to creative team, that supports Honda Motorcycle client.
Content design
We validate the content to the website; the client told us that many of the bikes had changed, the product team added new editions of motorcycles and eliminated others.
At this point the creative team took new pictures, created a 3D photos for the website and designed the headers for ~70 motorcycles. The client wants a personalized image based on the main characteristics of the Motorcycle.
With the help of Dani (account executive) in a midnight hackathon we get all the specifications for the motorcycles, adjust the content and create a new ones.
And finally we delivered the main mockups in Mobile and Desktop to the front-end and back-end developers who used Angular JS and Laravel for the Honda motorcycles UX website.
The Results of Honda motorcycles
On February 5, 2019, we launched the first version of the Honda motorcycles website with a huge impact in their digital sales. The digital marketing team sell more motorcycles than 5 physical stores of Honda Motorcycles.
We increased site visits by 250% in Mobile with a fully responsive website and reduced the bounce rate by 25% with a modern technology and with the standards of the international brand of Honda Motorcycles UX.
We connected the entire inbound marketing strategy with CRM agencies, lead generation, analytics, data generation, and social media networks. This process helps us to understand the end-to-end digital journey of our users.
Visit the Live Site
Update 2023: The original idea of the site that I created remains however I am no longer working with this client and the current site does not reflect my thinking and work on how to scale this design.
What I did Honda Motorcycles?
- Design and moderation of Workshops
- UX persona and features prioritized based on the empathy map
- User research moderated with motorcycle users of the brand
- Wireflows, prototype and low medium and high fidelity Wireframes
- UI Kit, mockups for mobile and desktop versions, including 25 templates and guidelines on how to scale the design
- Accesibility (A11Y) guidelines following the WCAG 2.1 and A criteria
- Create ordering the design and development product backlog
What I learned?
1. Many stakeholders in the project will be more diverse, but the team can lose focus
2. Changes in the marketing team and content always affect the UX of the website, I learned how to handle this
3. Creation and content design always takes time, especially in companies with too many products and photographs
4. Motorcycles move the economy of the most humble people, especially in countries like Colombia
5. The Scrum methodology is a good idea if you have resources and people dedicated to the project
Dates
April 2018 – January 2019
Tools that I used
Post-it
Sharpies
~ 500 sheets of Paper
Sketch
Zeplin
Marvel
Honda Motorcycles Team
- Rubén Ávila H – Product Lead Designer
- Santiago Robledo – Account Director
- Luz Angela Palomino – Honda Lead Project
- Gabriela Rey – UX Designer
- Cristian Paez – PHP Backend Developer
- Steven Piñeros – Front End Developer
- Diego Rodriguez – Art Brand Director
- Wunderman Thompson – Creative Designers
- Honda Digital Team
April 1, 2019