Designing the new Snap profile page!
At Snap we are always thinking about our product and how to give our customers the best experience. As Snap's UX / UI designer, it's my job to make sure our product is usable and enjoyable for you, the customers.
We're in the process of building out Snap profiles, where you can store information about the trips you want and your local community hub. While the development team are still building the pages, I thought I'd give you some insight into my design process...
The previous Snap profile page had a collection of data, but didn't have any information about who our users really are such as:
- Why are they travelling?
- Where they would like to be picked up?
- Where are they going?
- Are they travelling with people?
- Where are they based?
- How can we let them know about other Snap users?
- How can we make them feel they are part of a community?
It's also in need of a rebrand, following the new look and feel of the website.
We focused on what we wanted to achieve with a new version of the profile page, considering both the short and long term goals:
- Make the profile page more personal with a better overview on the profile
- Improve customer loyalty
- Make the customers feel members of a community
- Understand customer habits: why they are travelling and where they prefer to go
- Let customers feel they are directly involved as part of our process: the more they will tell us, the more we can do for them
The ideation process
Every project is a result of different phases. Sometimes they're more complex with lots of iteration and sometimes they run super smoothly. The general process looks something like this.
- Research: competitor analysis
- Feature exploration
- Feature prioritisation
- Design - first sketches, prototype and iteration
- Design - final prototype and copy
- Design - final tweaks and testing*
*User testing is really important in every phase of the project, but we had to cheat a little with the profile page. While we did do some internal testing, we really wanted to release this new profile page as soon as possible, so we decide to skip the user testing phase. We'll be using your feedback in the community forum to improve the profile in time.
While I look after design at Snap, I always collaborate with people from across the business to get a diverse set of opinions and feedback. I worked with our Product Manager, Marketing Manager and Director of Internal Operations to create a profile page that is simple for our users, and helps us provide the best experience.
1. Research: competitor analysis
Once we know what we want to achieve, we look at how other people are doing similar things. We did a lot of research on direct competitors but we also looked at some other products we love for inspiration.
Some of the main ones we looked at were:
- City Mapper
The next step is understanding who our customers really are.
We created personas for loads of different types of customers who might want to interact with Snap. We stuck everything on the wall in our meeting room.
One thing about our process: we love sticky notes and we use them a lot!
3. Feature exploration
Now we knew what we were trying to achieve and who we were designing for, and had some inspiration, we started sketching potential features.
We use loads of different methods to sketch ideas. One of our favourite methods is crazy 8’s, which forces us to record all of ideas quickly, so we don't have time to discredit them before we've explored them more fully.
4. Feature prioritisation
Once we had discussed our ideas, we stuck the best ones up one the wall and asked the team to vote on the parts they liked best.
The design process
5. First sketches, prototype and iteration
Now its time for my favourite part!
With all these thoughts in my mind from the previous meetings, I started to sketch sections of the page, in different ways and with different features. Every piece of paper was a specific section with a specific functionality.
I stuck all my sketches on the wall, and reviewed everything with Dom, our Product Manager.
After that we gave every member of the tech team some stickers which they could use to mark their favourite features within the sketches. They voted on the ideas they considered the best ones for our page.
We narrowed down the options based on the team's feedback and together, we built a “paper page” with all the final sections.
Once we'd agreed on a rough direction and features, it was time to get started on the prototype.
I used Sketch to create the first rough prototype. I always focus on mobile design first, as we know most Snap customers view the site on their phones.
We reviewed the first prototype as a team, working out what was and wasn't technically feasible, or relevant, for an MVP. We simplified the structure and recorded all the ideas we discarded so we could revisit them in the future.
6. Final prototype and copy
I adjusted the structure of the prototype so it looked right on both mobile and desktop. I also created all the potential use cases and all the interactions and visual feedback for the page.
Every time I make progress with a design, I share it as a prototype on inVision with my colleagues. Sharing my work is not just useful, but necessary for me, as it:
- Means everyone can see the status of the work
- Our marketing team can work on copy
- I get a fresh pair of eyes to pick up things I didn't notice
- Anyone reviewing my work can see it in context, which saves me having to make changes later!
When I'm working on a new feature, I find it useful to distract myself for a while (ideally a couple of days) so that when I come back, I can take a look and immediately understand what is working and what's not. It's not always possible when you're moving so fast, which is why feedback from my colleagues is so helpful.
7. Final tweaks and testing
When all the designs were ready, I presented them during our weekly check-in meeting, alongside a summary of the research.
Everyone in the company takes part so it's a good way to share new stuff with the whole team, and get feedback from people from all areas of the business.
This meeting was really useful for me and I received some very useful comments which helped me to make the page work better.
After the very last review, the page has now been signed off.
While I am writing this article, my colleagues are developing the page, but if you want to have a sneaky preview, you can see the page in inVision prototype.
And please, if you have any comments or thoughts on this, leave a comment on our community forum 😀