Overview

The second project of my UX Design Immersive course at General Assembly was to design an e-commerce website for a fictional brand. The aim of the project was to understand the complex structure of e-commerce websites, from product navigation to the multistage checkout process and forms associated with this. Using techniques such as card sorting and site maps really helped me to construct an intuitive website, but as always the most valuable technique was continuous usability testing and iterations. I also found it extremely valuable to not only review direct competitors but also learn from in-direct e-commerce sites such as ASOS and Amazon. After all, these are brands who have a huge team of designers and developers continuously updating, iterating and A/B testing the e-commerce process. Sites like this are also responsible for creating the online shoppers’ mental model for online purchasing.

The Challenge

My challenge was to create an e-commerce website for Spokes Cycles, a fictional local independent bike shop in the Spitalfields area of London. Spokes prides itself on the personal touch, on offering high-quality advice and on sourcing niche products that customers request.

Any of the keen cyclists reading this will be happy to tell me my first and biggest barrier to the website design; people rarely buy bikes online. They want to go in store, try it out, see the fit, feel the comfort. Linked to that Spokes outlined clearly in the brief that they will never want to be an online-only store and the aim of the website is more of a supporting tool to the store. Looking at trends in e-commerce and retail, I found an interesting stat, that in 2018, 60% of purchases were influenced by digital. So, although I wasn’t designing a website for Spokes Cycles to become online-only, it is still really important to have a go-to digital source for customers to browse products, gain information and start them down that ever so long purchase funnel.

Working as a solo UX Designer on this project, I followed a user-centred design process involving five different stages and using many different UX tools and techniques.

UX Process: Competitive review | Contextual inquiry & site visit | User interviews | Persona| Card sorting | Site map | User flow | Paper prototype | Digital prototype | Usability testing & iteration | Presentation of findings.

EMPATHISE

I began with empathising with the users to understand who they are, what their needs are and how an e-commerce website can make their interaction with Spokes Cycles better. This phase used several different methods and techniques. I wanted to really understand the cycling community and what is important to them when it comes to bike shops. To do this I started with an online competitive analysis, browsing the websites of both large mainstream cycle brands and more niche independent stores (similar to Spokes Cycles) interrogating the features they had and investigating the navigation design for all the different product types. I kept in mind that changing a users mental model for shopping is not an easy task and if competitors are already doing it well, it's better to learn from them than try to “reinvent the wheel”. I then went on to do some contextual inquiries at local bike stores, speaking to staff members, observing customers and carrying out field interviews with shoppers. Lastly, I did in-depth interviews with two keen cyclists to dig deeper into the themes I saw emerging. Three key insights were:

1. Even the most experienced of cyclist wants advice on what to buy, what new technology is available, and what is best for their specific situation (e.g. commuter versus leisurely weekend cyclist).
2. There’s more to choosing cycling clothing than Small, Medium and Large. Cyclists want to see gear in action, so much so some shops have bikes for people to sit on when trying on cycling clothing. It is all about comfort and fit and this can’t be determined from just sticking with your regular size.
3. Convenience is key when it comes to repairs. Most cyclists can’t bear to be without their bike for longer than a day as it is often their means of transport or form of exercise or even just their escape from the daily routine. Repairs need to be done quickly without much waiting time.

DEFINE

Now that I had gathered all this information and insight, I moved on to stage two, defining what the problem was I was going to solve with my design. The first part of this phase was to combine the key finds of all my user research and field interviews into a persona, a fictional character that embodies the research insights and can be used as a design anchor through the following stages. There is great debate in UX communities these around whether personas are valuable or not. As someone who has worked on many a customer segmentation in my market research career, my view is these are valuable tools as long as you understand their limitations and use them in the right circumstances.

Once I had this, I could start to define what the problem statement would be and build a scenario to design for. The problem statement was:

Mike needs a way to get advice on cycling products he’s buying because he does not feel confident to choose the right ones himself.

A big aim of the website was to allow users to easily navigate the vast array of products Spoke’s Cycles offers. With an inventory of 75 products across bikes, helmets, accessories, kids and other categories, it was important to ensure the site navigation was intuitive, and of course, user-centric. So before starting to build out the site map and navigation, I carried out three open card sorts and two closed ones to ensure I grouped the correct products together and also had the right titles for each grouping.

