Creating a flexible design system for a responsive e-zine

For this project we were briefed to design a responsive editorial website that meets the needs and goals of a specified persona. The final design should include a consistently branded experience, applying an atomic design system.

The specified user persona we were given was Promising Paula, a young and ambitious creative who reads voraciously. To understand her better we expanded and added detail to her persona.

She wants to connect with other artists online and build a network ahead of her upcoming expo. Her goals are to be cool by reading the most influential authors and staying in touch with the latest trends so that she can post relevant content on social media and grow her following. But she finds it difficult to find original content about trends before they become mainstream. She would really like to have a single, reliable source of online information.

Research to define the problem

With this persona in mind we did a journey map considering a typical scenario for Paula. She is excited about her expo and wants to do research into upcoming trends, artists to follow and find exciting events to attend for networking opportunities.

We identified her specific pain points which included excessive advertising, unreliable content, and difficulty finding less mainstream information. Articles written by artists for artists.

The journey map highlighted opportunities that led us to our problem statement…

Emerging artists and trend setters need a way to find reliable online editorial about undiscovered talent and interesting events because they want to stay ahead of the curve and be creatively relevant on social media.

With our problem statement defined we did a competitor analysis to see what similar e-zines are doing. We picked up that all of them had advertising. Advertising implies content that is “advertising friendly” and therefore not 100% authentic.

A feature comparison showed us that all competitors have social media integration and contributor profiles.

With this information we used a Moscow map to help us to prioritise what features our minimum viable product would include.

Our MVP would be an editorial website that will enable users to discover new and interesting art and creative trends before they become mainstream. The website will publicise upcoming events where like-minded artists can meet to network and inspire each other.

Ideation

To understand how these features came together we created a site map which defined the information architecture and hierarchy.

We then considered a user’s navigation behaviour while engaging with the editorial content. We thought about what Paula would read and what would lead her to making a connection with a contributor. We identified 6 specific decision moments.

This defined our happy path which we used to create concept sketches and there after low fidelity wireframes.

Our low fidelity wireframes detailed each screen in the happy path. We used these sketches for concept testing before digitising the design as a mid fidelity in Figma.

The mid fidelity included more detail and we started developing components, structuring the content using auto layout, with responsive design in mind. Usability tests done with Maze highlighted some UX issues.

These heat maps show how users were trying to use the article title to navigate, which we then changed to be clickable. Users were also clicking on the event date rather than the button when asked to add it to their calendar, so we removed the button and added a calendar icon to the date and made it clickable.

After making these adjustments we tested again and when asked, 100% of users found the site easy to navigate over all.

Design

Visual identity

Before beginning the high fidelity design we did a visual competitor analysis to ensure the aesthetic of our e-zine was on point. We observed the use of understated typography, limited colour and structured card layout. These all help the user to quickly find what they are looking for without unnecessary distraction.

We then curated a mood board to capture the feel and attributes of the brand that we were ideating with the attributes: inspiring, credible, authentic, connected and witty.

We did product reaction tests and adjusted based on the feedback to ensure our mood board was accurately communicating the brand attributes. From there we worked on the visual identity of the website. The style tile consolidated a brand identity that supported the ideation process and brand attributes.

We named the e-zine “Edge”, which communicates the creative intention of the brand. The name speaks to artistic disruption and inspiration. The bold and simple logo design is recognisable and memorable.

A minimal colour palette of black and vermillion is designed to work well with content that is very visual, including diverse photographic and artistic editorial images. Black is the primary colour used for main type elements. It is the colour of newsprint and feels reliable and strong. The secondary colour is vermillion which is passionate and emotive. It is used as the functional colour.

Typography style is classic and supports the credible editorial brand personality. A modern serif is paired with a “no-nonsense” san-serif, both open source and web-friendly.

The icon style is simple and scalable. We designed original icons rather than using a library as we wanted to capture a light clean feeling in the icons and apply consistently.

To support the design process we consolidated all of the editorial content in a Google Sheet. This worked well while working collaboratively and managing multiple instances of articles across the e-zine. We highlighted the name of our featured author.

Designing for flexible and responsive layout

Using our brand guidelines we created a UI kit including article cards that worked within a flexible grid system across multiple screen sizes. Following an atomic design system the cards were composed of smaller, consistent elements that were used across the website.

Desktop was designed as a 4 column, tablet as a 3 column and mobile as a 1 column grid. Across all screen layouts the column was a consistent width to accommodate a common card design. This helped to automate the responsive design process with the use of auto layout.

A demo of the final product

This is a video showing the design and functionality of the desktop version using a 4 column grid.

See the design applied to a mobile screen with a 1 column grid in this demo.

Next steps and learnings

Our desirability tests revealed positive feedback. Most users found Edge creative and clean. Many also commented that it was accessible, attractive, inspiring and energetic.

