Information Architecture, Sketches, Wireframes, Sitemaps, Card Sorting.
The next step was to revisit the present Site Map. This involved me decoupling pages into sticky notes and asking a test participant to sort them into sensible groups.
What Changed and Why?
The current IA puts the My Accounts section under the Profile category. From the tests, users didn’t think of things this way. They assumed their Accounts were different from their Smile Profile. Another problem I discovered in the current IA was the unnecessary replication of nodes that made the site more easy to get lost in.
And here comes the fun part. 🎉🎉🎉
Not so Fast (Highlights)
A walk through the process.
I know almost nothing about Smile’s brand guidelines. The smartest thing to do was keep their color (#75B343), font (Helvetica neue) and Logo (scary).
The Recharge Experience.
This is the most important part of the Smile online experience. 99% of the times I log in to my Smile Profile, I’m purchasing a data bundle. A vital part of this redesign was making it findable at all times (Hence the top right position).
One issue with the recharge experience was the way the data bundles were organized. Sections like
Combo plans, flexiData plans, Voice plans, Lite plans, Bumbpa plans, midnight and weekend plans, Anytime plans, Unlimited plans. Jezz😅
This is an entirely effective way for Smile Communications to categorize their data bundles, but for a user like myself, the only 3 things I care about when buying internet bundles are
The Price, how much Data I’ll get and how long it’ll last me
Based on that, the most sensible classifications are in this order
Recency: Based on the fact that most users will buy what they’ve always bought. Or something close.
Price: It makes sense to organize the data plans in order of price. So a user knows the categories to look in.
Data amount and Validity: Users can choose to sort the list by any of the categories (Recency, Price, Data amount, or Validity).
I also provided an Input for the user to quickly enter their budget and get data bundles around that price range.
A brief glance at the data plans list on the left shows different colors. I tried to find out if the colors meant something. Nothing so far, so my intuition is to go all Smile green.
A more info link provides more information about the data plan.
The Help Experience
Smile has a whole tab in their main navigation dedicated to Customer Help. This is such a cool thing to do… But providing users with 1 inch of space to type in their problems is the opposite of what they’re trying to say.
Smile’s website on mobile is nothing different from the desktop site. Just a little Pinch, Pinch, Pinch all the way 👌. I don’t know how much of Smile’s users come from mobile, but if what I know applies here, a huge percentage are mobile visitors. Having a pinch-pinch mobile experience in 2019 is a big No No.
At first, it sounded like I could just make the mobile version from the desktop. Which was a totally bad idea. Designing for mobile is a different game altogether.
In order to make only the key experiences close to the user as possible, I had to revisit the IA of the site. Basically shifting away operations that are hardly performed.
High Fidelity Screens
The goal of the redesign project was to
Identify the changes required to improve the usability user experience of the site.
Changes related to Information Architecture, Layout and Typography, Labeling, etc were made. How did this impact the UX?
Here’s a screencast of a user interacting with the redesigned experience. (Sorry for the poor Quality 😰.)
Running tests on the redesign brought me a lot of joy. The fact that I didn’t need thousands of dollars to test and improve on an experience shifted my perspective about design to the more objective end.
The average time to complete a task for the official Smile website was 2.94 minutes per task.
(2.5 + 1.8 + 4 + 3.5 + 3.6 + 4 + 1.2mins) / 7 tasks = 2.94minutes
After the redesign, the average time per task went down to 22.57 seconds per task. An 88% improvement.
(49 + 15+ 16 + 18 + 50 + 10secs) / 7 tasks = 22.6seconds
Average error rates per task in the official Smile website was 9.8 errors per task
(11 + 0 + 15.6 + 8.6 + 25 + 8.6 + 0 ) / 7 tasks = 9.8 errors per task.
After the redesign, error rates went down to 0.6 errors per task. A 94% improvement.
( 0 + 0 + 0 + 4 + 0 + 0 + 0) / 7 tasks = 0.6 errors per task
Here’s a side by side comparison of the average results of usability tests with 3 participants; David, Wale, and Presh.
This is much better and Straight forward- Presh.
This is so easy because everything is been written here — Wale (5.01)
Challenges & Learnings.
The biggest challenge was the lack of more detailed data on how Smile customers make use of the product. The tests were run with just 3 participants, which is a smallish number. I think anywhere around 20 would be cool. I could run them in a series of 5 participants per redesign iteration.
Another problem I faced was ignorance of lots of things up front. I didn’t even take a picture of the test scenes 🙉. I didn’t ask for help from the community on time. There’s still lots of room to improve anyways.
One of the reasons, I took up this project was to get me as close as possible into IA. Organizing information in ways people can easily understand is a core skill of a UX Designer. Some resources I went through before starting this project were
I hope to learn more about it in coming projects. This story is as long as I don’t want it to be already.
My mindset of how people use computers has changed. After observing how people scroll, click and think about websites, I’m now convinced
I’m in the top percentage of people who make use of computers the way I do
A whole lot of people will not use a computer as I will. I must consciously remind myself of this. Every time.
Something I also learned while running the tests. Really really take your time to brief users about
- What the site is.
- What a Usability test is and why on earth you’re doing it (In straight-forward, plain and understandable language)
- Be definite about what you want them to do for you.
- Take out time to write fictions scenarios to give the participants a little context of the task. Instead of saying something like
Take this app bro, How do you find a barber close to you,
Say something like
Imagine you moved into a new area. You’ve been around without a hair cut for about 3 weeks now. You really have to get a cut this weekend. How do find a barber close to you with this app.
I also hope to learn more about conducting more advanced Usability Tests. Some resources were useful too.
So that’s it. I’ll love if you could share your learnings on how to make better redesigns, Information Architecture, and Usability tests. Feel free to share your feedback.
And if you found this useful, 50claps is the fastest way to make your other friends see this too.