IDEATE

The outputs of the card sorting along with the aims of the brief and the brand personality of Spokes Cycles all combined to make a simple and intuitive site map and navigation.

Once I was clear on the overall structure of my site I began to build out a user flow based on the happy path of purchasing a helmet, sketching out what the different stages of the journey would be, from landing on the homepage right through to the checkout process.

Prototype & Test

When I had a clear and straightforward user flow built out it was time to put pen to paper and start to prototype and test the site with potential users. I continued to test and iterate the site taking the prototype from low to mid-fidelity using Sketch and InVision for digital prototyping.

For consistency I ensured ever test was based on the same scenario with each user being given three clear tasks:

1. Browse the homepage and describe what kind of site it is

2. Find a suitable helmet and add it to your basket

3. Check out and buy the helmet

The testing provided lots of really interesting findings including:

• Users want reassurance going through the checkout process that they are purchasing the correct product. This was solved by adding an order confirmation page before the user finally commit to the purchase
• Any advice on the site needs to come from real people and not just theoretical experts. Putting a face to each piece of advice on the site (e.g. detailing it is from Joe, the manager of Spokes Cycles) gives the content much more credibility

Outcomes & next steps

This project was a great learning in the complex world of e-commerce, where, in my opinion, it is much more important to stick to a mental model that users are used to seeing from big brands like ASOS and Amazon than create something revolutionary.

If this was a real client project, my recommendations for next steps would be to work with a branding agency to ensure the site matches the store brand personality. I would also recommend testing the site with the store staff as they are the ones on the front line interacting with customers every day and I am sure they would have some useful suggestions on how to make the site as user-centric as possible based on their experience of serving customers.

2.5 week design sprint | Client project | Team of 4

Overview

The final project of my ten-week full-time UX Design course at General Assembly involved a live client project. Having previously worked in consulting and research agencies, I was excited to get back to working with clients who have real business issues and to tackle the challenge of balancing both commercial and user needs.

As an avid plant lover and gardener, I was overjoyed when our client turned out to be the plant care app SmartPlant. SmartPlant is a native app which allows users to take a photograph of their plants to identify them and understand how to take care of them. It has some great features such as a care calendar that sends reminders to water and prune plants, a panel of experts that users can message with questions and worries about their plants and lots of other information and inspiration for both budding (pardon the pun!) and experienced gardeners.

For this design-sprint we worked in a newly formed team of 4 UX Designers over a 2.5 week period, using agile principles to achieve as many of the client objectives as possible.

My role

For this project, my role in the team involved client communication and liaison, user research design, contextual inquiry, in-direct competitor analysis, research syntheses, current app usability testing and heuristic review, prototyping of new features, usability testing and collaboratively creating a presentation of our findings for our client.

The Challenge

The brief we received from our client was extremely thorough and gave us a great background on the business. However, there were quite a few UX objectives outlined for the project so we arranged a kick-off meeting with our client, the app CEO, to chat through his focus and priorities for the immediate future.

After a great session learning more about the business and the direction of the app strategy for the next 12 months, we narrowed down our project scope to three objectives in descending priority:

• The most important aim was for us to design a new feature in the app where users can access exclusive retailer offers and discounts
• Secondly, we needed to review and improve the app subscription funnel as this is what the business model is centred on and needs to be a seamless experience for the user
• Lastly, if time allowed, our client wanted us to do a UX review of the app and share general UX improvements we would suggest based on our research and design principles

We were excited to get started and so worked as a team to plan out a rough structure of the tools and methods that would help us meet all three objectives in the time we had.

Understanding the users and competitors

As this was our first client project as UX Designers, the first thing that struck us all was how commercial the project objectives currently were. So, as our duty is always to ensure we bring the user into the equation, we set about determining how we could make the objectives meet both the user and business needs at the same time. To do this we set about an extensive stage of evaluative research involving:

• A site visit
• SmartPlant user survey
• Plant owners survey
• Plant owners user interviews
• Direct and in-direct competitor analysis