As a next step we would complete the tablet and mobile high fidelity and then test, implementing user feedback. We also have more ideas about networking capabilities on the site.

As a duo-team we had fun problem solving and learnt so much about Figma and how to express design ideas using micro animations and prototyping interactions. And Figma shortcuts are amazing!

Case study: A responsive editorial website was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

YouFit is an online exercise aggregator

Despite the vast availability of personal metrics and health apps, people continue to struggle to maintain a healthy lifestyle. To address this problem we were briefed to develop a wellness app that could encourage individuals to commit to personal wellness goals. The app should drive people to action, track their progress and thereby encourage them to commit to healthier life habits.

The wellness category is quite diverse, so my team chose to focus on exercise and fitness, designing an app that was inspired by the online exercise trend that has been amplified by the restraints of lock down.

When it comes to online exercise, Youtube offers extensive variety, but other exercise apps provide a personalised and curated experience. We wanted to design and experience that improved on what is already available. Some initial market research lead us to the idea of an online exercise aggregator.

People’s lives are busy and time for exercise is often limited so we set out to design an app that could offer the user choice with access to variety, but simultaneously minimise the frustration of search time. We named our app idea YouFit.

Research

To validate this idea we did a competitor analysis, looking at other online exercise channels available. We compared Strava, Deliciously Ella, Nike Training Club and YouTube. All of the apps that we looked at offer the user a personalised experience while YouTube does not. However YouTube wins on variety but doesn’t offer the same beautifully designed and curated experience.

In addition, a feature analysis highlighted that YouTube has no personal filters, goal setting or tracking options, but it has user ratings and recommendations which not all other apps include. This confirmed that we had indeed identified a gap in the market.

With this in mind we conducted an online survey to learn more about user exercise habits and preferences. Over 60% of users exercise 2–4 times a week. Over 70% of these users are using online exercise routines if they don’t go to the gym, with and astounding 60% using YouTube for online exercise.

To get qualitative information we conducted a series of user interviews. We wanted to know more about what motivates people to use an exercise app, what kind of exercise do they use an app for and how do reviews influence their behaviour. We were also curious about their views on social media integration and how a rewards program could motivate user engagement. Our interviews revealed that ratings definitely matter, users like the idea of rewards, and users are not that excited about social media integration due to privacy concerns.

A brand positioning map reconfirmed the gap in the market and clearly showed us where we want to position our product. We wanted our exercise app to deliver a personalised experience while offering exercise content that is as diverse as YouTube.

To ensure that this app idea is successful and not only attracts new users but also retains them, we did a “jobs to be done” exercise by identifying what jobs customers would be trying to get done while using our app. The primary job would be to access workouts when unable to go to the gym. But this is a basic fitness app job and we wanted our app to be unique in its offering.

In addition to doing this job, the reason why our app would be hired and other fitness apps fired is because our app would also

1. Provide variety, keeping users motivated and not bored
2. Save them search time by serving relevant content quickly with personalised filters as well as integrated user feedback
3. Allow them to set goals and track their personal progress

Furthermore, we realised that the success of creating a personalised app experience would rely on serving perfectly appropriate content to the user. The secret to getting the filters and algorithm to work would be user reviews, and lots of them. The reviews would also be our key to hosting the content on our app. Exercise video content creators would be getting views and reviews through our app, making it a win-win relationship.

And so the idea for our rewards system was born … our app will reward users for submitting reviews. With user reviews being the key to our app being accurate and thereby successful, the rewards could ultimately be more than just a cute badge icon that can be shared with fellow app users. We would be able offer real rewards like discounts from associated partners and potentially even a free subscription to the app.

Empathising

With our ideas formulated we needed to focus on the details of the user experience. We worked on a user persona called Fitness Fiona. She is a young professional who likes to stay fit and healthy but struggles to make time to go to the gym. She usually trains at home which gives her freedom and flexibility and she likes to track her progress as a way to stay motivated. But she finds the content on YouTube a bit overwhelming and she wastes time searching. Other fitness apps work for a while but then start becoming limited and boring in terms of content.

In a user journey we considered a typical scenario: Fiona browses YouTube but gets annoyed by the time consuming search and advertising. The user journey helped us to highlight specific the opportunities for our app offering.

The value proposition canvas helped us understand how our product could fulfil the jobs to be done and meet the needs and satisfy the goals of our user through its distinctive features and services such as personalised filters, user reviews, goal setting and progress tracking.

Defining the problem

With all this information we could define a problem statement for our idea:

Active professionals choosing to exercise online need to find a way to filter extensive online content and personalise search results because they want to enjoy variety without getting overwhelmed by options.

Using a Moscow map we defined an MVP that would include all the basic features to address this problem statement:

An exercise-content aggregator that will enable users to access the variety of YouTube in a personalised app environment.

