Task Flow Case Study
I was tasked with designing two flows for an email marketing campaign web app called WhooshMail. The two flows will walk through the same screens, but with two different user roles. The first role we’ll call “Admin” and will have the highest level of access while the second role, “Basic”, will only have access to a few features. WhooshMail is looking to improve the experience for both of these roles with their audience of small business owners and entrepreneurs.
Problem
• The process can be clunky and confusing
• There are a lot of competitors so need to stay competitive and have similar features
• What features are accessible to each user role can be confusing
Target Audience
Admins Users:
Mostly ages 40-60
Primarily based in the United States
Small business owners
High School/GED or Bachelor’s Degree
Ready to be their own boss
Pursuing their passions
Used their personal funds to get started
Basic Users:
Mostly ages 20-40
Primarily based in the United States
Work for a small business
High School/GED
Hypothesis
Small business owners want an easy way to keep in touch with their customers.
Competitors
Goals
What should this project accomplish for the business?
Through improving the experience for the main user roles (admin and basic), the user would like to see an increase in user retention and also the number of campaigns sent.
How will you, personally, define success for this project?
These are the success metrics:
• Increase the first-month retention by 20%
• Increase daily active users by 10%
• Increase campaigns sent by 20%
• Strategy
In what direction is the business heading?
The business is aiming to provide an easy-to-use email marketing system for small business owners to help them keep costs low. They want to help increase the number of jobs here in the U.S. and that starts with our small businesses.
User Persona
Admin User Persona
Basic User Persona
Storyboard for Users
Admin User Storyboard
Basic User Storyboard
Competitor Analysis
There are quite a few email campaign websites out there and WhooshMail wants to stay competitive, so it is important to review their offerings to see what features will need to be added to these sets of wireframes.
Competitor 1 - Constant Contact
Features they have: First Month Free, Drag & Drop, Drives more sales in less time, E-commerce email marketing, Contact management with less of the ‘management’, Track your email marketing results in real time, Email Plus: Email marketing automation, Surveys and polls, Donations, Dynamic Sign up forms, Events
Competitor 2 - MailChimp
Features they have: Free custom domain, Boost sales with shoppable landing pages, Grow your audience with sign up forms, Find new customers with digital adverts, All your marketing needs in one place, All-in-one pricing, Help when you need it, 300+ app integrations, Industry compliance, Built-in security, Put your people front and center, Build campaigns in minutes, Built‑in analytics so you can market smarter
Competitor 3 - Mailer Lite
Features they have: Sign up free, Create amazing campaigns, drag and drop editor. Templates, text editor etc. Grow your audience, Deliver the right message, Optimize campaigns, Track your results, Campaign reports, Email automation, Autoresend, Subscriber management
Assumptions
I think users are interested in easy and accessible email marketing tools. Where they don’t have to spend too much time on creating it as they have a busy schedule. I also think users would like the drag and drop user feature because this will make it easy for them to design something that looks good in a short amount of time. I think users are unhappy with things that take a lot of time up and finding clients to send emails out to. I think more users visit the site using a mobile device so the screen is quite small. I think most users are acquired through social channels, word of mouth, recommendations.
Wireframe Sketches
From experimenting with a few designs for each email page, I have figured that the navigation can be on line with the logo at the top, or even underneath the logo on its own separate line. I’ve tried a few variations of layout for each page, keeping them simple and mostly visual.
As long as the email pages are easy to understand with icons people will recognise easily this will work good. It’s all about making sure the user can follow what is required on each page easily. I have also put ‘help’ navigation on the designs, so that if the user does get stuck, this will help them out.
Admin User Wireframe Sketches
Basic User Wireframe Sketches
Wireframes
Iteration Explanation
From sketching to wireframing, as few of my ideas have changed in terms of what to put in the navigation menu.
One thing I changed was on the admin template page, I added in the ‘current email campaigns’ at the bottom of the page so the user can view this easily once they have selected their template.
On the basic user ‘ how to use email template page’ I ended up using text instead of icons for this, to be a bit more descriptive when it comes to designing further.
I kind of combined both designs I sketched out for each page into one design, I combined the best elements from each design.
Admin User Wireframes
Basic User Wireframes
User Testing
Discussion Guide
For this part of the project I wrote out an introduction script
Prototype Videos
Admin User
Basic User
Prototype Testing
I tested the prototypes with participants to see what was working and what changes were needed.
Analysis
Basic User Analysis
Admin User Analysis
Next Steps
The next steps for WhooshMail, would be to make the ‘create’ in the tab a bit more clearer & maybe a dropdown option to ‘select template’ or ‘create a template’ from there as well as on the home page. Make it a bit easier to follow on both the ‘Basic & Admin’ version.
Change the Audience button to ‘sent to’ this will be easier for users to understand. Make the Notification tab have an alert so the user can see this better. If it is in red it will stand out more. But because it's a wireframe they don’t see it as well.
When the basic user sends their email template to the admin for approval. The basic user maybe needs another page to show that it was sent to the Admin for approval?
Redesign Summary
The high fidelity mockups have changed slightly after the users gave me some helpful feedback. I have done these amends, the navigation and site flows better.
Logo: I decided firstly by creating a logo based on a ‘Whoosh’ and created something a bit meaningful with the squirrel on his scooter zooming as the main mascot on the logo. With the colours I wanted them to be friendly yet bold and bright for the target audience.
Colours: Once the logo was decided I then took the logo colours through onto the website, to keep it inline with their branding. I used the purple colour for the navigation & footer and the orange as an accent colour for buttons etc.
Fonts: The font I decided to use was ‘Roboto’ as it’s a clean, modern looking font. For the headers I used the ‘Roboto Bold’.
Design: I created white space to make it feel clean and easy for the eye to follow. I wanted the site to be quite colourful and not dull looking. Also easy to use so not overpowered with text etc more image led.
Design: I created white space to make it feel clean and easy for the eye to follow. I wanted the site to be quite colourful and not dull looking. Also easy to use so not overpowered with text etc more image led.
Basic User Redesign High Fidelity Mockup
Admin User Redesign High Fidelity Mockup
Basic User Redesign High Fidelity Device Mockup
Admin User Redesign High Fidelity Device Mockup
Basic User Redesign Mockup Video
Admin User Redesign Mockup Video
Project Summary
After creating this project I learned that once you create wireframes and done user testing etc, the final designs can still be improved to make it better. I also learned less is more and the fact that you want an email platform to be easy to use and not over complicate it like other competitors websites.
Next time I would probably create a more indepth site with more options etc. I would also create a mobile version so that people can send emails out maybe in an app, if they have a busy lifestyle this could be something to consider.
Project Presentation