By visiting a local garden centre I was able to observe customers browsing plants and speaking to staff about the different care needs plants have. It was interesting to see that the types of questions continuously asked to the staff were very similar to the answers provided by SmartPlant. At the same time, we also launched surveys to the current SmartPlant user base and to plant owners to get a profile of these user groups, understand their motivations for keeping plants, what frustrations they have and their plant buying behaviours. The survey also asked for contact details to interview users in a more in-depth 20-minute conversation. We had 42 responses to our surveys in total and, as a team, we carried out ten in-depth user interviews.

We compiled the findings of the research and synthesised them using affinity mapping. The findings were extremely interesting:

• There is a desperate need for plant owners to have a go-to source of information and advice about how to take care of their plants
• Forgetting to water plants is the biggest issue people have when it comes to being a plant parent and they would love something to help remind them to do this
• Plant owners sometimes struggle to identify the plants they own and in their gardens can’t tell the difference between weeds and plants

All of this was music to our ears these are all issues that SmartPlant provides a solution to.

There were also some interesting findings that we would need to take into account in our design of the new offers feature in the app:

• Plant buyers are rarely loyal to one retailer, and some don’t even remember which retailer they bought their last plant from
• Plants are bought both online and in-store
• Plant buying is often an impulse purchase rather than something pre-planned and structured

At the same time as doing the contextual inquiry and user research, we did some competitor analysis. My teammate reviewed 6 other gardening apps to compare their proposition, features and usability to those of SmartPlant. Myself and another teammate also looked at indirect competitors such as O2 Priority and M&S Sparks Card to see how their apps laid out offers and discounts, and Spotify and LinkedIn to examine their subscription funnels. Some key learnings from the competitor analysis were:

• None of the plant apps we reviewed offered retailer discounts so the new feature we were tasked with designing could really provide a USP for SmartPlant
• The standard way of displaying offers is having a brief description of the offer, the brand it is associated with, the distance to the store and the time period the offer is available for
• The best subscription funnels offered a clear explanation of the different tier levels and an easy way to compare differences across levels

Reviewing the current app

The last stage of the of our exploratory phase was to review the current SmartPlant app. We carried out short usability tests with seven users asking them to do two simple tasks:

• Open the app, browse the homepage and give us your first impressions of what the app does
• Find out information about the different subscription options available

These tests provided us with some invaluable UX improvements to share with the client (such as clarifying what the icons are on the navbar) as well as helping us understand where there is room for improvement in the subscription funnel. Nearly all users tested didn’t understand what was provided as part of the basic free subscription level and so couldn’t evaluate whether the premium level was worth investing in.

To gather some further UX improvement suggests I also carried out a heuristic review of the app using Neilsen’s Ten Usability Heuristics and provided this as a deliverable for the client.

Synthesising the findings

Now that we had gathered a wealth of information and insights it was time to synthesise these into useful outputs that could be used for ideation and design. The first thing we created were personas to be used as anchors for our design decisions. From our research and discussions with our client, we knew there were several different user types of SmartPlant so we built out to two different personas.

Once we knew who we were designing for we needed to determine what problems we were focussing on. We started by creating a storyboard of our persona in a situation where they are looking to buy new plants.

We then built out “How Might We” statements that could be used to ideate from. To ensure our ideation was both user and commercially focussed we ran two design studios with the four members of the SmartPlant team.

The first design studio was focussed around providing retailer offers for users and the second was based on helping our persona to determine which subscription tier was most suitable for his needs. During the two hour session we came up with loads of brilliant and creative ideas and built a long list of possible features we could design.

Testing, iterating, testing, iterating, testing…

We then came together as a team and did a half-day workshop to synthesise the outputs of the design studio and build out a wireflow for our design. Once we were clear on where we were focussing and which features we would include in our MVP we sketched a paper prototype to start getting user input.

After some thorough testing with users, we had some clear areas for improvement, such as where the offers section sits in the app and how we guide users to it. We iterated and took the prototype to low fidelity digital using Sketch. Lots more testing and iteration cycles continued, ensuring we captured both positive and negative experiences with the prototype to help us with our design decisions.

Final deliverables

Our final client deliverables involved a 20-minute presentation of our findings and design process, an interactive prototype of the offers feature and new subscription comparison page and several detailed documents outlining suggested UX improvements and other research findings.

The SmartPlant team were extremely happy with our work, especially as they had done very little user research before. We’re all really looking forward to seeing the updates made to the app this year based on our work.

The brief