With smart filters, user reviews and recommended content, the app provides the user with a personalised fitness routine. Staying motivated is made easy with progress tracking and a rewards programme. A pre-emptive chat function adds gamification while offering the user fitness information and advice.

Ideation

This site map shows our preliminary content architecture and hierarchy. The app is divided into four main areas: The Home Page where filtered content is aggregated, Saved Workouts, Progress Tracking and the Rewards.

To fine tune our idea before beginning concept sketching we thought about the user’s navigation behaviour while engaging with our fitness app. We ideated a happy path which incorporated all the features of our MVP.

When drawing out the user flow based on this happy path we identified 6 decision moments which showed us where we would need to consider the user’s engagement with the app. They included searching for a workout, choosing a workout and then saving it, reviewing it and then checking their rewards and progress.

As a team, we created concept sketches independently and then combined our best ideas in the low fidelity. We then did testing to identify any initial UX issues. The low fidelity also provided us with vital reference for the digitisation and design process in Figma.

With our mid fidelity ready, we conducted more user testing. The main insights related to user expectations of a native iOS app. We needed to review navigation between screens which we resolved by adding a back arrow. We also addressed the micro interactions of our intensity rating, allowing for direct and progressive selection.

Design

A visual competitor analysis gave us insight into design, functionality and gamification. To kick-off the visual design process we brainstormed brand attributes and created a mood board. Product reaction tests confirmed that we were accurately communicating our brand personality.

This style tile summarises and consolidates our brand identity. The logo was designed to feel modern and sporty. It is easy to read when displayed really small but also striking when displayed full screen. Inter is the typeface chosen. It is an accessible typeface. It works well when set large and in uppercase, and legible when set small. The simple colour palette is energetic but also understated so as not to compete with the visual content. It is androgynous for an app that feels accessible to anyone who wants to get fit.

Functional components are designed using the atomic design system. They are created for multi states in a way that feels seamless and aligns with the visual identity.

The dashboard includes charts that make it easy to track progress compare the current performance of the user against previous time periods, while the ring chart helps to monitor their performance in real time. Colour is used sparingly but in a way that clearly gives emphasis to important information.

We got really positive feedback from the desirability testing with most users describing it as sporty, customisable and easy to use. But the most common feedback was, “When can I subscribe?”

We used Maze to test our prototype and had a good success rate but noticed that users dropped off when instructed to adjust their personal filters. The heat map showed us how users clicked on the tags rather than the icon as it wasn’t clearly recognisable.

Other mis-clicks in the testing were largely a result of people wanting to actually use the app rather than follow the path we specified.. An unexpected but encouraging result.

Learnings and next steps

I really enjoyed working on this project with my team partner and we are excited about the final product. We found Maze quite frustrating and are looking for an alternative tool to use for testing if you have any suggestions?

As next steps we want to review the text in the app for accessibility as older testers commented that it was quite small. We are also going to rethink the filter icon.

Case study: Designing a wellness app was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

Adding to the Netflix entertainment viewing experience

Netflix is an online streaming platform that most people have either used or heard of before. The user experience is well designed and the design system is extensive and extremely thorough. Netflix is a platform that I personally really admire and enjoy, so I decided to take up the challenge and see if I could add anything that might improve it.

The idea that I thought of was to design a watchlist feature. Simply put, this feature will allow a Netflix user to create curated watchlists using available content on the platform.

Research

Business analysis

To check whether my idea was workable I did a competitor analysis, comparing Netflix to three other online streaming services: Disney Plus, Apple TV and Amazon Prime.

This analysis revealed that Netflix’s value proposition focusses on convenience and choice, providing on-demand streaming of high quality entertainment to its user 24/7. In light of this, a watchlist feature would enforce convenience, add to a user’s ability to choose, and give them added control over their viewing experience.

Their subscription fee is notably more than their competitors, which confirms that users recognise the value and are willing to pay extra for their product. This means that the cost of adding a new feature would be viable.

I also did a feature analysis to check if a watchlist feature is something that is already out there as a feature and found that two out of the four services that I was analysing already offer a form of watchlist feature.

User research

I did a quick survey using Google forms to find out more about user viewing habits and preferences and what the users thought of a watchlist feature.

I found out that more that half of the users who responded to my survey watch Netflix everyday. Almost half of them are simultaneously watching more than one show at any given time, and 75% tend to watch for more than an hour at a time. From these results I was able to deduce that a watchlist feature could be a useful feature as users watch regularly and often more than one show in a single sitting.

To get richer and more qualitative information I conducted six interviews with a range of Netflix users. The feedback on my concept was positive and the ideas and suggestions that I got from the interviews were really useful when it came to thinking through and designing the user experience.

“I like to pre-select a few different things to watch so I don’t need to make any choices while watching.” CRAIG

“I would love it if Netflix created a watch list for me based on my chosen favourites.” LUCIE

“I would like to make a watch list to plan my evening with the time that I have.” VERNON

