Below is the link to my V1 iPad Prototype. Here I have scaled down my desktop screens and made slight adjustments to the layout. To view, the prototype click the link below.
How LookUp adapts to the different screen sizes of iPhone and iPad
Designing iPad Screens
One of the biggest updates I decided to do was create an iPad version of my application. This idea came from my feedback from Chris and Paul during my presentation last year. I knew not a lot with the application would change that it would be more about how am I going to scale the screens down from desktop to an iPad screen.
While doing my research I found this article about an app called “LookUp” and how they adapt their app to different screen sizes.
To give a little more context about what this article is about:
While designing LookUp 5, one of the most important things that I kept in mind was the scalability of LookUp’s UI from a phone interface to an interface that worked on the iPad’s large screen. It was important that LookUp on the iPad didn’t look like a blown up iPhone app, and so I came up with a layout that would scale between different screen sizes with ease.
One of the examples in this article is the apps “Adding to Collections”
When adding a Word to collections, a popover would feel too cramped on small screen sizes, So it makes more sense to have a slide over card present that layout to the user.
On the iPad, the same UI is presented as a popover, originating from the add to collection button. This UI is more contextually appropriate for the iPad, since popovers are more easily usable on a larger display.
This is something I will need to take into account when I am creating my iPad screens and the first thing that I can think of is my documentation modal that comes from the right hand side on desktop. I may have to think of a way to display this differently on the iPad.
From reading this article I have learned that there is quite a bit to consider when scaling down your application screens.
Designing for iPad, doesn’t just stop at designing an interface that scales between small and large screen sizes. It’s also about supporting the different accessories that come with the iPad. For example, keyboard.
I have a lot to think about when it comes to designing these iPad screens.
“Social media is a place to listen, connect, converse, and engage with people. A place to build long-lasting relationships – relationships with users that will eventually do the product marketing for you. Therefore, every conversation matters.” Social media allows you to build a product teaser or “pre-hype” social media campaign. Building hype around Notice can help me grow an audience before it even goes live. I think this will work best with Notice as I will be able to build excitement around my product which is a crucial step in getting recognition.
Notice will be on instagram as I feel this is a growing platform that a lot of designers use to showcase their work. I also want to use instagram as a way to engage with my users and actually reach out to them to get their opinions so they feel like they matter.
Notice will have a twitter page with teasers and updates on the progress of the product. I want to keep the posts light hearted and fun to keep users engaged and excited to read them.
Websites can provide instant communication with customers. A well-maintained website can have many of advantages like enhancing Notice’s professional brand, and most importantly improving users experience.
I have decided that Notice will have a website to help introduce the product to users. Above is a mock up of what Notices promotional website would look like. Users will be able to understand why they should choose Notice and how everything will work e.g. pricing, features. The website will also encourage the user to download the app.
When designing notifications it is important to only show relevant information at the right time. A detailed review of the content and…
Notifications Research
I have given a lot of thought into how I am going to do my notifications for my project. I wanted to see different type of notifications are out there and how others have used them.
The article says that:
Depending on the type of application you are designing, notifications can be divided into two main groups by answering the following questions:
1. Does the notification require an action?
For example, when your team just released a new feature and you would like your users to try it. This type of message prompts users to complete a certain action, and should be displayed differently in comparison to more passive messages.
2. Was the notification triggered by an event?
There are three types of events that can trigger a notification, depending on what events occurred before: triggered by the user, triggered by the system and event based notifications.
Messages/updates/notifications can be displayed in many different ways, depending on what you would like to communicate.
I think these questions are a good thing to ask myself when I am creating my notifications. For my application the notification does require an action. The notifications will need to be turned on by the user when they want to keep up with a news topic. From here the notification will be triggered by an event which is when a new article is released that is associated with the topic the user has decided to keep up with.
The article goes on to show some different notification formats that I found useful to look at and thought where worth mentioning.
The image below is a standard notifications format:
As most common notifications are displayed within a designated area I had thought about doing my notifications like this. As it would be easy for the user to view and see the notifications at a quick glance. I ran into the issue though that I wanted to use a bell icon for the access point but since my logo is a bell, I thought this would be misleading.
Then a few more examples I found interesting:
In-browser push notifications:
Modals/dialogs:
Overall, this article has gave me a lot to think about so I need to start planning my notification experience and figure out how it is going to work best for my users.
I already know what tagging is but I just wanted to do a little light reading on it to see what others had to say on it and to see how others have used it.
To start off with I want tagging in my project to be purely for when the user is customising their profile. I want them to be able to find useful and relevant phrases / tags that will allow them to customise their profile as closely to themselves as possible.
When I was doing a little research on tagging I found this short medium article particularly interesting as it was very straight to the point.
The article says:
Tagging allows a user to categorize content through keywords that they define.
I think this is important to think about as this is something that I want my users to be able to do with customising their profiles. My application is all about staying organised and user being able to categorize their profile to how they want it is will be very beneficial.
I spoke in a previous post about what I intended to accomplish this semester with my major project. Unfortunately due to the corona virus I have been unable to accomplish all of them e.g. Usability Testing, creating a better onboarding experience for two points of views e.g. someone who is new to design and for someone who has more experience and having a single source of truth for articles so users know what they are reading had value. I hope to continue to work on these after I hand in my work as my project is something I would like to continue to develop.
However, what I have been able to get done is:
Tagging when a user customises their profile.
Notification so users can stay on top of topics.
Enabling users with the ability to share articles outside of the app.
Creating an iPad version of my application.
I plan on posting my process for each of these updates.
It’s every project owner’s greatest fear. You spent months grueling to build a product you think your customers will love. Your dreams are filled with TechCrunch features and top spots on Product Hunt. The big day arrives. You flip the switch, and… … Crickets. To avoid this scenario for your next...
Launch Strategy Research
I found this article about different steps you can take when approaching the launch of your product.
Some of these steps are:
Dig into your data to discover what people want (or where you’re missing the mark)
Talk to your customers
Research the market and turn your ideas into strategy
Go public early on to validate your ideas
Start building your community and audience
Define your ideal customer
Take a page from Steve Jobs and craft a compelling narrative
Write a mock press release using the Amazon formula and create a list of target publications and journalists
Shortlist and reach out to press, partners, and affiliates
Write and design your marketing page
Step 11 stood out to me the most as it covers touchpoints and a lot of what I have been thinking about.
11. Outline your customer journey and start gathering creative assets
Most marketing studies agree that you need 6–8 “touchpoints” with a customer before you’re likely to get a sale. In other words, customers need to see you, hear from you, and read about you multiple times before they say yes.
During a product launch, you’re going to be dealing with customers who both know you and who don’t. And the more “touches” you can get in before the launch, the higher your chance of success.
One of the best techniques for getting these touches in is to map out your customer’s journey from never hearing about you to being a paying customer. And then create assets for each step. To do this, ask questions like:
Where do they hang out online?
When did they first hear about you?
Who are people they trust?
Where do they go to ask questions?
Do you have their email or are you able to get it?
What concerns are they going to have about your product?
I think above the questions are a good starting point. They cover the key things I think I would need to consider.
There are as many different definitions for the word “touchpoint” in customer experience design and marketing as there are flavors on the average restaurant menu. Why? Because these disciplines have b...
Launch Strategy
I have started to think about my launch strategy and how I want to approach this. I need to think about my project being real and how I would want to launch it to the public.
From our lecture with Paul, I have started to think about TouchPoints and what they mean.
I found this article above to be useful in understanding a little more about how my customers would come into contact with my product.
This article defines a touchpoint as being:
“A touchpoint is any interaction (including encounters where there is no physical interaction) that might alter the way that your customer feels about your product, brand, business or service.” An example of an encounter with no physical interaction might be discovering an online review of your product.
This makes me think how can I create a good launch strategy that is going to leave a positive effect on my customers? I want my customers to come into contact with my product in a positive way that is going to leave them feeling excited for the actual release of my application. I would like for them to want to keep up to date with my product along its journey until it is done.
"Your brand is a story unfolding across all customer touch points." as Jonah Sachs, the famous entrepreneur and designer said.
This article also says how it's like a story unfolding across the touchpoints which I think is a great way to think about it. I want my launch strategy to be a story that my customers / potential users feel like they are apart of.
As the launch strategy is all about the customer I think it is important we understand what they would expect from touchpoints.
This article outlines a few points around this that I thought would be useful to consider:
Appropriate (e.g. that both the context of the interaction and the cultural tone of the interaction meet the needs of the customer or user)
Relevant (e.g. that the function performed by the interaction meets the utility requirements of the customer or user)
Meaningful (e.g. that the interaction was perceived as important or purposeful by the customer or user)
Endearing (e.g. that the interaction created some form of bond with the user or customer for example through desirability, creating delight or a playful tone)
I am going to continue to do a little more research to see how other companies/products have approached their launch strategies to see if I can gather any inspiration.
From trashy clickbait sites to the most august of publications, share buttons have long been ubiquitous across the web. And yet it is arguable that these
Sharing Content - Examples
Since my application is a desktop app I wanted to look a little more into sharing content on a desktop. Before I get into that, I found the start of this article really interesting.
Share buttons have long been ubiquitous across the web. And yet it is arguable that these buttons aren’t needed. All mobile browsers — Firefox, Edge, Safari, Chrome — make it easy to share content directly from their native platforms.
Given that users can share by default, are custom buttons taking up unnecessary space and potentially distracting users from more important actions? And do people actually use them?
A (unscientific) poll of 12,500 CSS-Tricks readers found that 60% of its readers never used custom share buttons. That was in 2014 and native methods for sharing have only improved since then. A more recent poll from Smashing Magazine found much the same thing.
I think this was interesting and it made me think that I myself don’t really use share buttons but I do think they are still a useful thing to always have.
For mobiles, the articles talk about these share the article goes on to talk about these shares sheets the native bit of UI that’s used for sharing.
Rather than offering a standard list of popular social networks to share to (which the user may or may not be a member of), the options of the share sheet are catered to the individual. Only applications they have installed on their phone will be shown. Rather than a uniform list, the user will be shown only the option to share on networks they actually use — whether that be Twitter and Facebook or something more esoteric.
I like these and they are very familiar. It doesn’t seem to have any unnecessary steps you can go in and select the application/option you want and that is it.
The article also shows options for a desktop which is the ones that I liked the most and think could be something that I could take from for my own application.
Instead of relying on the share sheet for desktop, its relatively common to have a generic share button that opens a modal that offers more multiple sharing options. This is the approach adopted by YouTube, Instagram and Pinterest, among others.
I think this modal concept is what I am going to go with. It is nice that you can copy a link to share. I plan on looking into some more inspiration for this modal idea to see if there is anything else I can come up with. I also plan on looking into what social media applications are the most popular for users to share things to.
How many websites have you been to where you’re searching for social media buttons and just can’t find them? Then, it’s not until you scroll all the way down to the bottom of the page that you see them nestled in the footer. Sometimes, they’re so tiny they might as well not even be there at all. Social media is too large and too important
Sharing Content
One of the parts of my feedback from Paul and Chris, when I did my presentation, was that I should allow my users to share the articles they are viewing. This was something that I wish I had thought of because it is a common experience that most applications allow their users to do.
I think it could add a lot of value to my application as my users will be able to share content they find important with people in their workspace or save it to other applications so they don’t lose it which again feeds into the concept of my application allowing users to keep track of everything.
I wanted to do a little research into this before I went ahead and started designing the experience.
Why are social media buttons matter?
Social media buttons have been around for a while now. At first, nobody knew what value they could bring exactly, apart from being a nice addition to a clean design. Today, we do know that the presence of such buttons results in additional mentions and shares, and the numbers are very real. For example, back in 2011, HubSpot reported that including a Twitter share button increased Twitter mentions sevenfold. That’s huge!
But not to get ahead of ourselves, at the same time, too many social media buttons tend to have the opposite effect – decreasing the number of overall shares due to decision paralysis. Just to give you one example, Neil Patel of QuickSprout once shared that when he added two new social media buttons for LinkedIn and Pinterest (on top of the original three – Facebook, Twitter, and Google+) he experienced a drop in shares by 29 percent.
So designing the right social media appearance of a website, if you will, is all in the details. It’s about finding the right balance between how quickly the visitor can notice the icons vs. how easy it is to share without having to choose from too many options.
I think this is important to consider. I don’t want to create an experience that my users are not going to use. I want to create a simple sharing pattern that is only going to take them a few steps to complete. I think my next steps from here is to look at similar patterns other applications would have to see how they allow their users to share content.
The very last semester is underway. To recap, in last semester I had done a considerable amount of work to get my project to where it is now. I have a V1 high fidelity prototype.
In this semester I plan on doing a lot of iterations and development on what I currently have.
What I Plan To Do Based on the Feedback from Chris:
Usability Testing
Create a better onboarding experience for two points of views e.g. someone who is new to design and for someone who has more experience.
Including Tagging when a user customises their profile.
Include reminders and updates section so users can stay on top of topics.
Enabling users with the ability to share articles outside of the app.
Having a single source of truth for articles so users know what they are reading had value.
Creating an Ipad version of my application.
Changing some of the wording in the app to make it more intuitive.
This is the wireframe prototype of my application. I have done basic wires to demonstrate what it would look like. The prototype goes through each of the flows you would have in each section of research, Inspirations and news.
To view the prototype you can click the link below.
dailybridgerton
yousharknotpass
pixelskylines
germansingergirl