Week 6: Prototyping “& Baby”

Figure 1: & Baby Logo (Antonio Jackson-Perkins, 2021)

I have previously written about rapid ideation and how I used to mind-mapping exercises to generate and develop ideas for my two week prototyping challenge activity. I found it challenging to spend time on this early development of ideas as I am a very visual person I do often prefer to work backwards a little. I did find this very useful though, and I would like to develop my rapid ideation techniques more in the future, even using different techniques other than mind-mapping, or by combining different methods.

Once I was happy with the final idea and storyboards, I set myself the task to use Figma for the first time. I knew that my finished prototype would be a series of images from different pages of the app, rather than a working app. Whilst the temptation was to revert to Adobe Illustrator as my go to software, I had set myself a SMART goal to learn the basics of Figma.

I think I still have a long way to go before I can say I have mastered this software, but I felt that I had an advantage as I am already used to working with layers and groups from Illustrator. I was very happy with my finished prototype, but I would love to fast-forward into the future when I understand the abilities of Figma and Adobe XD, and see how far I can take it.

Figure 2: Prototype of ‘& baby” app (Antonio Jackson-Perkins, 2021)

My interpretation of the card was to create a retail site for people who are pregnant or new parents. I recognised the card highlighted the difficulties that can be encountered that might not have been considered during pregnancy. I saw this as a great opportunity to create a unique retail experience that offers the user a retail journey that also encourages a sense of community, belonging and support.

I wanted to show four different pages of the app to not only show some of the features and content, but also the aesthetic cohesiveness across the pages. I wanted to ensure that this app was gender neutral and did not revert to a purely mother/baby direction. I want this app to be used by all parents (or parents to be). I achieved this firstly by calling the app ‘& baby’. I used a neutral background with pops of colour and tonal accents throughout, sometimes from boxes or buttons, but also through imagery. From my earlier challenge activity where I looked at ASOS, I had researched many online store fronts, and noted that this was a common layout.

I wanted to keep a group of buttons static at the bottom; the home button, navigation, shopping cart and my profile. In addition, I have a help button centred a the bottom of each screen, this is highlighted with a yellow background and is positioned in the middle for ease of access. Pressing the help button gives the user the option of going to the forum to find answers to a problem, or to directly contact an experienced advisor. This is not intended to be technical help, but help for problems that may arise with pregnancy or with a new baby.

The first prototype page shows an example from the retail page. As with ASOS, I wanted to allow the user to be able to go directly to categories, capsules or sales. Of course there is the option to use the search bar at the top of the page, or the navigation button. However from a retail perspective, grouping into stories is a useful way of focussing the product.

The second prototype page shows an example of what the home page might look like. Here we have linked directly to ‘shop for baby’ or ‘shop for parent’ but also has links to the community and advice sections.

The ‘my profile page’ has a place to upload an image, and has the usual links to ‘my details’, ‘my orders’, ‘my returns’ etc. I also wanted a place where any advice bookmarked by the user can be accessed.

Finally, the last page shows an example of the front page of the community forum. This would be broken up into categories and is a place to connect with other parents, share news, information, help and advice.

Reflection

I am very happy with my finished prototype, and also my first attempt at using Figma. I’m certain that there is a lot more to learn and I perhaps relied to heavily on using Figma as a substitute for Adobe Illustrator. I created all my graphics in the latter and imported rather than drawing directly in Figma. I’m sure this is a standard practice, so I’m not going to worry about that too much. If it speeds up the process of prototyping by using software that I am experienced at, then surely that makes sense.

I’m definitely more happy with the concept and it’s connection to the source of inspiration than the final prototype. I often look at what others do and punish myself when it looks different, or inferior (in my opinion). My goals for the coming weeks are to build upon this first experience of Figma, and perhaps look at Adobe XD and understand the differences and benefits of working with each.