“If I have a free evening then I could watch a line-up of a few of my favourite shows, like two comedies and then a documentary.” GABIE

“It would be cool to have a watch list pre-prepared and ready to match my mood.” MARIA

More specifically I got interesting input around time management. Users want to create a watch list in advance so that they don’t waste time choosing shows during their viewing experience, and one user commented that it would be useful to create a time-based watchlist to help them plan their evening in advance.

Empathising with the user

With this quantitative and qualitative information I created a primary user persona to help me stay on track during the user experience design process.

Billy is a 22 year old student living in London. He likes to work hard and play hard and for him playing hard is relaxing in front of a favourite show. He has two main pain points. The first is struggling to choose shows to watch when with a group of friends. The other is a tendency to binge-watch and losing track of time while watching.

Because of Netflix’s diverse target market I also looked at a secondary persona. Miranda is a 36 year old professional living in Germany. She has two young kids and lets them watch Netflix under supervision.

She wants to know that her kids are not being exposed to anything inappropriate or faced with overwhelming choice at their impressionable age. A watch list would mean she could let them watch a set time of television that is curated for them by herself.

Defining the problem

In considering all the information gathered during the research phase and these personas and their needs, I created my problem statement:

Regular Netflix users need to create a watch list of curated entertainment because they want to have control of the viewing experience.

After defining the problem I then brainstormed a series of “How Might We’s” (HMW) to help me to develop the best design solution for my feature idea. The HMW that I chose to focus on was:

How might we make it hassle free for a user to create a Netflix watchlist.

It is really important to me that the watchlist feature integrates seamlessly with the existing Netflix platform, but also adds to the user experience and is easy to use. Tying back to Netflix’s value proposition on entertainment, leisure and convenience, interacting with the feature must be intuitive and effortless.

Ideation

With the problem statement and HMW front of mind I used a Moscow map to determine the details of the watchlist feature and define the minimum viable product (MVP). There are potentially so many ideas and possible add-ons to this feature concept such as sharing, user networking and user ratings,
but I first needed to focus on the essential functionality.

Firstly, the MVP needs to have a watchlist page consolidating the user’s watchlists. Next, the user needs to be able to create and name multiple watchlists, adding shows while browsing. There needs to be a search functionality so that a user can find something specific to add to a watchlist. It must be possible to see the running time of the watchlist while creating it. And lastly, users must be able to easily play, edit or delete a watchlist.

I set up the site map of the existing Netflix app to analyse the structure and plan where the watchlist feature would fit in. I then reworked the site map to include the feature. It would be accessed from the primary navigation positioned at the bottom of the mobile screen.

To design the user experience based on the new site map, I determined a happy path for the user task: Create and name a new watchlist, add content (including specified movies and series episodes) to reach a playtime of about 3.5 hours. The happy path included six main steps from beginning to end.

Using a user flow diagram I analysed these steps in more detail to ensure that I hadn’t overlooked any part of the process. There are five decision moments in the user flow and these are each supported by actions and system feedback which guide the user through the process.

Design

With the user flow defined in detail I created a low fidelity prototype of the app, with sketches that visually expressed every step of the process. Using these sketches I did concept testing.

I got multiple users to try out the feature and collated their suggestions and criticisms. From the feedback that I got the following points were actioned and integrated in the mid fidelity:

1. Simplify the home page by combining the “Add to My List” and “Add to Watch List” as one icon/button
2. Rework the watch list icon as it wasn’t clear or easily recognisable
3. Remove the confirmation pop up as this feedback could be integrated more intuitively into the UI by a simple icon change
4. Relook the wording of all call-to-action buttons. In most cases they needed to be more specific and relate to the action at hand. iOS guidelines state that the text on a button must describe a definitive action which I needed to fix across my design.

Prototype and testing

With feedback integrated I used Figma to create a high fidelity version of the design and a working prototype for useability testing.

I did some in person usability testing and used Maze for remote testing. There was a 70% direct success in task completion. 83% said that they would use the feature if it was available and on average users found it easy to navigate.

A great suggestion that came from the testing was to display the playtime for individual episodes and movies to help a user make an informed choice when building a watch list.

Learnings and next steps

Working on this project I learnt a lot about how to use the iOS guidelines and they really sped up design decisions. I found out that even the simplest feature can be really complex if you consider every possible user path. The UX ideation tools helped to keep things focused

I found Maze a really great remote usability testing tool as it guides the tester through he process and the dashboard provides great qualitative feedback.

The next steps on this project will be to think through the social networking opportunities of this feature and to look into how pre-suggested watch lists can be created by Netflix based on a user viewing history and preferences.

Thanks for reading this case study. Let me know if you have any feedback or thoughts. Happy watching!

Case study: Designing a new feature for an iOS native app was originally published in Bootcamp on Medium, where people are continuing the conversation by highlighting and responding to this story.

Case study: A UX design process