The in-flight experience of a long haul flight is something people either love or loathe. Many people like being cut off from the world for several hours, watching the latest movies and availing of the unlimited snacks and drinks. Others find being confined in one space and having to sit still for such a long time painful and boring.

With many airlines moving their booking, check-in and boarding pass process onto a branded app, our brief tasked us with further digitise the flying experience by creating an app for the in-flight experience on Qantas, Australia’s national carrier. This was the first team-based project of my full-time UX Design course at General Assembly, which brought challenges in itself, but all-in-all we carried out a successful two-week agile design sprint.

My Role

My role on this project was focussed around user research design and syntheses, facilitation of a team design studio, usability testing different fidelities of the prototype, creating app brand values and building out the story of our final presentation of findings.

Understanding the context

Although all of us in the team had flown long haul previously we were conscious of not falling into the trap of thinking we were the users. We wanted to build out a detailed understanding of the context in which the app would be used and really identify a user need to design for. As a result, we carried out three different research stages:

• User interviews with long haul fliers (in the past 12 months) both business and leisure to understand their perceptions of the experience
• A short airline staff and travel consultants survey to understand what requests and feedback they get from long haul fliers
• An in-depth review of competitors’ apps to see what services they provide and how they structure the different features

After synthesising all the findings using an affinity map we came up with some very interesting findings:

• Although there is potential to digitise the entertainment (films and TV) part of the in-flight service, there isn’t really a burning issue to solve with what is currently provided
• The more prominent issue is that passengers on flights aren’t getting the personalised service they are used to in other parts of their lives (e.g. food delivery services)
• Linked to this, the biggest finding we had is that people do not want to use the call bell on a flight as they view it as rude and demanding

In recent years people’s mental model for services has moved from “I will take whatever service is provided to me” (think terrestrial TV with a set schedule) to “I want to customise my service to my needs and requirements” (think Netflix). Although there is some room for customisation of the in-flight service, such as requesting vegetarian meals, fliers cannot choose when they receive their food and drink…except if they use the call bell. However, this was not something any of our users were willing to do. They would prefer to sit in their seats gasping for water and wait until a flight attendant happens to walk by, no matter how long that might be, instead of requesting the attendant to come to their seat to hear their demands.

Defining the UX Challenge

These findings really started our creative juices flowing about the possible services we could include in our in-flight app to meet the users’ needs that they didn’t even know they had. But before we got carried away we wanted to be really clear on who and what we were designing for. We created an experience map to understand the different stages of the journey that the user goes through and where the actual issues that needed solving were.

We then combined our research findings into a persona to anchor our design decisions on.

To further understand our persona, we built out an empathy map of what she thinks, says, does and feels when on a flight. Finally, we distilled all our findings and analysis into a single problem statement to focus our design on.

Ideating as a team

Once we were clear on our objectives we could begin the ideation. To ensure we listened to and built on all ideas across the team we ran two design studios. The aim of a design studio is to generate a lot of ideas in a short period of time using structured sketching exercises, starting with individual sketching of six ideas to solve our identified problem, then iterating to a single idea each, and finally dot voting on preferred features of each idea to come up with a final solution.

There were lots of great features we could include in this process based on our research and ideation, such as an estimated order delivery time pop-up, an onward journey information page, an in-app call button, a passenger to passenger messaging system, a do-not-disturb button for when users were sleeping and many more. Although we would have loved to fully build out and test all of these potential features, our two-week timeline would only allow us to focus on an MVP. To determine where we should focus our efforts we carried out a feature prioritisation exercise. We used a matrix that looked at essential versus nice to have features and then overlaid the amount of effort each feature would take to design.

Our final solution was centred around the experience of a user requesting beverages while on a flight through a native airline app, rather than pressing a call bell for an attendant to come and take their order. Once we had a clear idea of what our solution looked like, we built out a user flow of the happy path we wanted to focus our design on. We then created a paper prototype so we could start to get user feedback as early as possible.

The user feedback was invaluable in identifying areas of the happy path that we, as the team immersed in the project, were very clear on, but caused great confusion amongst users.

