Project Type: Hi-Fi App Prototype
Role: Sole UX/UI Designer
Industry: Health, First Aid
Tools: Adobe XD, Figma, Trello, Pencil & Paper
Timeline: June 9th - June 30th 2024
Embedded Files
Background Info:
Who is Keep>Going First Aid?
Who is Keep>Going First Aid?
Keep>Going First Aid is branded as a company for moms by a mom. The main target of this company has been moms (dads, grandparents, family) with a smaller focus on nurses, teachers, and other professionals in child centered fields.
What is the goal of this project?
What is the goal of this project?
The goal of the Keep>Going First Aid app is to expand the target audience for the brand by creating an accessible and desirable mobile application that enhances the brand's usability and convenience.
Discover
Discover
Who is the brand's current target audience?
Who is the brand's current target audience?
The current target audience for Keep>Going First Aid is anyone age 20-45 who has, or is around multiple children, and is physically active. Families with children that enjoy things like hiking and running, teachers who teach and supervise children, or nurses who take care of sick and injured children are all people who fit into the brand's current audience.
What new audience could we target to expand the brand?
What new audience could we target to expand the brand?
Considering that the brand currently targets families and professions where children are involved in some sort of physical activity that may cause them to get hurt, why not also include other individuals who are frequently physically active?
Considering that the brand currently targets families and professions where children are involved in some sort of physical activity that may cause them to get hurt, why not also include other individuals who are frequently physically active?
This could include people who play sports, participate in outdoor activities, work around sharp or potentially dangerious objects, and even more.
This could include people who play sports, participate in outdoor activities, work around sharp or potentially dangerious objects, and even more.
So, after filling out a "Point of View" form, I decided that the audience I would target for the brand's expansion was going to be individuals of all ages who are physically active in any way, shape, or form. This expansion would largely benefit Keep>Going First Aid's brand and offer them tons of more profit and potentially happy customers.
So, after filling out a "Point of View" form, I decided that the audience I would target for the brand's expansion was going to be individuals of all ages who are physically active in any way, shape, or form. This expansion would largely benefit Keep>Going First Aid's brand and offer them tons of more profit and potentially happy customers.
What is the brand's current style?
What is the brand's current style?
The Brand's current style is very organized and stylish. They use a rounded sans-serif font known as "Como Bold" and "Como Extra Bold" for their Headings and Sub-headings in contrast to a body font known as "Raleway" for the text content of their website. The brand also uses the colors Navy, Turquoise, and Peach to create a very unique color scheme for their brand and website.
Define
Define
How might we target a new audience while maintaining our current one?
How might we target a new audience while maintaining our current one?
Although the main goal of this project was to expand Keep>Going First Aid's target audience, I still wanted to keep the brand's current audience in mind. So, I sat down and brainstormed some "How Might We" questions to help guide me in the next phase of creating the protoype. I knew that I wanted to stay consistent with the brand's current style so that I wouldn't scare away any of the current audience by making too many changes. However, I wanted to make enough small changes to the interface and layout of the app so that it would attract and engage a new audience, and be more convenient to use than the actual website.
Understanding the current audience...
Understanding the current audience...
In a better effort to understand some of what Keep>Going First Aid's current target audience enjoys about the brand, I interviewed a parent who has 2 children that are relatively young and frequently physically active. I asked her to list some things they like about Keep>Going First Aid's website and brand, some things that she wishes were different or better, and some hypothetical "What if" questions for things that she personally would add or change about the brand and website.
Conducting this interview gave me great insight on what kinds of features I should add, keep, or change for the mobile prototype that I would soon start to create in the next phases of the project.
At this point, I knew that I wanted to:
Incorporate as many features from the website that the current users like as I could
Organize the mobile app in a way that satisfies many of the current users' wishes
Explore some of the users' "What if" suggestions and proposals that might enhance the app's overall performance
What makes a good app?
What makes a good app?
As important as it was for me to understand the current audience of the brand, and to get an idea of how I might go about expanding that audience, it was just as important for me to actually know what a good app consists of. Before I could start to visualize some layouts and designs for the mobile app, I needed to map out some chracteristics of a good user-centered app. So, I created an affinity map and organized some of the main themes that make an app satisfying for users.
Keeping the all of the findings I'd gathered from the research above in mind, I was able to move on to the next phase of the project with a much more clear idea of how I'd be able to expand Keep>Going First Aid's audience while still catering to their current users.
The main aspects of the app that I wanted to focus on were:
Organization - having a neat and easy-to-navigate user interface
Style - maintaining Keep>Going First Aid's aesthetic
Convenience - making the app more accessible and efficient than the website
Usability - assuring that users can effectively use the app
Desirability - captivating both the new and current audience
Ideate
Ideate
Visualizing the new target audience...
Visualizing the new target audience...
Now that I'd established an idea of who I could expand the current target audience to, and how I could potentially go about executing the process, it was time for me to start visualizing a more realistic and thought out approach. The first thing I did was create a user persona of a potential target for the expansion. Having the user persona makes it easier to empathize with the desired audience and gain their engagement and support.
After creating the above persona to represent the target audience for expansion, I also went ahead and created a customer journey map based on the persona.
The purpose of the customer journey map was to simulate the experience, thoughts, and feelings that a user from the new audience may have when going to search for a first aid kit from Keep>Going First Aid's website. It shows the user's actions, touch points, feelings, and more.
Drafting the mobile app...
Drafting the mobile app...
When drafting ideas for the mobile app prototype, I started off with a mood board. The mood board served as a visual reminder of the goal for the style and feel of the mobile app. It was very important to me to remain aligned with Keep>Going First Aid's current style.
After creating the mood board, I moved on to mapping out a user flow chart for the mobile app. The user flow gave me a more in depth sense of what a user's experience would potentially be like within the mobile app, which would allow me to design and organize each of the prototype screens accordingly.
Establishing the user flow for the app served as the blueprint for my next step, which was paper prototyping. I sketched some ideas for the screens of the mobile app, and how interacting with each screen could transition to the next screen. I used Keep>Going First Aid's website as a reference for the mobile screen layouts, and the user flow chart as a basis for each interaction between screens.
After creating the paper prototype, I decided to build onto those sketches and create a lo-fi wireframe out of them. The lo-fi wireframe is slightly more refined, with not many changes. This is because one of the main goals of the prototype was to maintain the brand's current aesthetic and style. So I did not want to change the layout of the app in any way that might appear too abstract when compared to the website.
After drafting the app, I knew that I wanted to:
Incorporate the brand's style while maintaining a layout that resembles the website
Alter some elements of the style, such as changing straight edges to rounded corners, for a more unique and stylish appearance
Implement the qualities listed in the "What makes a good app?" section of the Define phase
Deliver
Deliver
Hi-Fi Prototype
Hi-Fi Prototype
Using all of the information I gathered in the Discover, Define, and Ideate phases of the project, it was now time for me to create the final high fidelity prototype.
For this step, I relied heavily on:
Keep>Going First Aid's Brand Style Tile and the mood board I created to help me with the design of the app's user interface and color palette.
The "I Like...I Wish...What If" interview conducted in the Define phase of the project
The affinity map I created to organize traits and qualities of a good user-centered app
The customer journey map and user flow chart I created to simulate a user's experience with the website and mobile application
The paper prototype and low fidelity designs created in the Ideate phase of the project
I combined all of this information in order to develope the high fidelity prototype shown below.
Project Reflection
Project Reflection
Overall, I am content with how the high fidelity prototype turned out. The goal of this project was to create a mobile app for Keep>Going First Aid that would help to expand the brand's audience, be consistent with the brand's current aesthetic, and enhance the overall desirability and convenience of the brand itself. The hi-fi prototype covers a large amount of the qualities that I was looking to include from the previous phases.
In the high fidelity prototype, I was able to include:
Keep>Going First Aid's signature color palette (Navy, Peach, and Turquoise)
An organized and user-centered interface design that resembles the website
A convenient and straight-to-the-point experience
Suggestions from the "I Like...I Wish...What If..." interview, such as the brand's products being listed first on the home page, a "Reccommended Products" section, and a more noticable search bar
But, there are still great opportunities for growth. For example:
During the Define phase of the project, it may have been more helpful to also conduct user interviews for people who fit into the targeted audience for expansion. This might've allowed me to gain greater insight on any changes I could have made to effectively reach a new audience.
During the Ideate phase of the project, it may have been useful to sketch different ideas for the user interface of the app. This may have better ensured that I created the most efficient and user-centered design for the prototype.
So, the question left to answer here is...
What have I learned?
What have I learned?
My most important takeaways from this project are:
The more research, the better. User research is a strong and valuable part of the design process. The interviews, customer journey map, user flow chart, and other research I completed in the Define phase of the project played a key role in the final, high fidelity design and functionality of the prototype.
Explore ideas without limitation. I sometimes tend to stick with the first idea that comes to mind. In this case, because one of my goals for the prototype was to maintain the same style as Keep>Going First Aid's website, I didn't explore many options for different user interface designs. In the future, I will sketch and explore more ideas before picking a fixed design.
Google Sites
Report abuse