WarmLab is an entertainment business that promotes Minimal-House music by organising music parties and events. Due to the Covid-19 pandemic and subsequent restrictions, the business needed to press pause. But now they are ready to relaunch and a website is a vital part of their business plan.

We spoke to the owner and main stakeholder of WarmLab. He explained that his business objectives are not only to promote music and events, but also to support the music artists. He wants to grow his business through a website that profiles the events alongside the artists, with ticket sales directly to the user (not sending them to a secondary website). He also hopes to grow a community of people who share a love for minimal-house music through an online membership.

Business research

Before starting the design process our team did some preliminary business and user research. We conducted a SWOT analysis and determined that WarmLab’s strength is their niche music event offering, an obvious weakness is that they don’t have a website, an opportunity is that people are excited to go out and party post lock down, and a threat is that WarmLab is one of many music event promoters.

With this information we did a competitor analysis to profile WarmLab and define their brand in context of their direct competitors. This was followed by a feature comparison to determine what WarmLab’s website would need based on other online offerings and what additional features they could have which would make them stand out.

What stood out was that most competitors use a secondary website to sell their event tickets, none of the competitor websites integrated social media, and only one competitor offered a membership program.

This information enabled us to create a brand positioning map to pinpoint their current position relative to other relevant brands, and highlight where a potential gap in the market exists. WarmLab is currently Local-Exclusive but they would like to grow to become International-Exclusive.

Empathising with the User

We conducted user research by doing interviews with people that aligned with the WarmLab target market. We wanted to find out what users liked and disliked about online ticket purchase and how they carried out this process. We were curious about their knowledge of the genre of music that WarmLab promotes and what would prompt them to buy tickets to these events. Lastly we asked the users about what information or features they would expect to see on an event promotion website.

A few interesting quotes from our interviews:
“I would like to be able to buy and access tickets from the official website.”
“I expect to see artist, performance info, price and times.”
“I don’t like it when I am forced to log in straight away.”
“I want to know how many people are attending the event.”
“I want to see the name of the event big and bold so that I know for sure what I am buying tickets for.”

We gathered and organised all of the user information from these interviews using an Affinity diagram and from this we created a user Empathy Map. The Empathy Map really helped us to think about the specifics of the user experience. We mapped out what the user thinks and feels as well as their pains and gains which informed our User Persona.

Our User Persona is “Micro Minimal Mihail”. He is a 29 year old, living in East London. He loves to go to electro music events that have a good vibe, where he can feel unique at the same time as being part of a community. But he is new to London and hasn’t connected with many people due to the pandemic.

He wants to know when events playing his favourite music are happening and where. He would like to be the first to know about early bird ticket specials.
He wants to be able to access information about his favourite artists and find new music. He would like to be part of a music community of friends. With this information we developed a User journey Map.

The User Journey Map detailed Mihail’s experience of coming home from work on a Friday evening, wanting to go out but not knowing what events are happening. This results in an online search for events which is frustrating until he finds an event website to help him, but then gets redirected to a different website to buy a ticket.

Defining the problem

By identifying the low point in the user journey we were able to determine specific UX opportunities for our product and define our problem statement.

We also thought about our product in terms of a series of “How Might We” statements to help refine our potential solution.
How might we…
… simplify the online purchase of music event tickets?
… help the user to know more about Minimal house events?
… help our user to be a part of a Minimal community?

Next we brainstormed as a team to determine our Minimum Viable Product (MVP) by deciding what features our product must have in order to satisfy the business and user needs. These features included event information (date, time, line up, people attending and venue), music artist bios, ticket purchase functionality, and a secure banking back-end

Coming up with ideas

Our ideation kicked off with creating a site map which determined the structure of the website and content hierarchy.

We chose to first focus on the UX of the ticket purchase process and set a user task of “Buying 4 tickets to the Resurface event on 31 July and using Apple pay to purchase the tickets.” From the site map we were able to determine a happy path which we expressed as a user flow, including every step in the process.

To refine the details we developed epics and user stories. One of our epics was “buying a ticket for an event” and we brainstormed user stories for this to make sure we had thought of all the details such as promotions, price, quantity, unit cost versus total cost, payment methods and security.

Design and prototyping

With the ideation phase complete we created low fidelity wireframes for our “happy path”. Each member of our team made sketches of their ideas and then we consolidated them into wireframes that pulled together all the best ideas and features.

We also created low-fi wireframes of the artist bio page and gallery page.

These low fidelity wireframes were used for concept testing to get user input on our design thinking before digitising the design in Figma.

Testing and refining the UX

Using the mid fidelity wireframes in conjunction with the feedback received, we created a prototype for usability testing.

We got lots of feedback from our testing, both qualitative and quantitative. In the image below green represents positive feedback, red is negative and blue shows suggestions.

As a team we filtered the feedback and chose what to address immediately and what would become part of the next project phase. We prioritised changes that effected usability and made any adjustments that would improve the user experience.