Once our paper prototype had been thoroughly tested, we moved to digital using Sketch and then again tested lots of iterations with users using InVision. Each version of testing revealed more and more valuable insights. We kept track of all our testing and findings by firstly using an excel sheet that allowed us to quickly identify common themes across multiple interviews (ensuring we weren’t making updates just based on a single user) and then wrote up our findings on each iteration using a green, amber red system. Green was positive feedback several users had about a feature (something often forgot about when iterating but can be invaluable when thinking through design decisions at later stages), amber was feedback that was a nice-to-have update either because it wasn’t said by the majority or because it didn’t impede the user from completing their task, and red was serious issues identified by a large portion of users that really needed to be changed.

One addition to the prototype that came from the testing cycle was to include a concise and clear onboarding process when the user first launches the app as using an app for in-flight services will likely be a new experience for many.

Branding the App

Once we were happy with our iterations it was time to take the app to high fidelity. We had the Qantas brand colours and typography to use, but we also wanted to put our own brand values on the app. At the end of each usability test, we asked users to describe, in 3 words, a really great flight attendant experience they had. We then used these to build out the brand values of our app as we wanted the app to be part of the flight attendant experience.

As well as using the Qantas brand guidelines we built an app Style Guide so we were consistent with our colour palette, typography and iconography throughout our prototype. We did one last round of testing with the high-fidelity prototype to be sure the branding didn’t affect the user journey or cause any accessibility issues and then it was time to create a story about our design process and findings to present to our class and instructors.

Deliverables

The main deliverable of this design sprint was a 15-minute presentation of our key findings, showcasing the final prototype we had created. As I have quite a bit of experience from my past market research career creating story-led presentations for clients I took the lead on this stage of the process. The biggest challenge was actually distilling everything we had found out and done in the past 2 weeks into a concise and compelling story. We focussed the whole presentation on our persona to keep it user-centred and opened with a hook asking the audience if any of them felt comfortable using the call bell on a flight. Like our users interviewed, most didn’t. The presentation ended with a context-based demo of our final prototype, asking the audience to imagine they are on a flight with our persona and taking them through the experience of using an app to order drinks while onboard.

The presentation went down well with our audience and they praised our focus on the user and storytelling skills.

Reflecting on the process

After presenting our process and prototype as a team to our class, we took some time to do a retrospective to ensure we captured all learnings of the process as well as thoughts about what we’d do differently in our next project. Since it was the first group project of our course, a lot of learnings were about how to work in a flat structured team, ensuring everyone’s view got across, nobody dominated and decisions were still made. Things that had worked well in the process were communication tools like daily stand-ups and brainstorming as individuals and then coming together as a team to discuss and make decisions. It was a really valuable process and we all took our learnings into our next group project and team working experiences.

Overview

As our first project in my10 week General Assembly UX Design Immersive course, we were tasked with doing a design challenge based on one of our classmates favourite interests. We needed to go from formative user interview to a basic prototype in the first week, and then create an app brand and style guide in the second week, delivering a high fidelity prototype at the end.

The design process took on a sprint style, using different UX Design tools each day, moving through the infamous design framework; The Double Diamond.

Discover

I was lucky enough to be partnered up with the lovely Carlota who picked fashion as her interest of choice. Music to my ears as I’m a self confessed shop-a-holic. But I must not forget Golden Rule #1: You are not the user!

Golden Rule No #1: You are not the User!

Carlota is a stylish lady who likes to look classy and fashionable when going out for dinner, going to events or attending professional occasions. She gets her fashion inspiration from style icons she follows on Instagram. My ten years of market research experience kicks into action and I begin exploring the journey from spotting a celeb outfit on Instagram to the actual product purchase. She has a well-honed process that takes her from eye-wateringly expensive designer inspiration outfit to high-street look-a-likes within her budget from her favourite brands’ websites.

“I go to the brands I know. I know their clothes fit my shape well and don’t have to worry about the size being wrong”

It all seems like a well-oiled shopping machine so far, but then Carlota talks me through the browsing process on the brands’ websites. She can often search and scroll for a long time to find an outfit similar to the one she saw on Instagram and after all that effort her size might be out of stock. She is a determined shopper, so she then goes on to the next brand website and the next and the next until she finds something she can buy. My “design senses” prick up. Could this be where an app could fit into and maybe even improve Carlota’s life? But then I realise I’m breaking Golden Rule #2 of the discovery phase: focus on exploring problems, not finding solutions.