Below is a demo of our mid fidelity prototype after the updates had been implemented.

Learnings and next steps

A valuable lesson learnt in this project was that making a process simple for the user really helps to aid the efficiency and completion of a task. This includes removing unnecessary steps by combining processes where possible. The ticket purchase flow was collapsed from 3 steps into 2 steps and the event information that users are looking for when they come to the WarmLab website was put on the home page instead of being accessed as a menu item.

As a next step in this project we want to all get stakeholder input before starting work on the high fidelity prototype. At the same time we will address the rest of the feedback from our usability testing such as a search function, links to artist profiles and how to buy tickets to multiple events. We also want to work on the functionality of the membership feature which will grow the WarmLab community.

And then to build the site so that WarmLab can do what they do best!

This case study describes a problem solving exercise where we endeavoured to resolve the issue of local product accessibility and food sustainability.

Local organic food is not accessible to everyone, being restricted by availability and cost. Supermarket chains and other big companies benefit from the organic food market and conscious customers, but don’t actually solve the situation. Labelling a product “organic” has become a marketing gimmick and there is very little reliable information available that defines what this actually means. Furthermore, “organic” products are often not local which means that the process of getting them onto the supermarket shelf negates any positive effects of their “organic-ness”.

We were briefed to come up with a solution to help communities access the local seasonal produce fuelling fair and honest relationships between producers and customers while ensuring food safety for all.

Our process

For the purposes of this project we followed the 5 step design process which included researching the problem, identifying the user and their needs, then coming up with feasible ideas to solve the problem. We then created a prototype which we tested.

Empathise

It is important to empathise with the user to ensure that we create useful solutions for real people. We needed to eliminate any incorrect assumptions and personal preferences, so the first step was to conduct user research. We created a survey to get baseline information about our target market and their shopping habits. Using a Lean Survey Canvas we were able to define what we needed to learn and who we should target with our survey.

The survey that we sent asked users about what organic and local food meant to them and what limited their accessibility to local organic products. We were also interested in what motivated them to buy certain products while shopping and what could potentially improve their accessibility to local seasonal products.

We received 147 responses and the data that was collected through the survey was really interesting.

Using this information we compiled interview questions and interviewed 5 users to get a deeper insight into the problem and richer user information. Below is a summary of some of the quotes that stood out from the interviews.

Having gathered this information about our users and their shopping habits and thoughts on local and organic, we created an Affinity Diagram to summarise everything in the context of our challenge:

Come up with ideas to solve the issue of fair and honest relationships between producers and customers while ensuring food security for all.

We then organised all the thoughts, quotes, data and ideas into broad categories and dot voted on what we, as a team, felt were the most important issues to address with our app.

With these issues chosen and decided, we created an empathy map of our user. This collaborative tool helped our team to gain a deeper insight into the user’s pains and gains as well as what they see, hear, say, do and feel regarding the topic of local organic products.

This really helped us to set up a detailed User Persona which more specifically defined our user. We named him Organic Oliver and his archetype is “The Conscious Buyer”.

Organic Oliver is a 28 year old software developer, living in a big city with his partner. He wants to shop organic and choose local products as it is better for the environment, but finds his choices are limited and over priced. He also doesn’t like shopping if it is inconvenient and finds the information available to him about organic is insufficient.

The user persona led us to create a detailed user journey. We considered a scenario where Organic Oliver is watching a documentary on television about local sustainable products, then endeavours to find out more so as to purchase local and finally goes to the shop to try to buy local products. The journey ends with him not buying anything local as he didn’t feel that there was enough information and the products we limited.

We described all of his emotions and thoughts relating to the actions he would take through this journey, and identified opportunities where the app could help him, based on these emotions.

Define

The opportunities that were identified in the User Journey helped us to define the problem statement and hypothesis statement for this project.

Problem statement

Young conscious professionals need to find a way to be able to access more information about local products because they want to connect with their local producers.

Hypothesis Statement

We believe that making information about local products more accessible for young conscious professionals will achieve the goal of connecting shoppers with their local producers. We will know we are right when 30% or more of their grocery budget is for organic, local products.

Having a problem and hypothesis statement aligned our team by clearly defining the problem. Once defined we could work on conceptualising a suitable app that could address Organic Oliver’s issues and concerns.

Ideate

We brainstormed ideas for the app, putting the problem statement at the centre. All of the team’s ideas were added, no matter how crazy or seemingly impossible. With all the ideas on the board we then dot voted on what would be the most important features of the app and how it would address the problem. These features included product information, where to buy local products, producer or farmer’s location and a map.

Prototype

Each member of the team created concept sketches independently. We then came together and discussed them as a group, making note of the best ideas or features in each.

Based on these notes, final concept sketches were created that incorporated all of the best ideas.

The app concept can be described as “UberEats for Local producers” as it is structured in much the same way. A user can search for local producers using a map with “where” and “what” filters. Depending on what the user chooses the map shows relevant local producers. The user can then find out more about the producer by tapping on the dot location on the map, or go to the producer’s page where a product list is available.

A user can select items from the farmer’s product list and then check-out to order them, either for collection or delivery.

A user can shop and buy products from multiple producers on the app, making the shopping experience easy and convenient.

Testing the idea

Using the concept sketches we tested the idea with a few potential users who all thought that the idea would definitely encourage them to shop local as it made local products more accessible.

They also liked the idea of supporting local producers by buying from them directly. It also appealed to some users that they could use the app to locate stores where local products are available.

Learnings and next steps

From this project we have learnt that there is not enough information available about local products and that local organic is not easily accessible. We also discovered that there is currently no relationship between the user and the producer.

Our next steps on this project would be to create a new survey to address questions that have come up during the process. We would also like to research, define and interview a secondary persona (the farmer/producer) to investigate how this app could solve any of their issues such as distribution. We would also like to ideate the logistics of the app in terms of product delivery and collection, and a third party payment system.

Overall we are very excited about this idea and hope it is something that can be developed to help with food sustainability and local product accessibility for all.

For this evaluation I have put myself in the shoes of a young couple living in Cape Town, South Africa. They want to enjoy a travel adventure and after saving up for the past year, and have decided to visit the Great Wall of China.

They both have corporate jobs and spend the week working hard but on the weekends they love to get out into nature. They are keen hikers and enjoy the outdoors. They don’t mind “roughing it” and prefer to spend their money on a travel experience over luxurious accommodation. Their idea of a good trip is to have everything on their backs so that they can embrace the adventure and go where it takes them.

An app to plan and book their trip

I did a quick web search for best apps to use when planning a trip to China and the results uncovered some interesting travel challenges that I hadn’t thought of. There are a number of great apps that will help them when “on the ground” in China and assist with language challenges (Waygo), getting around locally (Didi, China’s very own Uber), paying for stuff (WeChat Pay, the popular cashless payment app in China), maps (Baidu) and currency exchange rates (XE Currency). But the app that would be most useful to our travellers is Klook, which is an in-destination booking platform. When in China, this is the app they should use when booking their tour of the Great Wall.

But first we need to get to China. For this I looked at Trip Advisor, Kayak and Hopper as possible options.

To help me to decide which app to proceed with I used Nielsen’s heuristic evaluation. Some points to mention from this evaluation are that Trip Advisor requested user sign-in before allowing any access to the app. This can be off putting, as a user may not want to give their personal information before provided with sufficient incentive. This aspect effects flexibility, efficiency of use and user control and freedom. Kayak and Hopper both have a cluttered UI, packed with options which are distracting given that our users already know where they want to go. Travel is always associated with certain amount of anxiety and I felt that Hopper and Trip Advisor did very little to make me feel calm and secure. The user interfaces both felt very stiff and with no human friendliness. Hopper was also really slow to load search results which became annoying.

I chose to move forward with Kayak. It has a straight forward interface design and the user is given the option to book a flight from the home screen. The app doesn’t overwhelm the user with extraneous information, which made me feel in control and confident.

Other important travel information:

Airport: Cape Town International to Beijing International airport PEK
Currency: Chinese CNY
Medical needs: Up to date immunisations for Hep A, B and C as well as Japanese Encephalitis, Polio, tetanus and Typhoid
Wardrobe: It is hot in July so pack Summer clothes. Pack good walking shoes.
Days needed to explore Beijing and the Great Wall: Minimum 3 to 4 days

User testing

For the purposes of testing the Kayak app I interviewed users that matched the user profile described above, and gave them the tasks of booking a low budget (R50,000.00) round trip flight to Beijing for a 3 week holiday in July, as well as booking accommodation for the first 2 nights in Beijing.

They would be collected from their hotel by a tour guide for the 2 day hike of the Great Wall. Tours are not booked using Kayak, but rather by using an in-destination app such as Klook (mentioned above). Given this couple’s adventurous spirit they are likely do research from home and then make their tour booking when they reach Beijing and have had a chance to chat to the locals about options.

Results

I showed the home screen to the users for 5 seconds and then asked them what they remembered. Because the home page of the app is quite simple and uncluttered, they all remembered the flight, hotel and vehicle icons and unanimously recognised it as a travel app and knew to use the aeroplane icon to book a flight.

I then watched them each execute the set tasks. I told them to keep going until the point where they were asked to put in their credit card details and pay. No one wanted to book a trip to China by mistake!

The time it took each user to complete the task varied. I think that some people are more familiar with certain app functionality than others. But all of them managed to complete the tasks in less than 10 minutes.

Insights