Golden Rule #2: focus on exploring problems, not finding solutions.

To truly unpick the shopping process and ensure I analyse all potential opportunities I build an experience map of Carlota’s last online shopping experience, taking one stage of the user journey at a time and building out the individual tasks involved and the emotions associated with it.

Once mapped out it becomes clear what problems could be solved with a new app design and I settle on the problem statement of:

Carlota needs any easy way to find cheaper versions of celebrity outfits because searching by keywords on individual websites is time-consuming and not always successful.

Now for the creative juices to flow. I began with some quick sketches of a broad range of ideas trying to remember Golden Rule #3: There is no idea too wacky.

Golden Rule #3: there is no idea too wacky

At this early stage of ideation, it was just about getting lots and lots of ideas to solve Carlota’s problem. Reality checks and refinement can come later and often the wackiest idea can turn out to be the most sensible after a bit of refinement.

My ideas took on multiple different forms, a search aggregator, a photo analysis tool, a “high-street suggestions” magazine and even a second-hand websites where celebrities would sell their clothes…I quickly realised I was too late to the party on that one.

After some more user testing with my classmates, I narrow my concept down to an app that enables searching multiple brands by a particular celebrity look and then displaying results filtered by size and budget and only showing those items that are in stock. This would enable Carlota to search all her brands in one place and only show her options that suit her needs and are available to buy. No last minute disappointments and hopefully she ends up with a new outfit at the end of the story.

Develop

Now that I had my idea solidified, I was dying to get designing. But first I needed to understand what Carlota’s user flow would be in the app so I built out her Happy Path; the ideal flow I would expect her to have through the app. I mapped out each individual screen she would see and then added the different actions I would expect her to take to move from one to the other.

The user flow made perfect sense (to me) and so I started sketching wireframe to help me create my paper prototype. The excitement was definitely building and I was so happy with my process and I almost forgot Golden Rule #4: check in with your users at every stage possible.

Golden Rule #4: check in with your users at every stage possible

Thankfully I reigned in my enthusiasm (and ego) and went to test my paper prototype with four different users.

I got so much valuable feedback I can honestly say it was my favourite part of the whole process. Watching users interact with the different screens, seeing the surprise and/or confusion on their face when something wasn’t as expected and hearing them talk through their mental model of online shopping was invaluable. I had a real “aha moment” when I was struggling to find a way to concisely describe what the app actually does. My market research experience kicked into full swing and I realise I should just ask the users! “Consumer language” was something I would always lecture my clients on in the past and now I was so excited about designing I’d almost forgotten it myself. At the end of every interview I’d ask the participant how they’d describe the app to a friend. So simple but yet so insightful.

Deliver

After listening back and condensing all the user feedback into actionable insights I started to work on the refinement. Some updates were so obvious I was kicking myself for not realising (“Where is the back button on the basket screen in case I’m not ready to check out”) and some I would probably not have thought of myself. Once all the iterations were made I used the Marvel app to create a simple interactive prototype that could be used for further testing.

This completed week one of our design sprint and I really couldn’t get over how much can be done and learned in five days.

App brand and high fidelity

Now that I had a clear idea of how users would move through my app and what the basic layout of each screen would be it was time to think about the UI of my app and how I would bring that to life in high fidelity.

I began by creating an elevator pitch for my app, based on how the users had described it to me during user testing.

Now that I was clear on exactly what my app did it was time to flesh out what the app stood for in terms of brand values. I used different branding tools such as a moodboard, brand personality statements and even created some brand voice statements that could be used as content in the app.

Now that I was clear on what my app brand was, it was time to build the style guide and take the app to high fidelity. Using colours from my moodboard I decided on a colour palette and typography to suit my brand personality and then using Sketch I applied this to my digital prototype, making sure to test for any accessibilities issues around colourblindness when the colour palette had been applied.

Learnings

All in all, it was a really interesting, thought-provoking and exciting process. Hindsight is a great thing and using my Growth Mindset there were loads of places where I did the wrong thing and gained super valuable learnings that will stick with me in future. Some of my market research colleagues will testify to my saying “you never remember the projects that went smoothly”. I suppose that could be Golden Rule #5 (borrowed from the late Steve Jobs): Failure is the best way to learn.

Golden Rule #5: Failure is the best way to learn.