What I have observed from the user behaviour is that recognisability is incredibly important. Users consistently look for a button that describes what they want to do in order to complete a task. This is learned behaviour and important to consider when designing a UI. In the absence of a prominent button the users I observed would click around looking for the right feature, sometimes making errors until they found what they were looking for.

The consistent error that I observed, which I think is worth addressing with my redesign, is the date selection on the “find a flight” and “find a hotel” screen. This was missed by 2 of the users testing the site, and while it was easy to go back and fix, it would be better if it was made more prominent to avoid the error and save the user time and minimise frustration. I also noticice a few issues with icons styled like buttons but not buttons which cause mistake clicks which I have addressed in my redesign

Redesign

I have shown screen grabs of the full user flow and annotated the elements that I am plan to focus on. They are features that appear in the first few steps/screens of the process. This user flow and UI design has he same features when booking a hotel stay.

The low fidelity mock up show my proposed ideas and thinking. On the home page the options are presented as functional buttons incorporating the icon.

And the on the subsequent screens the elements that need to be filled in are highlighted until completed so that a user doesn’t skip past them by mistake. I have indicated the steps using green and and functional buttons that will take a user to the next screen elements using orange.

I then created wireframes of my idea in Figma showing the user flow with my suggested improvements.

You can take a look at the interactive prototype here

What I learnt

I found this project quite tough as it had many complex phases, but it was very rewarding to pin point design issues and come up with potential solutions. I have learnt that no matter how established a digital product may be it can always potentially be improved through user testing.

User flow: transfer money

The Multiply app is for a loyalty programme supported by medical aid company, Momentum. When one spends money at certain retailers credit is earned which reflects in the “savings wallet” on the app. This credit can then be transfered to the “payment wallet” and spent using the linked Momentum Multiply credit card. I have not used my earned credit before and was keen to investigate how it works.

UI elements

The UI elements observed in this flow include buttons, text input fields and a pop up keyboard.

Lo-fi wireframes

I first did quick sketches of the user flow to get a sense of the steps and noticed that the actionable buttons tend to be lower down on the mobile screen.

Task analysis

The process of transferring funds was really straight forward and much easier than I anticipated. The app design is very clean and simple, but I do feel that the use of icons is not completely successful. The icon for withdrawal versus credit are not really clear if seen in isolation and the tiny icon a bit meaningless. A simple plus or minus sign would be more accessible. The colour use for these icons also has no recognisable relationship with the meaning.

Mid-fi Wireframes

User flow click-through indicated by colour. Link to view the Figma working prototype.

Conclusion

This was a fun exercise and I enjoyed executing it in Figma. It was interesting to notice patterns in the UI that effect accessibility such as position of the primary and secondary navigation. When creating an interactive prototype I also realised that there were quite a few extra steps to the flow that I hadn’t thought of when doing the lo-fi mock-ups which is a useful learning.

The app is very useful for determining a route, checking bus arrival and departure times and seeing where one needs to change buses on any given route.

Using the MyCiTi Bus system is dependant on having a MyCiTi Bus card which can be purchased and loaded at all main bus stations. The app can be used to locate these main stations which are located at various points in the city. To use the bus system the card is tapped when a traveller gets into the bus and again when they get out of the bus. In this way the fare is calculated based on the bus trip. When tapping the card in or out the balance of the card is displayed on the LED screen.

But the problem is …

After interviewing MyCiTi Bus commuters there were a few common pain points regarding the app and it’s functionality.

Firstly, loading the card with credit can only be done at the main bus stations. This means queuing during rush hour and needing to get to the station earlier to load the card before travelling. This is inconvenient and time consuming.

Secondly, checking one’s balance on the card can only be done when loading the card or tapping in and out of the bus. This means a commuter needs to “mentally keep track of their balance” to know when the card will run out so that they don’t enter a bus and tap in, only to discover they are short of credit.

In summary, the app does not offer the commuter a comprehensive service and it is not fully integrated with the MyCiTi Bus service and card payment system. It offers a one dimensional solution which can be improved for a better user experience.

A solution …

To define a solution the main issues are first summarised: (1) the user wants to be able to load their bus card with credit from the app and (2) the user wants to check their card balance from the app. Both of these actions will empower the user and give them more freedom while using the app which will improve the user experience and make the app more useful.

The solution is quite simple: integrate financial functionality into the app so that users can sign in, link their bus card to their bank account, and then load their card using the app. This function can also display the card balance.

Below are wireframes for how the banking aspect of the app could work. I have shown the login process as this is an entirely new aspect to the app which currently does not require a login. The wireframes show the 2 step process of linking the user’s bus card by scanning in a QR code unique to each bus card, and then linking the user bank account. Thereafter the user can easily load their bus card with credit and also see their balance.

Learnings

I found this process interesting and enjoyed researching and thinking through the problem to come up with a solution. When a solution is so simple that it seems quite obvious, I do wonder why it remains a problem! So the next step is contact the app developers with a few questions and some suggestions.